/* Film chrome: layers, header, kinetic caption, scene bar. Built from vendored JUWEL classes (.pf-header, .pf-brand,
   .pf-btn, .jb-seg); this file only places them. Chapter styles live in ch-*.css. Motion on UI is transform + opacity. */
#world3d { position: fixed; inset: 0; z-index: 3; transition: opacity .7s ease; }
#world3d.gone, #world3d:empty { opacity: 0; pointer-events: none; }
#world3d canvas { display: block; width: 100%; height: 100%; }
/* 2D camera: every layer the characters live in moves together (the zoom-through between scenes) */
#cam { position: fixed; inset: 0; z-index: 2; transform-origin: 0 0; will-change: transform, filter, opacity; }
#stage { position: fixed; inset: 0; z-index: 1; }
#stage > * { pointer-events: auto; }
canvas#tiles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* header: the product's own header (.pf-header: no card, no glass). Brand name left, actions right. */
.chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 8; padding: var(--jb-s-8) var(--pf-gutter); pointer-events: none; }
.chrome > * { pointer-events: auto; }
.chrome .pf-header__spacer { pointer-events: none; }
.chrome .pf-header__actions { flex-wrap: nowrap; }
.chrome #calmBtn { gap: var(--jb-s-4); }
/* over the lilac sky the quiet links use the full ink (the secondary ink is 4.2:1 on the sky's darkest stop) */
.chrome .pf-btn--quiet { color: var(--jb-ink); }
.chrome .pf-brand__name { white-space: nowrap; }
/* scene done: one nudge on Continue */
.scenes #continueBtn.pulse { animation: pf-nudge .6s var(--jb-ease-arrive) 1; }
@keyframes pf-nudge { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .scenes #continueBtn.pulse { animation: none; } }
#stage:focus { outline: none; }
/* over the 3D cold open's near-black veil (director.js sets html[data-veil] for its first second) the name and quiet links use the light token ink */
:root[data-veil="dark"] .chrome .pf-brand, :root[data-veil="dark"] .chrome .pf-btn--quiet { color: var(--jb-paper); }
@media (max-width: 600px) { .chrome .nav-depth { display: none; } }
@media (max-width: 400px) { .chrome .pf-brand__name { white-space: normal; } }   /* the name wraps before the Hire button clips */
@media (max-width: 480px) { .chrome .lbl-long { display: none; } }

/* kinetic headline: words rise, one after another (transform + opacity only, no blur) */
.caption { position: fixed; left: var(--pf-gutter); top: calc(var(--pf-header-h) + var(--jb-s-16) + var(--jb-s-8)); z-index: 7;
  max-width: min(620px, calc(100vw - 2 * var(--pf-gutter))); pointer-events: none; }
.caption h2 { margin: 0; font: var(--jb-type-display); color: var(--jb-ink); text-wrap: balance; }
.caption h2:empty { display: none; }
.caption p { margin: var(--jb-s-8) 0 0; font: var(--jb-type-body); color: var(--jb-ink); text-wrap: balance; text-wrap: pretty; }
.caption .w { display: inline-block; opacity: 0; transform: translateY(.45em);
  transition: opacity var(--jb-fade-slow-dur) var(--jb-fade-slow), transform var(--jb-arrive-dur) var(--jb-ease-arrive); }
.caption.on .w { opacity: 1; transform: none; }
.caption.off .w { opacity: 0; transform: translateY(-.3em); transition-duration: .3s; }

/* scene bar: the product's segmented control + a real primary button. The visitor sets the pace. */
.scenes { position: fixed; inset-inline: 0; bottom: calc(var(--jb-s-16) + env(safe-area-inset-bottom)); z-index: 9; display: flex;
  justify-content: center; align-items: center; gap: var(--jb-s-8); padding-inline: var(--jb-s-16); pointer-events: none; }
.scenes > * { pointer-events: auto; }
.scenes .pf-btn { min-block-size: var(--jb-target); }
@media (max-width: 480px) {
  .scenes { gap: var(--jb-s-4); padding-inline: var(--jb-s-8); }
  .scenes .jb-seg { flex-wrap: nowrap; gap: 2px; padding: 2px; flex: 0 1 auto; min-inline-size: 0; }
  .scenes .jb-seg__opt { min-inline-size: 0; padding-inline: 7px; font-size: 13px; white-space: nowrap; }
  .scenes #continueBtn { flex: 0 0 auto; padding-inline: var(--jb-s-8); gap: 2px; }
}
@media (max-width: 360px) { .scenes .jb-seg__opt { padding-inline: 5px; font-size: 12px; } }

/* Pause motion: every CSS animation stops; the director also stops the world clock (characters, crew, ambient field,
   tiles) and the 3D scene. Word rises land at once. */
:root[data-calm="true"] *, :root[data-calm="true"] *::before, :root[data-calm="true"] *::after { animation-play-state: paused !important; }
:root[data-calm="true"] .caption .w { transition: none; }