:root {
  --base: #080808;
  --ink: #F2EFE7;
  --pad-x: clamp(18px, 5vw, 64px);
  --pad-y: clamp(18px, 3svh, 34px);
  --ticker-h: clamp(68px, 10svh, 92px);
  --ease: cubic-bezier(.2,.7,.15,1);
}

* { box-sizing: border-box; }
html { background: var(--base); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--base);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  min-height: 100svh;
  overflow: hidden;
  background: var(--base);
  color: var(--ink);
  transition: color 560ms var(--ease), background-color 560ms var(--ease);
}

/* Two full-screen colour fields crossfade as the page moves through states.
   The palette is deliberately cinematic rather than decorative: each field
   belongs to a genre / story / thematic family in script.js. */
.field {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: #080808;
  background-size: 100% 100%;
  background-position: center;
  transition: opacity 760ms var(--ease);
  will-change: opacity;
}
.field.is-visible { opacity: 1; }

.hero {
  position: absolute;
  z-index: 2;
  inset: 0 0 var(--ticker-h);
  display: grid;
  place-items: center;
  padding:
    max(var(--pad-y), env(safe-area-inset-top))
    var(--pad-x)
    var(--pad-y);
}

.mark {
  width: min(70vw, 360px);
  max-height: calc(100svh - var(--ticker-h) - 42px);
  aspect-ratio: 491 / 985;
  background: var(--ink);
  -webkit-mask: url("assets/shoot-me-next-mark.png") center / contain no-repeat;
  mask: url("assets/shoot-me-next-mark.png") center / contain no-repeat;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.08));
  transition: background-color 560ms var(--ease), filter 560ms var(--ease);
}

.stage.is-dark-ink .mark {
  filter: drop-shadow(0 5px 7px rgba(255,255,255,.08));
}

.ticker {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: var(--ticker-h);
  padding:
    0 var(--pad-x)
    calc(max(var(--pad-y), env(safe-area-inset-bottom)) - 3px);
  color: var(--ink);
}

.ticker__rule {
  height: 1px;
  margin-bottom: 13px;
  background: currentColor;
  opacity: .78;
}

.ticker__window {
  min-height: 2.35em;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.ticker__copy {
  margin: 0;
  max-width: 1200px;
  font-size: clamp(12px, 3.45vw, 16px);
  line-height: 1.16;
  font-weight: 650;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-wrap: balance;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 150ms ease, transform 190ms var(--ease), color 560ms var(--ease);
}

.ticker__copy.is-long {
  font-size: clamp(10.5px, 3.0vw, 14.5px);
  letter-spacing: .085em;
}

.ticker__copy.is-very-long {
  font-size: clamp(9.5px, 2.65vw, 13.5px);
  letter-spacing: .065em;
}

.ticker__copy.is-changing {
  opacity: 0;
  transform: translateY(9px);
}

.scroll-states {
  position: relative;
  z-index: 1;
}

.state { min-height: 58svh; }
.state:first-child,
.state:last-child { min-height: 100svh; }

@media (min-width: 720px) {
  :root { --ticker-h: 72px; }
  .mark { width: min(31vw, 388px); }
  .ticker__copy {
    font-size: clamp(13px, 1.35vw, 17px);
    line-height: 1;
    letter-spacing: .12em;
    white-space: nowrap;
  }
  .ticker__copy.is-long,
  .ticker__copy.is-very-long {
    font-size: clamp(11px, 1.08vw, 15px);
    letter-spacing: .095em;
  }
  .ticker__window { min-height: 1.35em; }
}

@media (min-width: 1200px) {
  .mark { width: 372px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}