/* Optional film surface. Scene timing lives in film/cinematic-host.mjs; this file owns
   readable titles and controls only. No layout or animation drives the camera. */
@font-face { font-family: FilmDisplay; src: url('/assets/experience/fonts/display.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: FilmText; src: url('/assets/experience/fonts/text.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
:root { color-scheme: dark; --ink:#f1f6f5; --muted:#bfd0d0; --teal:#6bece1; --void:#05090b; --sans:FilmText,system-ui,sans-serif; --mono:ui-monospace,monospace; }
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { position:fixed; inset:0; background:var(--void); color:var(--ink); font:400 16px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
a { color:var(--teal); text-underline-offset:4px; }
:focus-visible { outline:2px solid var(--teal); outline-offset:5px; }
[hidden] { display:none!important; }
#scene { position:fixed; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .3s ease; touch-action:none; }
#scene.on { opacity:1; }
/* Retained legacy DOM is used by the renderer's lifecycle, never laid out. */
.brand, .business-nav, .flat-mark, .editorial, .telemetry, .scene-caption, .sky-credit, .launch-status, .grain, .arrival-calibration { display:none!important; }
.film-brand { position:fixed; z-index:4; top:max(22px,env(safe-area-inset-top)); left:5vw; display:flex; align-items:center; gap:12px; pointer-events:none; font:600 12px/1 var(--sans); letter-spacing:.2em; text-shadow:0 2px 10px #000; }
.film-brand svg { width:44px; height:44px; }
.scrim { position:fixed; z-index:2; inset:0; pointer-events:none; background:linear-gradient(180deg,#02060990,transparent 18%,transparent 38%,#020609eb); }
.skip-veil { position:fixed; inset:0; background:#020407; opacity:var(--skip-veil,0); z-index:3; pointer-events:none; }
#arrival-hud { position:fixed; z-index:4; inset:0; pointer-events:none; }
.arrival-story { position:absolute; left:6vw; right:6vw; bottom:23%; max-width:min(86vw,1120px); text-align:left; }
.arrival-story > :not(.arrival-sub) { opacity:var(--beat-opacity,1); }
#arrival-phase { display:block; color:var(--teal); font:500 14px/1.5 var(--sans); letter-spacing:.1em; }
#arrival-line { font:500 clamp(52px,6.9vw,112px)/1.02 FilmDisplay,var(--sans); letter-spacing:-.035em; text-wrap:balance; max-width:16ch; margin:15px 0 20px; color:var(--ink); text-shadow:0 2px 18px #0009; }
#arrival-hud[data-tone='promise'] #arrival-line { font-size:clamp(64px,8.4vw,140px); max-width:11ch; }
#arrival-hud[data-tone='invitation'] #arrival-line { max-width:15ch; }
.arrival-sub { color:var(--muted); font:500 12px/1.5 var(--sans); letter-spacing:.1em; }
.arrival-track { position:absolute; left:6vw; right:6vw; bottom:14%; height:2px; background:#bfe9e222; }
.arrival-track span { display:block; height:100%; background:var(--teal); transform:scaleX(0); transform-origin:left; }
.playback { position:fixed; z-index:6; right:5vw; left:5vw; bottom:max(22px,env(safe-area-inset-bottom)); display:flex; gap:12px; align-items:center; justify-content:flex-end; }
.playback button { min-height:48px; padding:10px 16px; border:1px solid #c6e4df40; border-radius:999px; background:#071114e8; color:var(--ink); font:500 15px/1.25 var(--sans); }
.playback button:hover { background:#173c3b; border-color:var(--teal); }
.playback #skip-arrival { margin-right:auto; }
.playback #sound { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.sound .dot { width:6px; height:6px; border:1px solid var(--teal); border-radius:50%; }
.sound[aria-pressed='true'] .dot { background:var(--teal); }
body:not([data-arrival='complete']) #replay { display:none; }
body:not([data-scene='ready']) .playback > :not(#skip-arrival) { display:none; }
#loading-screen { position:fixed; z-index:5; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px; background:#05090b; }
#loading-label { font:500 12px/1.5 var(--sans); letter-spacing:.1em; }
.loading-track { width:200px; height:2px; background:#6bece122; }
.loading-track i { display:block; height:100%; background:var(--teal); transform-origin:left; transform:scaleX(.02); transition:transform .4s ease; }
body[data-scene='ready'] #loading-screen, body[data-scene='fallback'] #loading-screen { display:none; }
.film-fallback { display:none; }
body[data-scene='fallback'] .film-fallback { display:grid; }
.film-fallback { position:fixed; inset:0; z-index:5; place-content:center; padding:30px; text-align:center; background:var(--void); }
.film-fallback h1 { font:500 clamp(38px,6vw,80px)/1.1 FilmDisplay,var(--sans); margin:0 0 18px; }
.film-fallback p { max-width:36ch; margin:0 auto 28px; color:var(--muted); }
.film-fallback a { padding:12px 20px; min-height:48px; justify-self:center; }
dialog { width:min(600px,calc(100vw - 32px)); max-height:80svh; padding:32px; border:1px solid #6bece166; border-radius:16px; color:var(--ink); background:#091618; font:400 16px/1.6 var(--sans); }
dialog::backdrop { background:#02070be8; }
dialog h2 { font:500 28px/1.2 FilmDisplay,var(--sans); max-width:80%; }
#credits-close { position:absolute; top:12px; right:12px; min-width:44px; min-height:44px; background:transparent; border:0; color:var(--ink); font-size:30px; }
@media(max-aspect-ratio:85/100) {
 .film-brand { left:6vw; top:max(18px,env(safe-area-inset-top)); }
 .arrival-story { bottom:24%; }
 #arrival-line { font-size:clamp(42px,11vw,72px); max-width:14ch; }
 #arrival-hud[data-tone='promise'] #arrival-line { font-size:clamp(54px,14vw,90px); }
 #arrival-hud[data-tone='invitation'] #arrival-line { font-size:clamp(40px,10.7vw,68px); max-width:13ch; }
 .arrival-sub { font-size:12px; letter-spacing:.06em; }
 .arrival-track { bottom:16%; }
 .playback { left:4vw; right:4vw; gap:6px; bottom:max(18px,env(safe-area-inset-bottom)); justify-content:space-between; }
 .playback button { padding:10px 12px; font-size:14px; }
 .playback #skip-arrival { margin-right:0; }
 #cinema { display:none; }
}
@media(max-width:360px) { .playback { gap:4px; } .playback button { padding:10px 8px; font-size:12px; } }
@media(max-height:500px) and (min-aspect-ratio:1/1) { .film-brand { top:12px; }.film-brand svg { width:32px; height:32px; }.arrival-story { bottom:27%; }#arrival-line { font-size:36px; margin:6px 0; }#arrival-hud[data-tone='promise'] #arrival-line { font-size:48px; }.arrival-track { bottom:23%; }.playback { bottom:12px; } }
@media(prefers-reduced-motion:reduce) { #scene, .loading-track i { transition:none; } }
html[data-poster] body > :not(#scene) { display:none!important; }
html[data-capture] #scene { transition:none; }

.film-description { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* A directly opened film has an intentional ending; embedded films return to
   their invoking section through the existing host protocol. */
.film-endcard { display:none; position:fixed; z-index:5; left:6vw; bottom:21%; max-width:32rem; }
body[data-arrival='complete'][data-scene='ready'] .film-endcard { display:block; }
.film-endcard p { color:var(--teal); font-size:14px; }
.film-endcard h1 { font:500 clamp(38px,5vw,72px)/1.05 FilmDisplay,var(--sans); letter-spacing:-.04em; margin:12px 0 26px; }
.film-endcard a { display:inline-flex; align-items:center; min-height:48px; margin-right:24px; font-size:15px; }
.film-endcard .film-primary { padding:0 22px; margin-bottom:12px; border-radius:999px; background:var(--teal); color:var(--void); font-weight:600; text-decoration:none; }
.film-endcard .film-primary:hover { background:var(--ink); }
.film-endcard a:focus-visible { outline:2px solid var(--teal); outline-offset:5px; }

/* The scrubber navigates the authored scene clock, not a simulated video. */
.arrival-track { display:none; }
.film-timeline { position:fixed; z-index:6; bottom:max(83px,calc(env(safe-area-inset-bottom) + 64px)); left:5vw; right:5vw; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; color:var(--muted); font:500 12px/1.4 var(--sans); }
.film-timeline label { color:var(--teal); }
.film-timeline output { min-width:92px; text-align:right; font-variant-numeric:tabular-nums; }
#film-seek { --played:0%; appearance:none; -webkit-appearance:none; margin:0; width:100%; height:44px; cursor:pointer; background:transparent; accent-color:var(--teal); }
#film-seek::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(to right,var(--teal) var(--played),#d6eeed55 var(--played)); }
#film-seek::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-5.5px; border:0; border-radius:50%; background:var(--ink); box-shadow:0 0 0 5px #6bece118; }
#film-seek::-moz-range-track { height:3px; background:#d6eeed55; }
#film-seek::-moz-range-progress { height:3px; background:var(--teal); }
#film-seek::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:var(--ink); }
#film-seek:focus-visible,.playback button:focus-visible { outline:2px solid var(--teal); outline-offset:4px; }
#film-seek:disabled { opacity:.35; cursor:default; }
body:not([data-scene='ready']) .film-timeline { display:none; }
@media(max-width:699px) {
 .film-timeline { left:4vw; right:4vw; grid-template-columns:1fr auto; gap:14px; }
 .film-timeline label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .film-timeline output { min-width:92px; font-size:12px; }
}
@media(max-height:500px) and (min-aspect-ratio:1/1) { .film-timeline { bottom:67px; }.arrival-story { bottom:32%; } }

/* Large titles keep a protected reading interval above the native controls. */
@media(max-height:600px) and (max-aspect-ratio:85/100) {
 .arrival-story { bottom:27%; }
 #arrival-line,#arrival-hud[data-tone='invitation'] #arrival-line { font-size:clamp(34px,10.2vw,44px); line-height:1.02; margin:8px 0 12px; }
 #arrival-hud[data-tone='promise'] #arrival-line { font-size:46px; }
 #arrival-phase { font-size:12px; }
}
@media(max-height:500px) and (min-aspect-ratio:1/1) {
 #arrival-hud[data-tone='invitation'] #arrival-line { font-size:36px; max-width:24ch; }
 .arrival-sub { display:none; }
}

/* Static film chapters keep both story beats available without motion. */
.film-still {
  display: none;
}
body[data-film-still] .film-still {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.film-still picture,
.film-still img {
  display: block;
  width: 100%;
  height: 100%;
}
.film-still img {
  object-fit: cover;
}
.film-still .film-still-copy {
  position: absolute;
  inset: 54% 6% auto;
  max-width: 1100px;
}
.film-still h1 {
  margin: 0.25em 0;
  font: inherit;
  font-size: clamp(38px, 6.5vw, 96px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.05em;
  color: #eff7f4;
}
.film-still p {
  color: #8bdbcf;
  font-size: 14px;
  letter-spacing: 0.07em;
}
.film-still nav {
  pointer-events: auto;
  position: absolute;
  top: 24px;
  right: 5%;
  display: flex;
  gap: 8px;
}
.film-still button {
  border: 1px solid #58716b;
  border-radius: 30px;
  background: #06100ee8;
  color: #ebf3ef;
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
}
.film-still button[aria-pressed="true"] {
  color: #00110d;
  background: #9cddd0;
}
.film-still button:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}
body[data-film-still] .arrival-story,
body[data-film-still] .editorial,
body[data-film-still] .film-endcard,
body[data-film-still] .film-timeline {
  visibility: hidden;
}
@media (max-width: 600px) {
  .film-still nav {
    top: 82px;
    left: 6%;
    right: auto;
  }
  .film-still h1 {
    font-size: clamp(38px, 10.5vw, 60px);
    max-width: 11ch;
  }
}

/* A small, usable planning interface shares the film's authored 3D room. */
#film-planner { position:fixed;z-index:5;top:12%;left:50%;transform:translateX(-50%);width:min(620px,88vw);height:43%;color:var(--ink);text-align:center;pointer-events:none; }
#film-planner[hidden] { display:none; }
.planner-kicker { font:500 12px/1.5 var(--sans);letter-spacing:.10em;color:var(--teal); }
.planner-kicker span { display:block;font-size:12px;letter-spacing:.02em;color:var(--muted); }
.planner-options { position:absolute;top:82%;left:0;right:0;display:flex;justify-content:center;gap:8px; }
.planner-options button { min-height:44px;padding:10px 22px;border:1px solid #91cfc555;border-radius:999px;background:#0a1c1ae8;color:var(--ink);font:500 14px var(--sans);cursor:pointer; }
.planner-options button[aria-pressed=true] { background:var(--teal);color:#041513;border-color:var(--teal); }
.planner-options button:focus-visible { outline:2px solid white;outline-offset:4px; }
[data-planner-result] { position:absolute;top:96%;width:100%;font:400 12px/1.5 var(--sans);color:var(--muted); }
@media(max-aspect-ratio:85/100){#film-planner{top:12%;height:35%;}.planner-kicker{letter-spacing:.05em;}.planner-options{top:82%;}[data-planner-result]{top:101%;}}

body:not([data-scene='ready']) #film-planner { display:none; }

/* The cinematic journey keeps typography quiet while the image carries the scale. */
body[data-cinematic] .scrim { background:linear-gradient(180deg,#02060950,transparent 18%,transparent 50%,#020609c9); }
body[data-cinematic] .arrival-story { left:4.2vw;right:4.2vw;bottom:146px;max-width:680px; }
body[data-cinematic] #arrival-line { font-size:clamp(32px,3.9vw,60px);line-height:1.06;max-width:19ch;margin:10px 0 14px; }
body[data-cinematic] #arrival-phase { font-size:12px;letter-spacing:.13em; }
body[data-cinematic] .arrival-sub { font-size:12px;letter-spacing:.06em; }
#cinematic-burst { position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 52% 46%,#f5f7ed,#9de4ec 44%,#315e8c); }
body[data-cinematic] .film-endcard { bottom:158px;max-width:31rem; }
body[data-cinematic] .film-endcard h1 { font-size:clamp(36px,4.6vw,64px); }
body[data-cinematic] .film-endcard p {font-size:12px;letter-spacing:.1em;}
body[data-cinematic] #film-planner {top:90px;right:4.2vw;left:auto;transform:none;width:286px;height:auto;padding:18px;border:1px solid #aacfc63b;border-radius:16px;background:#091b18df;backdrop-filter:blur(18px);text-align:left;}
body[data-cinematic] .planner-kicker {margin:0 0 14px;font-size:12px;}
body[data-cinematic] .planner-options {position:static;justify-content:flex-start;}
body[data-cinematic] .planner-options button, #film-continue {pointer-events:auto;}
body[data-cinematic] [data-planner-result] {position:static;margin:12px 0 0;line-height:1.5;}
#film-continue {margin-top:12px;padding:10px 0;border:0;background:transparent;color:var(--teal);font:500 13px var(--sans);min-height:44px;}
@media(max-width:700px){
 body[data-cinematic] .arrival-story {left:6vw;right:6vw;bottom:155px;}
 body[data-cinematic] #arrival-line {font-size:clamp(30px,8.4vw,44px);max-width:17ch;}
 body[data-cinematic] .arrival-sub {letter-spacing:0;}
 body[data-cinematic] #film-planner {top:80px;right:5vw;width:260px;padding:14px;}
 body[data-cinematic] .film-endcard {bottom:165px;right:6vw;}
 body[data-cinematic] .film-endcard h1 {font-size:40px;}
 body[data-cinematic] .film-endcard a {font-size:14px;margin-right:16px;}
 body[data-cinematic] .playback {gap:5px;}
 body[data-cinematic] .playback button {padding:10px;font-size:13px;}
}
/* Keep the portrait room clear: the two layouts and the paused action share
   one touch-sized row, with the result below instead of a tall floating card. */
@media(max-width:700px) and (max-aspect-ratio:85/100){
 body[data-cinematic] #film-planner {top:max(80px,calc(env(safe-area-inset-top) + 58px));left:5vw;right:5vw;width:auto;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:10px 12px;border-radius:12px;background:#091b18b8;backdrop-filter:blur(12px);}
 body[data-cinematic] #film-planner:not([hidden]) {display:grid;}
 body[data-cinematic] .planner-kicker {grid-column:1/-1;margin:0;font-size:12px;line-height:1.3;letter-spacing:.05em;}
 body[data-cinematic] .planner-kicker span {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 body[data-cinematic] .planner-options {grid-column:1;grid-row:2;gap:6px;min-width:0;}
 body[data-cinematic] .planner-options button {flex:1;min-width:44px;min-height:44px;padding:10px 12px;font-size:13px;line-height:1.2;white-space:nowrap;}
 body[data-cinematic] [data-planner-result] {grid-column:1/-1;grid-row:3;margin:0;min-height:1.4em;font-size:12px;line-height:1.4;}
 body[data-cinematic] #film-continue {grid-column:2;grid-row:2;min-width:44px;min-height:44px;margin:0;padding:10px 4px;font-size:12px;line-height:1.2;white-space:nowrap;}
 body[data-cinematic] .planner-continue-context {display:none;}
}
@media(max-height:520px) and (min-aspect-ratio:1/1){
 body[data-cinematic] .arrival-story {bottom:120px;}
 body[data-cinematic] #arrival-line {font-size:32px;margin:5px 0;}
 body[data-cinematic] .arrival-sub {display:none;}
 body[data-cinematic] #film-planner {top:65px;width:260px;padding:12px;}
 body[data-cinematic] .film-endcard {bottom:115px;}
 body[data-cinematic] .film-endcard h1 {font-size:32px;margin:5px 0 12px;}
}

/* During an embedded homecoming the globe carries the handoff into the site. */
body[data-film-homecoming] .film-brand,body[data-film-homecoming] #arrival-hud,body[data-film-homecoming] .film-endcard {opacity:0!important;transition:opacity .35s ease;pointer-events:none;}
body[data-film-homecoming] .playback,body[data-film-homecoming] .film-timeline {opacity:0;transition:opacity .18s ease;}