/* NSCOESN showpieces (pangolin, shield) - full-bleed, degrade gracefully */

.nscoesn-showpiece{position:relative}
.nscoesn-showpiece__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Pangolin: held as a dimmed, FIXED layer behind the whole page, the same
   treatment as the default Maple Shield array, but rendered faithfully (painted
   texture, whole creature) like the source preview. The stage leaves the flow so
   the page text starts at the top and reads in the foreground; a dimming scrim
   plus a lowered canvas opacity keep the creature behind the text. The stage is
   anchored BELOW the fixed header (top offset) so the head is never clipped by the
   nav bar. z-index:-1 keeps it above the page background but below the body text. */
.nscoesn-showpiece.nscoesn-pangolin--backdrop{position:static;width:auto;margin:0;height:auto;pointer-events:none}
/* The WHOLE stage fades on one master opacity (--pango-canvas-op), so at 0 the
   pangolin AND its dark backdrop are completely gone (a clean page), and at 1 the
   creature is fully opaque. No separate scrim: the reveal hump alone governs
   visibility, and 0 means invisible. */
.nscoesn-pangolin--backdrop .nscoesn-showpiece__stage{
  position:fixed;left:0;right:0;bottom:0;top:clamp(60px,8vh,84px);height:auto;
  z-index:-1;overflow:hidden;pointer-events:none;
  opacity:var(--pango-canvas-op,0);
  background:
    radial-gradient(120% 90% at 50% 40%, #1a1712 0%, var(--bg,#141210) 58%, var(--bg-deep,#0b0a08) 100%);
}
.nscoesn-pangolin--backdrop .nscoesn-showpiece__canvas{opacity:1}
.nscoesn-pangolin--backdrop .nscoesn-showpiece__fallback{opacity:.06}
.nscoesn-pangolin--backdrop .nscoesn-showpiece__scrim{display:none}
/* Reveal window: an invisible spacer ([nscoesn_pangolin_reveal]) that the engine
   reads to bring the walking pangolin forward as the reader scrolls it into view,
   then hold it (looking at the reader) behind the closing text. */
.nscoesn-pangolin__reveal{width:100%}
/* Catchy standfirst at the top of the body, styled to match the Maple Shield lead. */
.nscoesn-pangolin__lead{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.4;
  color:var(--color-argent,#F0EDE8);opacity:.92;
  max-width:44ch;margin:0 0 2.2rem;
}
.nscoesn-pangolin--backdrop.is-fallback .nscoesn-showpiece__stage{background:none}
.nscoesn-pangolin--backdrop.is-fallback .nscoesn-showpiece__canvas{display:none}
.nscoesn-pangolin--backdrop.is-fallback .nscoesn-showpiece__fallback{display:block}

/* Shield: a dignified hero band at full width */
.nscoesn-showpiece.nscoesn-shield{
  width:100vw;margin-left:calc(50% - 50vw);
  height:88vh;min-height:520px;z-index:0;overflow:hidden;
}

/* Caption rendered as real, translatable text over the scene (optional) */
.nscoesn-showpiece__caption{
  position:absolute;left:0;right:0;bottom:8%;text-align:center;
  z-index:2;pointer-events:none;padding:0 6vw;
}
.nscoesn-showpiece__caption .kicker{
  font-family:'Playfair Display',Georgia,serif;text-transform:uppercase;
  letter-spacing:.28em;font-size:.78rem;color:var(--color-or,#C9A230);margin:0 0 .8rem;
}
.nscoesn-showpiece__caption p{
  font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.1rem,2.4vw,1.6rem);
  color:var(--color-argent,#F0EDE8);margin:0;max-width:34ch;margin-inline:auto;
}

/* Static fallback (no WebGL): faint heraldic arms, text stays fully readable */
.nscoesn-showpiece__fallback{
  position:absolute;inset:0;display:none;background-position:center;
  background-repeat:no-repeat;background-size:contain;opacity:.10;
}
.nscoesn-showpiece.is-fallback .nscoesn-showpiece__canvas{display:none}
.nscoesn-showpiece.is-fallback .nscoesn-showpiece__fallback{display:block}

@media (prefers-reduced-motion: reduce){
  /* engine already holds a calm pose; nothing extra needed here */
}

/* Maple Shield sequence: a tall scroll section with a pinned full-viewport stage.
   Scrolling through it drives the emerge -> fly-in -> lattice sequence. A deep
   heraldic backdrop sits behind the transparent canvas so the gold energy net
   reads with contrast, whatever the surrounding page colour. */
.nscoesn-mapleseq{width:100vw;margin-left:calc(50% - 50vw);position:relative;z-index:0}
.nscoesn-mapleseq__stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 42%, #201d17 0%, var(--color-sable,#1A1A1A) 46%, #0b0a08 100%);
}
.nscoesn-mapleseq .nscoesn-showpiece__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nscoesn-mapleseq.is-fallback .nscoesn-showpiece__stage,
.nscoesn-mapleseq.is-fallback .nscoesn-mapleseq__stage{background:none}
.nscoesn-mapleseq.is-fallback .nscoesn-showpiece__canvas{display:none}
.nscoesn-mapleseq.is-fallback .nscoesn-showpiece__fallback{display:block}

/* Backdrop mode: the same lattice, held as a faint fixed layer BEHIND the page.
   The stage leaves the flow (position:fixed) so the element collapses and the
   page text starts at the top; a dimming scrim and lowered canvas opacity knock
   the gold net back to a whisper so the foreground text stays fully readable.
   z-index:-1 keeps it above the page background but below the in-flow body text;
   the opaque page hero, sections, and footer (z-index:6) sit over it, so the
   lattice reads only through the transparent body. */
.nscoesn-mapleseq--backdrop{position:static;width:auto;margin:0;height:auto}
.nscoesn-mapleseq--backdrop .nscoesn-mapleseq__stage{
  position:fixed;inset:0;height:100vh;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, #1a1712 0%, var(--bg,#141210) 58%, var(--bg-deep,#0b0a08) 100%);
}
.nscoesn-mapleseq--backdrop .nscoesn-showpiece__canvas{opacity:var(--maple-canvas-op,.34)}
.nscoesn-mapleseq--backdrop .nscoesn-showpiece__fallback{opacity:.06}
/* wash of the page colour, heavier toward the edges, so the net fades under text */
.nscoesn-mapleseq--backdrop .nscoesn-mapleseq__scrim{
  position:absolute;inset:0;pointer-events:none;opacity:var(--maple-scrim-op,1);
  background:
    radial-gradient(120% 92% at 50% 42%, rgba(20,18,16,.30) 0%, rgba(20,18,16,.58) 60%, var(--bg-deep,#0b0a08) 100%);
}
/* Reveal window: an invisible spacer ([nscoesn_maple_reveal]) that the engine reads
   to lift the backdrop toward full brightness while it is in view. */
.nscoesn-mapleseq__reveal{width:100%}
.nscoesn-mapleseq--backdrop.is-fallback .nscoesn-mapleseq__stage{background:none}
.nscoesn-mapleseq--backdrop.is-fallback .nscoesn-showpiece__canvas{display:none}
.nscoesn-mapleseq--backdrop.is-fallback .nscoesn-showpiece__fallback{display:block}

/* Standfirst line at the top of the body in backdrop mode (translatable text). */
.nscoesn-mapleseq__lead{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.4;
  color:var(--color-argent,#F0EDE8);opacity:.92;
  max-width:44ch;margin:0 0 2.2rem;
}
/* Optional call-to-action beside the standfirst. On wide screens the button sits
   next to the line; when space is tight it wraps directly beneath it, so on mobile
   the register button follows immediately after the line rather than only at the
   foot of the page. The label is a real text node, so TranslatePress reaches it. */
.nscoesn-mapleseq__leadrow.has-cta{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:0 0 2.2rem;
}
.nscoesn-mapleseq__leadrow.has-cta .nscoesn-mapleseq__lead{margin:0;flex:1 1 24ch}
.nscoesn-mapleseq__cta{
  flex:0 0 auto;display:inline-block;
  background:var(--color-gules);color:var(--color-argent,#F0EDE8);
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 24px;border-radius:2px;text-decoration:none;
  transition:filter .2s,transform .2s;
}
.nscoesn-mapleseq__cta:hover{filter:brightness(1.12);transform:translateY(-1px)}
.nscoesn-mapleseq__cta:focus-visible{outline:2px solid var(--color-or);outline-offset:3px}
@media (max-width:600px){
  .nscoesn-mapleseq__leadrow.has-cta .nscoesn-mapleseq__lead{flex-basis:100%}
  .nscoesn-mapleseq__cta{width:100%;text-align:center}
}