/* Home stage: the real-time three.js scene behind the hero and the reel (/assets/hero3d.js).
   Base layout for .stage3d, its static fallback and the reel lives in site.css. Everything
   here only applies once the scene has drawn its first frame and hero3d.js has set
   html.hero3d-on; without it (no JS, no WebGL, software rendering, lost context) the page
   keeps the static SVG elevation and the multiply-blend knockout words. */

/* ---------- the fixed layer: one canvas for the hero and all five chapters ---------- */
.hero3d {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none; overflow: hidden; contain: strict;
}
.hero3d[data-off] { visibility: hidden; }
.hero3d canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }
html.hero3d-on .hero3d canvas { opacity: 1; }
/* site.css hides the stage canvas when Motion is off; the scene stays, as still frames. */
html[data-motion="off"] .stage3d .hero3d canvas { display: block; }
/* lens vignette, in CSS so it costs no GPU pass */
.hero3d::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 95% at 58% 42%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .5) 100%);
}

/* ---------- hero: fade the drawing out, keep the type legible over the scene ---------- */
.stage3d-fallback { transition: opacity .9s ease; }
html.hero3d-on .stage3d-fallback { opacity: 0; }
html.hero3d-on .stage3d .rings { opacity: .14; transition: opacity .9s ease; }
/* Scrim: dark at the top (the header is transparent over the hero), behind the type block and
   along the bottom, so every line of hero copy keeps WCAG AA contrast over the scene. */
html.hero3d-on .hero .stage3d::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 6, 5, .8) 0%, rgba(5, 6, 5, .42) 13%, rgba(5, 6, 5, 0) 30%),
    radial-gradient(70% 52% at 24% 46%, rgba(5, 6, 5, .62) 0%, rgba(5, 6, 5, .3) 50%, rgba(5, 6, 5, 0) 78%),
    linear-gradient(0deg, rgba(5, 6, 5, .94) 0%, rgba(5, 6, 5, .74) 26%, rgba(5, 6, 5, .28) 52%, rgba(5, 6, 5, 0) 70%),
    linear-gradient(90deg, rgba(5, 6, 5, .62) 0%, rgba(5, 6, 5, .2) 42%, rgba(5, 6, 5, 0) 62%);
}
@media (max-width: 760px) {
  /* Phones: the scene owns the top band; everything from the kicker down sits on a deep scrim. */
  html.hero3d-on .hero .stage3d::after {
    background:
      linear-gradient(180deg, rgba(5, 6, 5, .82) 0%, rgba(5, 6, 5, .6) 11%, rgba(5, 6, 5, 0) 19%),
      linear-gradient(0deg, rgba(5, 6, 5, .95) 0%, rgba(5, 6, 5, .9) 50%, rgba(5, 6, 5, .8) 68%, rgba(5, 6, 5, .5) 76%, rgba(5, 6, 5, 0) 84%);
  }
  html.hero3d-on .chapter-copy .shade-bg {
    background: linear-gradient(0deg, rgba(5, 6, 5, .94) 0%, rgba(5, 6, 5, .9) 55%, rgba(5, 6, 5, .72) 75%, rgba(5, 6, 5, 0) 100%);
  }
}
html.hero3d-on .hero .kicker { color: var(--chalk-2); }
.stage3d-note {
  position: absolute; z-index: 2; right: var(--gut); top: calc(var(--chrome-h) + 14px); margin: 0;
  font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-2);
  opacity: 0; transition: opacity .9s ease;
}
html.hero3d-on .stage3d-note { opacity: 1; }
@media (max-width: 760px) { .stage3d-note { left: var(--gut); right: auto; top: calc(var(--chrome-h) + 2px); font-size: 9px; letter-spacing: .06em; } }

/* ---------- reel: the chapters go transparent and the word is cut out of a dark panel ---------- */
html.hero3d-on .reel { background: transparent; }
html.hero3d-on .chapter-stage .rings { opacity: .1; }
.knock-cut { display: none; }
html.hero3d-on .knock { background: transparent; mix-blend-mode: normal; }
html.hero3d-on .knock > span { display: none; }
html.hero3d-on .knock-cut {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transform: scale(calc(1 + var(--r, 0) * 5)); transform-origin: 50% 55%; will-change: transform;
}
.knock-cut text { font: 900 clamp(8rem, 34vw, 38rem)/1 var(--display); font-stretch: 125%; letter-spacing: -.05em; }
/* Phones: same word size and growth cap as the span version in site.css. */
@media (max-width: 860px) {
  .knock-cut text { font-size: clamp(5rem, 21vw, 12rem); }
  html.hero3d-on .knock-cut { transform: scale(calc(1 + var(--r, 0) * 1.4)); }
}

/* The CLEAR chapter's caption for the red envelope, and its label over the canvas. */
.scene-key, .scene-tag { display: none; }
html.hero3d-on .scene-key {
  display: block; max-width: 52ch; margin: -.2em 0 1.2em; padding-left: 12px; border-left: 2px solid var(--zone-over);
  font: 500 12px/1.55 var(--mono); color: var(--chalk-2);
}
html.hero3d-on .hero3d .scene-tag {
  display: block; position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(70, 10, 6, .82); border: 1px solid #ec3b2e; padding: 6px 9px; z-index: 2;
  opacity: 0; transition: opacity .35s ease; will-change: transform, opacity;
}
html.hero3d-on .hero3d .scene-tag::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px; background: #ec3b2e;
}

@media (prefers-reduced-motion: reduce) {
  .hero3d canvas, .stage3d-fallback, .stage3d-note, .hero3d .scene-tag { transition: none; }
}
html[data-motion="off"] .hero3d canvas, html[data-motion="off"] .stage3d-fallback,
html[data-motion="off"] .stage3d-note, html[data-motion="off"] .hero3d .scene-tag { transition: none; }

@media print { .hero3d, .knock-cut, .scene-tag, .stage3d-note { display: none !important; } }