/* The Garnet — pre-rendered cinematic hero (unit #1: the forge genesis).
   Replaces the WebGL forge room. Strict CSP: external stylesheet, no inline.
   A tall scroll track with a sticky full-viewport stage; five photoreal frames
   crossfade ore -> cracking -> forming -> igniting -> forged as you scroll. */

.cine { position: relative; height: 380vh; }
.cine__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000; }
.cine__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transform: scale(calc(1.045 * var(--cine-zoom, 1))) translate(var(--tilt-x, 0), var(--tilt-y, 0)); will-change: opacity, transform; }
.cine__frame:first-of-type { opacity: 1; }              /* ore visible before JS runs */

/* cinematic vignette + bottom grade so overlaid copy stays legible */
.cine__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(4,3,8,.5) 100%),
    linear-gradient(180deg, rgba(4,3,8,.42) 0%, transparent 24%, transparent 58%, rgba(4,3,8,.9) 100%); }

.cine__copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: 13vh;
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6vw; }
.cine__eyebrow { font-family: var(--fx-mono, ui-monospace, monospace); font-size: .72rem; letter-spacing: .28em;
  text-transform: uppercase; color: #ffc65a; margin: 0 0 1rem; text-shadow: 0 1px 12px rgba(0,0,0,.75); }
.cine__h1 { font-family: 'Chakra Petch', system-ui, sans-serif; font-weight: 700; line-height: 1.0; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 6.5vw, 5rem); margin: 0; text-wrap: balance; max-width: 18ch;
  text-shadow: 0 4px 40px rgba(0,0,0,.6); color: var(--fx-paper, #f3eef0); }
.cine__h1 .w { display: inline-block; opacity: 0; transform: translateY(26px); }
.cine__stage.awake .cine__h1 .w { opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.cine__lede { margin: 1.1rem 0 1.4rem; font-size: clamp(1rem, 1.8vw, 1.2rem); color: #e6dbe0; max-width: 52ch; line-height: 1.5;
  opacity: 0; transform: translateY(12px); }
.cine__stage.awake .cine__lede { opacity: 1; transform: none; transition: opacity .6s .15s, transform .6s .15s; }
.cine__cta { opacity: 0; }
.cine__stage.awake .cine__cta { opacity: 1; transition: opacity .6s .3s; }

.cine__cue { position: absolute; z-index: 3; bottom: 3vh; left: 50%; transform: translateX(-50%);
  font-family: var(--fx-mono, ui-monospace, monospace); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--fx-muted, #a99ea6); transition: opacity .4s; animation: cine-bob 2.6s ease-in-out infinite; }
@keyframes cine-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }

@media (max-width: 640px) { .cine__copy { bottom: 11vh; padding: 0 5vw; } }

@media (prefers-reduced-motion: reduce) {
  .cine { height: 100vh; }
  .cine__frame { opacity: 0; }
  .cine__frame:last-child { opacity: 1; }
  .cine__cue { display: none; animation: none; }
  .cine__h1 .w, .cine__lede, .cine__cta { opacity: 1; transform: none; transition: none; }
}

/* single-frame rooms + finale beats: shorter scroll track than the forge morph */
.cine--still { height: 180vh; }
@media (max-width: 640px) { .cine--still { height: 150vh; } }

/* dossier #5: first-paint proposition + visible forge CTA */
.cine__standfirst { font-family: var(--fx-mono, ui-monospace, monospace); font-size: .82rem; letter-spacing: .04em; color: var(--fx-paper, #f3eef0); margin: 0 0 1rem; opacity: .92; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
#forge .cine__cta { opacity: 1; }

/* dossier novelty: Vault signature transition — an obsidian iris seals in on the glowing seam as you scroll */
.cine__seal { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 47%, transparent calc(58% - var(--cine-p,0) * 46%), rgba(4,3,8,0.55) calc(74% - var(--cine-p,0) * 42%), rgba(4,3,8,0.94) calc(96% - var(--cine-p,0) * 40%)); }
@media (prefers-reduced-motion: reduce) { .cine__seal { background: radial-gradient(circle at 50% 47%, transparent 58%, rgba(4,3,8,0.55) 74%, rgba(4,3,8,0.9) 96%); } }

/* dossier: forge (hero) headline visible at first paint; kinetic reveal stays for the other sections */
#forge .cine__h1 .w { opacity: 1; transform: none; }

/* ── dossier novelty: the four capability beats (It creates / acts / remembers /
   yours) become a distinct "reel" instead of the room template stamped four more
   times. A different camera language from the vertical room journey: side-anchored
   alternating copy, a filmstrip index, a horizontal pan, and a scroll-driven facet
   light-sweep — all keyed to the now-live --cine-p, static under reduced-motion. ── */
.fx-main { counter-reset: cap; }
.cine--cap { counter-increment: cap; }
/* side-anchored, mid-height copy (rooms are centered at the bottom); beats alternate sides */
.cine--cap .cine__copy { bottom: auto; top: 50%; transform: translateY(-50%);
  align-items: flex-start; text-align: left; left: 0; right: auto; max-width: 48ch; padding: 0 clamp(1.5rem, 8vw, 8rem); }
.cine--cap:nth-of-type(even) .cine__copy { align-items: flex-end; text-align: right; left: auto; right: 0; }
.cine--cap .cine__h1 { max-width: 15ch; font-size: clamp(2.1rem, 5.2vw, 4rem); }
.cine--cap .cine__lede { max-width: 40ch; text-shadow: 0 2px 20px rgba(0,0,0,.7); }
/* filmstrip index — signals a montage/reel, not another room */
.cine--cap .cine__eyebrow::before { content: counter(cap, decimal-leading-zero) " / 04"; margin-right: .9em; opacity: .6; letter-spacing: .2em; }
/* horizontal pan (filmstrip camera) instead of the rooms' vertical ken-burns zoom */
.cine--cap .cine__frame { transform: scale(1.09) translateX(calc((0.5 - var(--cine-p, 0)) * 5%)); }
.cine--cap:nth-of-type(even) .cine__frame { transform: scale(1.09) translateX(calc((var(--cine-p, 0) - 0.5) * 5%)); }
/* directional scrim so the side copy stays legible over the image */
.cine--cap .cine__stage::after {
  background: linear-gradient(90deg, rgba(4,3,8,.74) 0%, rgba(4,3,8,.3) 34%, transparent 62%),
              linear-gradient(180deg, rgba(4,3,8,.4) 0%, transparent 30%, transparent 70%, rgba(4,3,8,.82) 100%); }
.cine--cap:nth-of-type(even) .cine__stage::after {
  background: linear-gradient(270deg, rgba(4,3,8,.74) 0%, rgba(4,3,8,.3) 34%, transparent 62%),
              linear-gradient(180deg, rgba(4,3,8,.4) 0%, transparent 30%, transparent 70%, rgba(4,3,8,.82) 100%); }
/* facet light-sweep — a specular streak crosses the frame as you scroll the beat */
.cine--cap .cine__stage::before { content: ""; position: absolute; inset: -30% -50%; z-index: 1; pointer-events: none;
  background: linear-gradient(112deg, transparent 44%, rgba(255,208,150,.10) 48%, rgba(255,255,255,.18) 50%, rgba(255,208,150,.10) 52%, transparent 56%);
  transform: translateX(calc((var(--cine-p, 0) - .5) * 130%)); mix-blend-mode: screen; will-change: transform; }
/* mobile: no room for side copy — return to centered bottom, keep the sweep + index */
@media (max-width: 640px) {
  .cine--cap .cine__copy, .cine--cap:nth-of-type(even) .cine__copy {
    top: auto; bottom: 12vh; transform: none; align-items: center; text-align: center; left: 0; right: 0; padding: 0 6vw; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .cine--cap .cine__stage::before { display: none; } }

/* dossier a11y+design: a soft radial scrim behind the whole copy cluster (eyebrow,
   headline, standfirst, lede) guarantees contrast on every frame — including the large
   white H1 over the molten core — without the hard "caption band" a per-element chip
   creates. Replaces the earlier frosted chip; the per-element text-shadows stay. */
.cine__copy { isolation: isolate; }
.cine__copy::before { content: ""; position: absolute; z-index: -1; inset: -8% -7%; pointer-events: none;
  background: radial-gradient(74% 80% at 50% 55%, rgba(4,3,8,.62) 0%, rgba(4,3,8,.34) 52%, transparent 80%); }
.cine--cap .cine__copy::before { inset: -14% -12%; }

/* dossier novelty: per-room signature motions (like the Vault's iris-seal) so each
   payoff beat animates, not just ken-burns a poster. Driven by the now-live --cine-p,
   so they scrub with scroll and stay static under reduced-motion (--cine-p never set → 0). */
/* Handover — a warm presentation bloom grows from the crystal: the moment it becomes yours */
#handover .cine__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 44% at 50% 60%, rgba(255,186,96,.34) 0%, transparent 70%);
  opacity: var(--cine-p, 0); mix-blend-mode: screen; }
/* Mesh — the network comes online: a red glow intensifies as the nodes link up */
#mesh .cine__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 60% at 50% 52%, rgba(224,64,74,.26) 0%, transparent 72%);
  opacity: var(--cine-p, 0); mix-blend-mode: screen; }