/* base.css — engine layout shared by both skins. Aesthetics live in skin-a/skin-b. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg, #0e0f11); color: var(--ink, #1E1814); }

/* ---- film runway ---------------------------------------------------------- */
#film { position: relative; }
.film__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.film__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.film__grain {
  position: absolute; inset: -8px;
  pointer-events: none;
  z-index: 3;
}
.film__scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--scrim, 0);
}

/* ---- beats (type choreography layer) -------------------------------------- */
.beat {
  position: absolute; inset: 0;
  z-index: 4;
  display: grid;
  pointer-events: none;
  visibility: hidden;
}
.beat.is-live { visibility: visible; }
.beat > * { grid-area: 1 / 1; }

/* ---- loader ---------------------------------------------------------------- */
#loader {
  position: fixed; inset: 0;
  z-index: 10;
  display: grid; place-content: center; gap: 18px;
  text-align: center;
  transition: opacity .6s ease-out, visibility .6s;
}
body.film-ready #loader { opacity: 0; visibility: hidden; }
.loader__line {
  width: min(38vw, 260px); height: 1px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.loader__fill {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--load, 0));
  transition: transform .25s ease-out;
}

/* ---- after-film section ----------------------------------------------------- */
.after { position: relative; z-index: 6; }
.after__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(72px, 14vh, 160px) 24px clamp(48px, 8vh, 96px);
}
.after__body { max-width: 62ch; }

.capture__row { display: flex; flex-wrap: wrap; gap: 10px; }
.capture__input { flex: 1 1 260px; min-width: 0; }
.capture__btn { flex: 0 0 auto; cursor: pointer; }

.colophon {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  flex-wrap: wrap;
}

/* ---- review-only variant picker --------------------------------------------- */
.variants {
  position: fixed; top: 12px; right: 14px;
  z-index: 7;
  display: flex; align-items: baseline; gap: 9px;
  flex-wrap: wrap; justify-content: flex-end; row-gap: 2px;
  max-width: min(72vw, 560px);
  font: 400 10px/1 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(251 247 236 / .85);
  mix-blend-mode: difference;
}
.variants span { opacity: .45; }
.variants .variants__gap { margin-left: 8px; }
.variants a { color: inherit; text-decoration: none; opacity: .55; padding: 6px 0; }
.variants a:hover { opacity: .85; }
.variants a.is-on { opacity: 1; border-bottom: 1px solid currentColor; }

/* ---- reduced motion / static ------------------------------------------------ */
/* Scroll-scrub itself is user-driven and stays; only autonomous motion reduces. */
@media (prefers-reduced-motion: reduce) {
  #loader { transition: none; }
  .loader__fill { transition: none; }
  .film__grain { animation: none !important; }
}

/* ---- small screens ----------------------------------------------------------- */
@media (max-width: 640px) {
  .after__inner { padding-left: 20px; padding-right: 20px; }
}

/* ---- embed mode (?embed=1, hosted in the landing page's iframe) ------------
   The parent owns the runway and the scroll. This document is one fixed
   viewport: no page chrome, no internal scrolling, nothing after the film. */
[data-embed="1"], [data-embed="1"] body {
  height: 100%;
  overflow: hidden;
}
[data-embed="1"] .after,
[data-embed="1"] .variants { display: none; }
[data-embed="1"] .film__stage { position: fixed; inset: 0; height: 100%; }