/* Page layout: nav, hero, the pinned film stage, the sheets after it, the footer. Each scene and sheet adds its
   own CSS file next to its module; this file holds only the frame they live in. */

.skip { position: absolute; left: 16px; top: -48px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #F4F6F3; font-weight: 650; }
.skip:focus { top: 12px; }

/* --- nav --- */
.nav { position: sticky; top: 0; z-index: 100; height: 68px; display: flex; align-items: center; gap: 28px; padding: 0 max(24px, calc((100vw - 1240px) / 2));
  background: rgba(244, 246, 243, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.nav.stuck { border-bottom-color: var(--whisker, #DDE2DC); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--f-ui); letter-spacing: -0.02em; text-decoration: none; }
.brand-face { width: 28px; height: 28px; }
.nav nav { display: flex; gap: 24px; margin-left: auto; }
.nav nav a { font: 550 15px/1 var(--f-ui); text-decoration: none; color: var(--ink-2); }
.nav nav a:hover { color: var(--ink); }
/* Over the film's dark end card the nav turns Ink too. */
body.film-dark.in-film .nav { background: rgba(18, 20, 22, 0.88); color: #EEF1EC; }
body.film-dark.in-film .nav nav a { color: rgba(238, 241, 236, 0.72); }
body.film-dark.in-film .nav nav a:hover, body.film-dark.in-film .brand { color: #EEF1EC; }
body.film-dark.in-film .nav .nav-dl { background: #EEF1EC; color: #15171A; }
body.film-dark.in-film .nav.stuck { border-bottom-color: rgba(238, 241, 236, 0.1); }
.nav-dl { --h: 42px; padding: 0 18px; font-size: 15px; }

/* --- hero --- */
.hero { position: relative; }
/* The hero's content box. The film starts 6 % above the fold (brief H). The film (f0.js) adds .rise to the section:
   the pin then stays put while the laptop rises over it and the camera zooms into its screen (until 100svh + 600px). */
.hero-pin { position: relative; min-height: calc(94svh - 68px); display: grid; place-items: start center; padding: min(8vh, 76px) 24px 210px; overflow: hidden; }
.hero.rise { height: calc(94svh - 68px + 100svh + 600px); margin-bottom: calc(-100svh - 600px); }
.hero.rise .hero-pin { position: sticky; top: 68px; transform-origin: 50% 30%; }
@media (prefers-reduced-motion: no-preference) { .hero-h:not([data-split]), .hero-sub:not([data-split]) { animation: hero-wait 0s 2.5s both; } }
@keyframes hero-wait { from { opacity: 0; } to { opacity: 1; } }
.hero-orbit { position: absolute; inset: 0; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; text-align: center; max-width: 900px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--site-bg); font: 600 14px/1 var(--f-ui); }
.eb-a { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.eb-a img { width: 16px; height: 16px; flex: none; }
.hero-h { font-size: clamp(46px, 6.4vw, 92px); }
.hero-sub { font: 450 19px/1.5 var(--f-ui); color: var(--ink-2); margin: 26px auto 0; max-width: 58ch; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.fine { margin: 14px 0 0; font: 500 14px/1 var(--f-ui); color: var(--ink-3); }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 600 13px/1 var(--f-ui); color: var(--ink-3); text-decoration: none; }
.scroll-cue i { width: 1.5px; height: 28px; background: linear-gradient(var(--ink-3), transparent); animation: cue 2s var(--e-glide) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* --- the film --- */
.film { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage-bg { position: absolute; inset: 0; }
.stage.dark .stage-bg { background-color: #121416; background-image: linear-gradient(rgba(238,241,236,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(238,241,236,0.04) 1px, transparent 1px); }
.frame { position: absolute; left: 0; top: 0; perspective: 1400px; }
.world, .hud { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.world { transform-style: preserve-3d; will-change: transform; }
.hud { pointer-events: none; }
.hud .hud-copy { position: absolute; left: 120px; top: 300px; width: 520px; }
.scene { position: absolute; inset: 0; }
.rail { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 70; }
.rail button { width: 12px; height: 12px; padding: 0; border: 1.5px solid var(--mint-ink); background: transparent; transform: rotate(45deg); border-radius: 2px; cursor: pointer; transition: transform 200ms var(--e-pop), background 200ms; }
.rail button.passed { background: var(--mint-ink); }
.rail button.now { transform: rotate(45deg) scale(1.45); }
.rail button span { position: absolute; left: 22px; top: -4px; transform: rotate(-45deg); transform-origin: 0 0; white-space: nowrap; opacity: 0; pointer-events: none;
  font: 600 12px/1 var(--f-ui); padding: 5px 8px; border-radius: 6px; background: var(--ink); color: #F4F6F3; transition: opacity 150ms; }
.rail button:hover span, .rail button:focus-visible span { opacity: 1; }
@media (max-width: 1099px) { .rail { display: none; } }

/* --- sheets after the film (Wispr's stacked sheets) --- */
.sheet { position: relative; border-radius: 40px 40px 0 0; margin-top: -40px; padding: 120px max(24px, calc((100vw - 1240px) / 2)) 140px; box-shadow: 0 -20px 40px -20px rgba(21, 23, 26, 0.18); }
.sheet-milk { background: var(--site-bg); }
.sheet-ink { background: #121416; color: #EEF1EC; }
.sheet-mint { background: #08725F; color: #EEF1EC; }
.closing { position: relative; padding: 0 0 0; }
.footer { position: relative; background: var(--site-bg); padding: 80px max(24px, calc((100vw - 1240px) / 2)) 40px; }

/* --- phones and reduced motion: chapters instead of the film (body.chapters, set by main.js) --- */
body.chapters .stage { position: relative; height: auto; overflow: visible; }
body.chapters .rail { display: none; }

@media (max-width: 700px) {
  .nav { height: 60px; gap: 12px; }
  .nav nav { display: none; }
  .nav-dl { margin-left: auto; }
  .hero-pin { padding-top: 6vh; padding-bottom: 180px; min-height: calc(94svh - 60px); }
  .eyebrow { height: auto; min-height: 36px; padding: 6px 14px; flex-wrap: wrap; justify-content: center; row-gap: 2px; line-height: 1.3; }
  .hero-sub { font-size: 17px; }
  .sheet { border-radius: 24px 24px 0 0; margin-top: -24px; padding: 80px 20px 100px; }
}

/* --- the film as a video: locked page, Pause / Skip while playing, "Scroll to continue" at the end --- */
html.film-lock, html.film-lock body { overflow: hidden; overscroll-behavior: none; }
.film-ctl { position: absolute; right: 20px; bottom: 20px; z-index: 90; display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 300ms; }
body[data-film="playing"] .film-ctl { opacity: 1; pointer-events: auto; }
.film-btn { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(21, 23, 26, 0.14); background: rgba(244, 246, 243, 0.86);
  backdrop-filter: blur(8px); color: var(--ink); font: 600 14px/1 var(--f-ui); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.film-btn:hover { background: #fff; }
.film-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.film-paused .film-btn svg path { fill: currentColor; }
.stage.dark .film-btn { background: rgba(28, 31, 34, 0.86); color: #EEF1EC; border-color: rgba(238, 241, 236, 0.16); }
.film-end { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity 500ms 300ms; }
body[data-film="ended"] .film-end { opacity: 1; pointer-events: auto; }
.film-more { margin: 0; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 var(--f-ui); color: #A7ADA8; }
.film-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; animation: more-bob 1.6s ease-in-out infinite; }
@keyframes more-bob { 50% { transform: translateY(4px); } }
.film-again { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: #EEF1EC; font: 600 14px/1 var(--f-ui); cursor: pointer; opacity: 0.8; text-decoration: underline; text-underline-offset: 4px; }
.film-again:hover { opacity: 1; }
.film-again svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body:not([data-film="idle"]) .rail { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .film-more svg { animation: none; } }

/* --- portrait (phones, upright tablets): the world in a window across the top, the words large underneath --- */
body.portrait .rail { display: none; }
body.portrait .hud .hud-copy { left: calc(var(--panx) + 34px) !important; top: 922px !important; width: calc(var(--vw) - 68px) !important; right: auto !important; }
body.portrait .hud .film-h { font-size: 66px; line-height: 1.02; }
body.portrait .hud .caption { font-size: 27px; max-width: none; margin-top: 16px; }
body.portrait .keys { left: calc(var(--panx) - 86px); }
body.portrait .film-ctl { right: 12px; bottom: 12px; }
body.portrait .film-btn { height: 36px; padding: 0 13px; font-size: 13px; }
body.portrait .film-end { bottom: 5svh; }
/* The words get their own calm panel under the window: anything the camera pushes past the window's bottom edge
   slides under it instead of over the headline. */
body.portrait .hud::before { content: ''; position: absolute; left: 0; right: 0; top: 896px; bottom: 0;
  background: linear-gradient(to bottom, rgba(244, 246, 243, 0), var(--site-bg, #F4F6F3) 26px); }
body.portrait .hud.dark-scene::before { background: linear-gradient(to bottom, rgba(18, 20, 22, 0), #121416 26px); }