/* ============================================================
   Digitally Native cinematic motion layer (dn-motion.v1.css)
   Pairs with dn-motion.v1.js (GSAP + ScrollTrigger + Lenis).
   Loaded AFTER the page's inline styles so .hero.cine overrides
   the Diana-recommit block. Versioned filename: *.css is cached
   immutable for 1 year, bump to v2 on change.

   Design contract (2026-07-05 spec): dark cinematic stage hero,
   one pinned scene, six effects (grain, particles, vignette,
   glass, color tints, scroll pacing). All content remains plain
   crawlable HTML; this file only stages it. Reduced motion:
   the JS never boots, and every keyframe below is gated.
   ============================================================ */

/* --- native scroll engine; the sticky nav needs no scaffolding --- */

/* --- When the cine layer boots, GSAP owns entrances; the legacy
       .rv reveal system stands down (elements stay visible). --- */
html.cine-on .rv { opacity:1; transform:none; transition:none; }
html.cine-on .reveal { opacity:1; transform:none; transition:none; }

/* ============================================================
   THE LIGHT STAGE HERO
   White stays the brand register; the cinema comes from the
   full-viewport arrival, the layered teal light, and motion.
   ============================================================ */
.hero.cine {
  position:relative;
  background:
    radial-gradient(1200px 540px at 50% -12%, rgba(0,245,206,.09), rgba(0,245,206,0) 62%),
    radial-gradient(880px 600px at 88% 112%, rgba(0,203,167,.05), rgba(0,203,167,0) 58%),
    #fff;
  overflow:hidden;
}
@media (min-width:768px) {
  /* the opening frame: hero + engine band compose to exactly one viewport,
     with the "Recommended on" band as the bottom border (66px tall) */
  .hero.cine .hero-inner { min-height:calc(100vh - 64px - 66px) !important; padding-top:1.2rem !important; padding-bottom:1.6rem !important; align-content:center; }
  .hero.cine .hero-inner .lead { font-size:.98rem; margin-bottom:1.1rem; }
  .hero.cine .hero-inner .hero-copy .eyebrow { margin-bottom:.7rem; }
  /* a slightly smaller star so the whole cast fits the frame */
  .hero.cine #dianaStage { --orbY:136px; }
  .hero.cine #dianaStage .dw-orb { width:190px !important; height:190px !important; font-size:17px !important; }
  .hero.cine #dianaStage .dw-orbwrap { width:216px !important; height:216px !important; }
  .hero.cine .hero-quiet { margin-top:3rem; }
  .hero.cine .proof { padding-top:.9rem; margin-top:.7rem !important; }
}
.hero.cine .hero-copy { position:relative; z-index:3; }

/* === THE PORTAL ===
   The orb popped on the dark draft because it had a dark field to
   glow against. So the white page keeps a dark circular stage just
   for her: a deep teal-black pool that dissolves into the white,
   with the glow, ring, aurora, grain, and (next pass) the ambient
   Higgsfield clip all living inside it. */
.hero.cine #dianaStage::before {
  top:calc(var(--orbY) + 34px);
  width:min(400px, 80vw); height:min(400px, 80vw);
  background:
    radial-gradient(closest-side, rgba(0,245,206,.13), rgba(0,245,206,.03) 46%, rgba(0,245,206,0) 62%),
    radial-gradient(closest-side, #060F0D 0%, #060F0D 56%, rgba(6,15,13,.95) 66%, rgba(6,15,13,.38) 77%, rgba(6,15,13,0) 88%);
}
/* the copy always reads above the pool's upper fade */
.hero.cine .hero-copy > * { position:relative; z-index:2; }
.hero.cine #dianaStage { z-index:1; }
/* the ring: a lit instrument line against the dark pool */
.hero.cine #dianaStage::after { border-color:rgba(0,245,206,.34); }
/* orb glow boost: she is the light source */
.hero.cine #dianaStage .dw-orb {
  box-shadow:0 0 60px rgba(0,245,206,.4), 0 0 140px rgba(0,245,206,.18);
  border-radius:50%;
}
/* status line sits inside the pool: flip it light */
.hero.cine .dw-status { color:rgba(255,255,255,.6); }
.hero.cine .dw-status.dw-on { color:var(--teal-bright); }
/* keep the pool tucked when the transcript console is open */
.hero.cine #dianaStage:has(.dw-transcript.dw-vis)::before { width:min(400px, 80vw); height:min(400px, 80vw); }

/* Aurora: slow drifting light inside the pool (JS-injected wrapper).
   Selector carries the #id so it outranks the page's `#dianaStage > *`
   position:relative rule; otherwise it falls into the flex flow and
   shoves the orb out of the portal. */
#dianaStage .stage-aurora {
  position:absolute; left:50%; top:calc(var(--orbY) + 34px); transform:translate(-50%,-50%);
  width:min(340px, 70vw); height:min(340px, 70vw);
  border-radius:50%; overflow:hidden; pointer-events:none;
  z-index:0;
  /* iOS Safari refuses to border-radius-clip video without these */
  isolation:isolate;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
  transition:width .65s cubic-bezier(.16,1,.3,1), height .65s cubic-bezier(.16,1,.3,1), opacity .65s ease;
}
#dianaStage:has(.dw-transcript.dw-vis) .stage-aurora { width:min(340px, 68vw); height:min(340px, 68vw); opacity:.6; }
.stage-aurora .ab {
  position:absolute; width:62%; height:62%; border-radius:50%;
  filter:blur(38px); mix-blend-mode:screen; opacity:.36;
}
.stage-aurora .ab1 { background:radial-gradient(circle, rgba(0,245,206,.5), rgba(0,245,206,0) 68%); left:-6%; top:8%; }
.stage-aurora .ab2 { background:radial-gradient(circle, rgba(0,140,255,.28), rgba(0,140,255,0) 66%); right:-8%; bottom:2%; }
.stage-aurora .ab3 { background:radial-gradient(circle, rgba(125,252,233,.32), rgba(125,252,233,0) 64%); left:22%; bottom:-14%; }
@media (prefers-reduced-motion:no-preference) {
  .stage-aurora .ab1 { animation:auOrbitA 17s ease-in-out infinite alternate; }
  .stage-aurora .ab2 { animation:auOrbitB 23s ease-in-out infinite alternate; }
  .stage-aurora .ab3 { animation:auOrbitC 20s ease-in-out infinite alternate; }
}
@keyframes auOrbitA { from { transform:translate(0,0) scale(1); } to { transform:translate(34%,26%) scale(1.25); } }
@keyframes auOrbitB { from { transform:translate(0,0) scale(1.15); } to { transform:translate(-30%,-22%) scale(.9); } }
@keyframes auOrbitC { from { transform:translate(0,0) scale(.95); } to { transform:translate(-18%,-34%) scale(1.3); } }
/* grain inside the portal only */
.stage-aurora::after {
  content:""; position:absolute; inset:-60%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.07; mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:no-preference) {
  .stage-aurora::after { animation:cineGrain .9s steps(3) infinite; }
}
/* the clip slot: the Higgsfield ambient loop drops in here.
   Circle-clipped on the element itself (iOS) and mask-faded at the rim
   so the clip dissolves into the pool instead of showing an edge. */
.stage-aurora .stage-clip {
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  -webkit-mask-image:radial-gradient(closest-side, #000 58%, transparent 94%);
  mask-image:radial-gradient(closest-side, #000 58%, transparent 94%);
}
.stage-aurora .stage-clip video { width:100%; height:100%; object-fit:cover; opacity:.5; border-radius:50%; }

/* (scan-link clearance now handled in the opening-frame block above) */

/* small screens run the 150px orb: scale the whole portal with it */
@media (max-width:680px) {
  .hero.cine #dianaStage::before { top:calc(var(--orbY) + 26px); width:min(330px, 92vw); height:min(330px, 92vw); }
  #dianaStage .stage-aurora { top:calc(var(--orbY) + 26px); width:min(280px, 78vw); height:min(280px, 78vw); }
}

/* Line-mask wrappers the JS injects around the two H1 lines */
.hl-mask { display:block; overflow:hidden; }
.hl-line { display:block; }

/* ============================================================
   SHARED CINEMATIC EFFECTS
   ============================================================ */

/* Film grain: tiled SVG turbulence, stepped drift. Dark scenes only. */
.cine-grain { position:relative; }
.cine-grain::after {
  content:""; position:absolute; inset:-10%; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:no-preference) {
  .cine-grain::after { animation:cineGrain .9s steps(3) infinite; }
}
@keyframes cineGrain {
  0% { transform:translate3d(0,0,0); }
  33% { transform:translate3d(-3%,2%,0); }
  66% { transform:translate3d(2%,-3%,0); }
  100% { transform:translate3d(0,0,0); }
}

/* Vignette: pulls the eye to center on dark scenes. */
.cine-vig::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 42%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%);
}

/* Ambient dust canvas (JS-injected, desktop only) */
.cine-dust { position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Scroll-driven color tint on dark sections (JS drives --tx/--ty/--ta) */
.cine-tint { position:relative; }
.cine-tint::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(720px 460px at var(--tx,70%) var(--ty,20%), rgba(0,245,206,calc(var(--ta,.5) * .09)), rgba(0,245,206,0) 70%);
}
.cine-tint > .wrap { position:relative; z-index:3; }

/* Slot for a generated ambient clip (Higgsfield pass): sits under
   grain + vignette, above the base gradient. Poster-first, muted. */
.cine-video { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cine-video video, .cine-video img { width:100%; height:100%; object-fit:cover; opacity:.4; }

/* ============================================================
   ENGINE MARQUEE (JS restructures the row; no-JS keeps the static list)
   ============================================================ */
.engines.mq-live { flex-wrap:nowrap; overflow:hidden; }
.engines .mq { display:flex; overflow:hidden; flex:1; min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.engines .mq-track { display:flex; align-items:center; gap:1.3rem; padding-right:1.3rem; flex:none; }
@media (prefers-reduced-motion:no-preference) {
  .engines .mq-track { animation:mqScroll 26s linear infinite; }
  .engines .mq:hover .mq-track { animation-play-state:paused; }
}
@keyframes mqScroll { to { transform:translateX(-100%); } }

/* ============================================================
   SCENE STAGING (initial states are set by JS; these are helpers)
   ============================================================ */
.w { display:inline-block; }

/* Manifesto: full-bleed dark scene */
.manifesto.cine-scene { position:relative; overflow:hidden; }
.manifesto.cine-scene .wrap { position:relative; z-index:3; padding-top:7rem; padding-bottom:7rem; }
@media (max-width:680px) { .manifesto.cine-scene .wrap { padding-top:4.2rem; padding-bottom:4.2rem; } }

/* Closing: inherits the stage register */
.section.dark.cine-scene { position:relative; overflow:hidden; }
.section.dark.cine-scene .wrap { position:relative; z-index:3; }

/* Deepened citation dashboard (solid: backdrop blur was costing frames) */
html.cine-on .dash { background:rgba(14,17,22,.96); }

/* ============================================================
   § 00 THE QUESTION: the film frame. One idea per viewport,
   giant type, the scroll runs the projector.
   ============================================================ */
.ask-act { overflow:hidden; }
/* the act owns the full frame on every screen size while pinned */
@media (min-width:768px) {
  .ask-act { min-height:calc(100vh - 64px); display:flex; flex-direction:column; justify-content:center; }
}
/* the kitchen scene plays under the type: subject right, type left */
.ask-act .cine-video video { opacity:.6; }
.ask-act .cine-video::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.82) 38%, rgba(10,10,10,.35) 68%, rgba(10,10,10,.15) 100%),
    linear-gradient(180deg, rgba(10,10,10,.65), rgba(10,10,10,0) 22%, rgba(10,10,10,0) 75%, rgba(10,10,10,.75));
}
@media (min-width:768px) {
  .ask-act .wrap { min-height:calc(100vh - 10rem); display:flex; flex-direction:column; }
  .ask-act .ask-stage { margin:auto 0; }
}
.ask-stage { padding:2.5rem 0 1rem; }
.ask-q {
  font-family:var(--mono); font-weight:500; color:#fff;
  font-size:clamp(1.15rem, 2.5vw, 2.05rem); line-height:1.35; letter-spacing:-.01em;
  max-width:26ch;
}
.ask-q .teal { color:var(--teal-bright); }
.ask-q .caret { color:var(--teal-bright); font-weight:400; }
/* two-shot layout: her question left, the phone answering right */
.ask-stage { display:flex; flex-direction:column; }
.ask-left { display:contents; }
.ask-q { order:1; }
.ask-right { order:2; margin-top:2.2rem; }
.ask-kicker { order:3; }
@media (min-width:900px) {
  .ask-stage { display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
  .ask-left { display:flex; flex-direction:column; justify-content:center; gap:clamp(2.4rem, 6.5vh, 4rem); }
  .ask-right { margin-top:0; }
}

/* the phone: Scene 2 of the ad, rendered live */
.ask-phone {
  width:min(318px, 100%); margin:0 auto;
  border-radius:2.4rem; padding:.8rem;
  background:rgba(16,20,23,.97); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 90px rgba(0,245,206,.07);
}
@media (min-width:900px) { .ask-phone { margin:0 0 0 auto; } }
.ap-screen { background:#0A0E10; border-radius:1.7rem; padding:1.15rem 1.05rem 1.3rem; }
.ap-head {
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); font-weight:700; margin-bottom:.95rem;
}
.ap-head .blip { width:.5em; height:.5em; border-radius:50%; background:var(--teal-bright); }
@media (prefers-reduced-motion:no-preference) { .ap-head .blip { animation:blip 1.8s ease-in-out infinite; } }
.ap-bubble {
  margin-left:2rem; padding:.6rem .8rem; border-radius:.9rem .9rem .2rem .9rem;
  background:rgba(255,255,255,.09); color:rgba(255,255,255,.85);
  font-family:var(--sans); font-size:.84rem; line-height:1.4;
}
.ap-label {
  margin-top:1rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.ap-list { list-style:none; margin:.6rem 0 0; padding:0; counter-reset:ap; }
.ap-row {
  counter-increment:ap; position:relative;
  margin-top:.55rem; padding:.72rem .85rem .72rem 2.1rem;
  border:1px solid rgba(255,255,255,.09); border-radius:.65rem;
  color:rgba(255,255,255,.5); font-family:var(--sans); font-size:.9rem;
}
.ap-row::before {
  content:counter(ap) "."; position:absolute; left:.85rem; top:.78rem;
  font-family:var(--mono); font-size:.7rem; color:rgba(255,255,255,.35);
}
.ap-row.ap-you {
  border-color:var(--teal-bright); background:rgba(0,245,206,.09);
  display:flex; flex-direction:column; gap:.3rem; color:#fff;
}
.ap-you::before { color:var(--teal-bright); }
.ap-you-name {
  font-weight:800; letter-spacing:.02em; color:var(--teal-bright); font-size:1.02rem;
}
.ap-cite {
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(0,245,206,.75);
}

/* scene-tweened button: keep hover transitions, stop the browser from
   re-smoothing every scrubbed opacity step */
#visibility .demo-copy .btn { transition-property:background-color, color, border-color; }

/* Diana's dock stays off the lead form on phones (JS toggles the class) */
html.cine-on .dw-dock { transition:opacity .3s ease; }

/* === LITE TIER (auto-detected weaker phones): stills instead of shimmer === */
html.cine-lite .stage-aurora .ab { animation:none; }
html.cine-lite .cine-grain::after, html.cine-lite .stage-aurora::after { animation:none; }
html.cine-lite .cine-tint::after { display:none; }
html.cine-lite .ap-head .blip, html.cine-lite .scan-live .blip { animation:none; }

/* === MOBILE: the acts play for real (videos + pins), fitted to the frame === */
@media (max-width:767px) {
  .ask-act { min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:center; }
  .ask-stage { padding:.6rem 0 .4rem; }
  .ask-q { font-size:1.12rem; }
  .ask-right { margin-top:1.3rem; }
  .ask-phone { width:min(272px, 88vw); border-radius:1.9rem; padding:.6rem; }
  .ap-screen { border-radius:1.4rem; padding:.85rem .75rem .95rem; }
  .ap-bubble { font-size:.78rem; }
  .ap-label { margin-top:.8rem; }
  .ap-row { margin-top:.45rem; padding:.55rem .7rem .55rem 1.75rem; font-size:.82rem; }
  .ap-row::before { left:.7rem; top:.62rem; }
  .ask-kicker { font-size:clamp(1.5rem, 7vw, 1.95rem); margin-top:1.3rem; }
  #visibility { min-height:calc(100svh - 64px); }
  /* mobile plays a native 9:16 take of the scene; default framing is correct */
  .hero-quiet .dot { display:none; }
  html.dock-hushed .dw-dock { opacity:0; pointer-events:none; }
}
.ask-kicker {
  font-family:var(--sans); font-weight:800; color:#fff;
  font-size:clamp(1.9rem, 4.3vw, 3.4rem); line-height:1.05; letter-spacing:-.025em;
  margin-top:clamp(2rem, 5vh, 3.2rem);
}
.ask-kicker .teal { color:var(--teal-bright); }

/* two dark acts in a row read as one continuous stage */
.ask-act + .section.dark { border-top-color:rgba(255,255,255,.09); }

/* chapters breathe (homepage only; this sheet loads only there) */
@media (min-width:900px) {
  .section { padding:7rem 0; }
  .ask-act { padding:5rem 0; }
}

/* the hero headline carries a film title now; two lines, never three */
.hero.cine .hero-inner h1.display { font-size:clamp(2.1rem, 3.5vw, 3.2rem); margin-bottom:.8rem; }

/* Scene breathing room */
#visibility .demo-grid { align-items:center; }
/* the evidence act owns the full frame while pinned, same as § 00 */
@media (min-width:768px) {
  #visibility { min-height:calc(100vh - 64px); display:flex; flex-direction:column; justify-content:center; }
  #visibility > .wrap { width:100%; }
}

/* Mobile: no full-viewport hero, lighter furniture */
@media (max-width:767px) {
  .cine-vig::before { background:radial-gradient(ellipse 150% 100% at 50% 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,.3) 100%); }
  .cine-grain::after { opacity:.04; }
}