@font-face {
  font-family: 'Oxanium';
  src: url('/assets/fonts/Oxanium-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

/* The films are graded to this near-black navy, so the page and the film's edges are one surface. */
:root { color-scheme: dark; --ground: #000412; --pearl: #f5f8ff; --muted: #9fb2cf; --ice: #9ddfff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--pearl); }
body { font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.stage {
  min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* The whole composition always shows: the tall H is never cropped or stretched. */
.film { position: relative; min-height: 0; }
.film > .still img, .intro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro { opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.js.playing .intro, .js.ended .intro { opacity: 1; }
.js.playing .still, .js.ended .still { visibility: hidden; }

.copy { text-align: center; padding: 8px 24px 40px; max-width: 640px; margin: 0 auto; }
.tagline { margin: 0; font: 600 clamp(20px, 2.4vw, 28px)/1.2 'Oxanium', sans-serif; letter-spacing: 0.04em; }
.sub { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
/* Revealed as the film resolves; without JavaScript it is simply there. */
.js .copy { opacity: 0; transform: translateY(6px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js.ended .copy, .js.still .copy { opacity: 1; transform: none; }

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

@media (prefers-reduced-motion: reduce) {
  .js .copy, .intro { transition: none; }
}