/*
 * Dwellers scroll engine: base styles shared by all three versions.
 * Sites copy this into assets/css and override tokens. Only transform and opacity animate.
 * The five static-hero gates below MUST match GATES in scrub-core.js character for character.
 */
html, body { overflow-x: hidden; overflow-x: clip; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- hero structure ---------- */
.hero { position: relative; height: var(--hero-h, 800vh); }
.hero .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--stage-bg, #222); }
.hero .poster { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease, ease); will-change: transform; transform: translateZ(0); }
.hero .stage.video-ready video { opacity: 1; }
.hero .stage.video-failed video { display: none; }
.hero .scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,10,18,0) 35%, rgba(10,10,18,var(--scrim-edge,.55)) 100%); }

/* ---------- loading ring ---------- */
.ring { position: absolute; left: 50%; bottom: 34px; width: 48px; height: 48px; margin-left: -24px; color: var(--ring, rgba(255,255,255,.85)); transition: opacity .6s var(--ease, ease); }
.ring circle { transition: stroke-dashoffset .12s linear; }
.stage.video-ready .ring, .ring.ring-done { opacity: 0; pointer-events: none; }

/* ---------- caption bands ---------- */
.band { position: absolute; z-index: 2; opacity: 0; visibility: hidden; text-shadow: var(--tshadow, 0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8)); }
.band:first-of-type { opacity: 1; visibility: visible; }
.band .btn { text-shadow: none; }
.band::before { content: ""; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none; opacity: calc(.25 + .75 * var(--k, 1)); background: radial-gradient(ellipse 74% 62% at 50% 50%, rgba(5,5,10,var(--band-a,.62)) 0%, rgba(5,5,10,calc(var(--band-a,.62) * .66)) 46%, rgba(5,5,10,0) 76%); }
.band.no-scrim::before { display: none; }
.chip { background: rgba(8,8,15,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: 0 1px 3px rgba(5,5,10,.85); }

/* split text: every effect is driven by the band's --k (0..1) */
.split { display: inline; }
.split .w { display: inline-block; white-space: nowrap; }
.split .c { display: inline-block; will-change: transform, opacity; }
/* (a) scatter and (b) grid and (i) weave share the per-character recipe */
[data-fx="scatter"] .c, [data-fx="grid"] .c, [data-fx="weave"] .c {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1);
  opacity: var(--kc);
  transform: translate(calc((1 - var(--kc)) * var(--jx, 0px)), calc((1 - var(--kc)) * var(--jy, 0px))) rotate(calc((1 - var(--kc)) * var(--jr, 0deg)));
}
[data-fx="grid"] .c, [data-fx="weave"] .c { transform: translate(calc((1 - var(--kc)) * var(--jx, 0px)), calc((1 - var(--kc)) * var(--jy, 0px))); }
/* (d) word punch with overshoot */
[data-fx="punch"] .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1);
  --ks: clamp(0, (var(--k, 0) - var(--th, 0) - var(--sd, .1)) * var(--ss, 3.2), 1);
  opacity: var(--kc);
  transform: scale(calc(0.6 + (0.4 + var(--ov, .12)) * var(--kc) - var(--ov, .12) * var(--ks)));
}
[data-fx="punch"] .w.em { --ov: .24; --sd: .16; --ss: 2.6; }
/* (e) word rise into a staged settle */
[data-fx="rise"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.4, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 30px)); }
/* (f) drift down */
[data-fx="drift"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * -24px)); }
/* (g) approach from depth (whole line) */
[data-fx="approach"] .split { display: inline-block; --kc: clamp(0, var(--k, 0) * 1.6, 1); opacity: var(--kc); transform: scale(calc(.82 + .18 * var(--kc))); transform-origin: 50% 60%; }
/* (h) halves parting */
[data-fx="halves"] .w { --kc: clamp(0, var(--k, 0) * 1.8, 1); opacity: var(--kc); transform: translateX(calc((1 - var(--kc)) * var(--hx, 0px) * -1)); }
/* staged settle for subline and CTA row inside a band */
.band .sub { --ks: clamp(0, (var(--k, 0) - .62) * 4, 1); opacity: var(--ks); transform: translateY(calc((1 - var(--ks)) * 14px)); }
.band .cta-row { --kb: clamp(0, (var(--k, 0) - .78) * 5, 1); opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 12px)); }

/* ---------- static hero (the five gates) ---------- */
.hero .static { display: none; }
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero .stage { position: relative; height: auto; min-height: 100svh; }
  .hero video, .hero .ring, .hero .band, .hero .hud { display: none !important; }
  .hero .static { display: flex; }
  .hero video.phone-film { display: block !important; }
}
/* the phone film (DW.phoneFilm): fades in over the static poster once it really plays */
.hero video.phone-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease, ease); pointer-events: none; }
.hero video.phone-film.playing { opacity: 1; }
.hero video.phone-film:not(.playing) { opacity: 0; } /* beats .stage.video-ready video after a resize from desktop */
html:not(.static-hero) .hero video.phone-film { display: none !important; }
@media (max-height: 560px) { .hero .hud, .hero .cue { display: none; } }

/* ---------- entrances ---------- */
.rise .part { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease, ease) calc(var(--i, 0) * 90ms), transform .9s var(--ease-out, ease-out) calc(var(--i, 0) * 90ms); }
.rise.in .part { opacity: 1; transform: none; }
.rise.done .part, .rise.done .part:nth-child(n) { transition-delay: 0s !important; }

/* living loops only run on screen; everything pauses on hidden tabs */
.living:not(.on), .living:not(.on) *, .living:not(.on) *::before, .living:not(.on) *::after { animation-play-state: paused !important; }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* self-drawing svg strokes */
.draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 1.6s var(--ease-out, ease-out) var(--delay, 0s); }
.in .draw, .drawn .draw { stroke-dashoffset: 0; }

/* ---------- reduced motion: final states, no transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero video.phone-film { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; transition-delay: 0s !important; }
  .rise .part { opacity: 1; transform: none; }
  .draw { stroke-dashoffset: 0; }
}