/* ============================================================
   DAYONEWRLD / THE RETURN
   ------------------------------------------------------------
   01  Reset and base
   02  Environment layer (grain, leak, vignette)
   03  Typography primitives
   04  Components (nav, buttons, field, countdown, ledger, plate)
   05  Signature: the engraved margin thread
   06  Sections 01 to 06
   07  Footer
   08  Reveal system
   09  Responsive: phone first viewport
   10  Reduced motion and print
   ============================================================ */

/* ============================================================
   01  RESET AND BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

button, input { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--cream); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 4px;
  border-radius: 1px;
}

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

.skip {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.85rem 1.4rem;
  background: var(--cream);
  color: var(--ink);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip:focus { transform: translate(-50%, 0); }

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   02  ENVIRONMENT LAYER
   One fixed place behind everything: grain, a slow leak, a vignette.
   ============================================================ */

.env {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
}

/* The grain tile is 190px, so the layer only ever has to be the
   viewport plus one tile of slack in each direction. Sizing it to
   multiples of the viewport instead builds a texture several times
   the screen and repaints it eight times a second, which is enough
   to starve the compositor on a phone. */
.env__grain {
  position: absolute;
  inset: -200px;
  opacity: 0.05;
  background-image: var(--grain-src);
  background-size: 190px 190px;
  animation: grainShift 0.72s steps(1, end) infinite;
}

@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  12%  { transform: translate3d(-32px, -58px, 0); }
  25%  { transform: translate3d(-88px, 34px, 0); }
  37%  { transform: translate3d(46px, -72px, 0); }
  50%  { transform: translate3d(-24px, 80px, 0); }
  62%  { transform: translate3d(70px, 26px, 0); }
  75%  { transform: translate3d(-64px, -36px, 0); }
  87%  { transform: translate3d(28px, 56px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* A single light leak that drifts across ninety seconds. */
.env__leak {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(58% 44% at 22% 12%, rgba(241, 237, 227, 0.055), transparent 62%),
    radial-gradient(46% 38% at 82% 78%, rgba(241, 237, 227, 0.032), transparent 66%);
  animation: leakDrift 96s var(--ease-inout) infinite alternate;
  will-change: transform, opacity;
}

@keyframes leakDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: 0.85; }
  50%  { transform: translate3d(3.5%, -2.5%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(-2.5%, 3%, 0) scale(1.02);   opacity: 0.78; }
}

.env__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 92% at 50% 44%, transparent 42%, rgba(3, 3, 3, 0.55) 88%, rgba(3, 3, 3, 0.8) 100%);
}

/* ============================================================
   03  TYPOGRAPHY PRIMITIVES
   ============================================================ */

.label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.4;
}

.label--cream { color: var(--cream); }

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--cream);
}

.lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-lede);
  line-height: 1.42;
  color: var(--cream-soft);
  font-style: italic;
}

.wordmark {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cream);
}

.rule-line {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ============================================================
   04  COMPONENTS
   ============================================================ */

/* ---- Navbar -------------------------------------------------
   Almost invisible until it is wanted: low opacity at rest,
   full presence on hover, focus, or an upward scroll.
   ------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  opacity: 0.42;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out);
}

.nav:hover,
.nav:focus-within,
.nav.is-awake { opacity: 1; }

.nav.is-veiled { opacity: 0; pointer-events: none; }

.nav.is-hidden { transform: translate3d(0, -100%, 0); opacity: 0; }

.nav.is-stuck {
  background: rgba(5, 5, 5, 0.68);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  backdrop-filter: blur(14px) saturate(0.9);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
  padding-block: 0.75rem;
}

.nav__brand {
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__brand:hover { opacity: 0.62; }

.nav__links {
  display: flex;
  align-items: baseline;
  gap: clamp(1.4rem, 3vw, 2.75rem);
}

.nav__link {
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--dim);
  position: relative;
  padding-block: 0.35rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--cream);
  transition: right var(--dur-mid) var(--ease-out);
}
.nav__link:hover { color: var(--cream); }
.nav__link:hover::after { right: 0; }

/* ---- Buttons ------------------------------------------------ */

.btn {
  --btn-border: var(--rule-live);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85em;
  padding: 1.05rem 1.85rem;
  background: transparent;
  border: 1px solid var(--btn-border);
  color: var(--cream);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out);
}

/* A light sweeps across the face instead of a colour change. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 12%, var(--halo-strong) 46%, transparent 84%);
  transform: translate3d(-102%, 0, 0);
  transition: transform 0.9s var(--ease-out);
}

.btn:hover, .btn:focus-visible { --btn-border: var(--cream); }
.btn:hover::before, .btn:focus-visible::before { transform: translate3d(102%, 0, 0); }

.btn__arrow { transition: transform var(--dur-mid) var(--ease-out); }
.btn:hover .btn__arrow { transform: translate3d(0.32em, 0, 0); }

.btn--ghost {
  --btn-border: transparent;
  padding-inline: 0;
  border-bottom: 1px solid var(--rule-live);
}
.btn--ghost:hover,
.btn--ghost:focus-visible { --btn-border: transparent; border-bottom-color: var(--cream); }

.btn--wide { width: 100%; }

.btn[disabled] { opacity: 0.42; cursor: progress; }

/* ---- Email field -------------------------------------------- */

.signup { width: min(100%, 30rem); }

.signup__row { display: grid; gap: 0.55rem; }

.signup__field { position: relative; display: flex; align-items: center; }

.signup__input {
  width: 100%;
  padding: 1.05rem 1.1rem;
  background: rgba(241, 237, 227, 0.014);
  border: 1px solid var(--rule-live);
  color: var(--cream);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: border-color var(--dur-mid) var(--ease-out), background-color var(--dur-mid) var(--ease-out);
}
.signup__input::placeholder { color: var(--dim); opacity: 1; letter-spacing: var(--ls-wide); }
.signup__input:hover { border-color: #7a776f; }
.signup__input:focus { outline: none; border-color: var(--cream); background: rgba(241, 237, 227, 0.03); }
.signup__input:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; }

.signup__pot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.signup__note {
  margin-top: 1.05rem;
  color: var(--dim);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 2;
}

.signup__msg {
  min-height: 1.2em;
  margin-top: 0.85rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.signup__msg.is-shown { opacity: 1; transform: none; }
.signup__msg[data-tone="error"] { color: #c9beac; }

/* The success state replaces the form rather than sitting beside it. */
.signup__done {
  display: none;
  padding: 1.9rem 0 0.4rem;
  border-top: 1px solid var(--rule);
}
.signup.is-done .signup__row,
.signup.is-done .signup__note,
.signup.is-done .signup__msg { display: none; }
.signup.is-done .signup__done { display: block; }

.signup__done-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.02;
  color: var(--cream);
}
.signup__done-sub {
  margin-top: 0.9rem;
  color: var(--dim);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---- Countdown ---------------------------------------------- */

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 34rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.15rem 0.4rem 1.05rem 0;
  position: relative;
}
.countdown__unit + .countdown__unit { padding-left: clamp(0.7rem, 2.4vw, 1.4rem); }
.countdown__unit + .countdown__unit::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem; bottom: 1.05rem;
  width: 1px;
  background: var(--rule);
}

.countdown__num {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(1.65rem, 4.6vw, 2.55rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.countdown__label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
}

.countdown.is-elapsed .countdown__num { color: var(--dim-deep); }

/* ============================================================
   05  SIGNATURE: THE ENGRAVED MARGIN THREAD
   One hairline runs the height of the page in the left margin.
   It fills as you scroll, ticks at every section, and carries
   the name of wherever you are. Desktop only, by design.
   ============================================================ */

.thread {
  position: fixed;
  left: clamp(1rem, 2.4vw, 2.4rem);
  top: 20vh;
  bottom: 20vh;
  z-index: 40;
  display: none;
  pointer-events: none;
}

.thread__line {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
  overflow: hidden;
}

.thread__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--cream) 22%, var(--cream));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.16s linear;
  opacity: 0.72;
}

.thread__marks {
  position: absolute;
  left: -3px;
  top: 0; bottom: 0;
  width: 7px;
}

.thread__mark {
  position: absolute;
  left: 0;
  width: 7px; height: 1px;
  background: var(--rule-live);
  transform: translateY(-50%);
  transition: background-color var(--dur-mid) var(--ease-out), width var(--dur-mid) var(--ease-out);
}
.thread__mark.is-past { background: var(--cream); }
.thread__mark.is-active { background: var(--cream); width: 13px; }

.thread__stamp {
  position: absolute;
  left: 14px;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.thread__stamp b {
  font-weight: 500;
  color: var(--cream);
}
.thread__stamp span {
  display: inline-block;
  transition: opacity var(--dur-mid) var(--ease-out);
}

@media (min-width: 1180px) and (min-height: 620px) {
  .thread { display: block; }
}

/* ============================================================
   06  SECTIONS
   ============================================================ */

.section { position: relative; padding-block: var(--section-y); }

.section__index {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
.section__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}

/* ---- Intro veil (section 01) --------------------------------
   Black, then the wordmark, then the artwork rising out of it.
   Under three seconds, and it never blocks a click.
   ------------------------------------------------------------ */

.veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity var(--dur-veil) var(--ease-out), visibility 0s linear var(--dur-veil);
}
.veil.is-lifted {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.veil__mark {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(0.625rem, 2.4vw, 0.8125rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  filter: blur(6px);
  transform: scale(1.04);
}
.veil.is-running .veil__mark {
  animation: markEmerge 1.55s var(--ease-out) 0.32s both;
}

@keyframes markEmerge {
  0%   { opacity: 0; filter: blur(7px); transform: scale(1.045); }
  46%  { opacity: 0.9; filter: blur(0); transform: scale(1); }
  100% { opacity: 0.32; filter: blur(0); transform: scale(1); }
}

/* ---- Section 02: hero --------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(5.5rem, 12vh, 8rem);
  padding-bottom: clamp(3.5rem, 9vh, 6.5rem);
}

.hero__stage { width: 100%; }

.hero__parallax { /* will-change is set by parallax.js only while it is actually running */ }

.hero__art {
  width: min(100%, 1020px);
  margin: 0 auto clamp(2.4rem, 6vh, 4.2rem);
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(1.05);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.hero__art.is-revealed { opacity: 1; transform: none; }

.hero__breath {
  animation: breathe 13s var(--ease-inout) infinite;
  transform-origin: center 46%;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* The artwork is close to square, so height is what has to be held,
   not width. Capping the height keeps the words under it in reach
   instead of pushed a full screen down. */
.hero__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62svh;
  margin-inline: auto;
}

@supports not (height: 1svh) {
  .hero__img { max-height: 62vh; }
}

/* Desktop lays the words in two columns so the page never reads
   as a stack of centred lines. The reading order is unchanged. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 3.2rem);
  align-items: start;
}

/* The hook line. It was sitting at label size in secondary ink,
   which read as a caption when it is the first thing the page
   actually says. Given its own weight it plays as a title card. */
.hero__eyebrow {
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  line-height: 2.1;
  text-transform: uppercase;
  color: var(--cream-soft);
  max-width: 22ch;
}

.hero__call {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.85rem, 4.6vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--cream);
  margin-block: clamp(1.1rem, 2.6vw, 1.6rem);
}

.hero__join {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.16;
  color: var(--cream);
  margin-bottom: clamp(1.3rem, 3vw, 1.8rem);
  max-width: 18ch;
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  width: 1px;
  height: 42px;
  overflow: hidden;
  background: var(--rule);
  transform: translateX(-50%);
}
.hero__cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  animation: cueFall 2.9s var(--ease-inout) infinite;
}
@keyframes cueFall {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 0.85; }
  100% { transform: translateY(100%); opacity: 0; }
}

@media (max-height: 700px) { .hero__cue { display: none; } }

/* ---- Section 03: the world is watching ----------------------
   A sealed ledger. No number is shown until a real number exists.
   ------------------------------------------------------------ */

.watching { border-top: 1px solid var(--rule); }

.watching__head {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2.6rem, 6vw, 4rem);
}

.watching__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-large);
  line-height: 1.02;
  color: var(--cream);
}

.watching__note {
  color: var(--dim);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 2.1;
  max-width: 44ch;
}

.ledger { border-top: 1px solid var(--rule); }

.ledger__row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(1.05rem, 2.4vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}

.ledger__key {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim);
  flex: 0 0 auto;
}

.ledger__leader {
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.5rem;
  background-image: linear-gradient(to right, var(--rule) 0 2px, transparent 2px 6px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  transform: translateY(-0.3em);
}

.ledger__val {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  letter-spacing: 0.16em;
  color: var(--dim-deep);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition: color var(--dur-mid) var(--ease-out);
}
.ledger__val[data-live="true"] { color: var(--cream); letter-spacing: 0.04em; }

/* ---- Section 06: final statement ---------------------------- */

.final {
  background: var(--ink-deep);
  border-top: 1px solid var(--rule);
  text-align: center;
  padding-block: clamp(7rem, 22vh, 15rem);
}

.final__head {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-mega);
  line-height: 0.9;
  letter-spacing: var(--ls-display);
  color: var(--cream);
}
.final__head em { display: block; font-style: italic; }

.final__mark {
  margin-top: clamp(2.6rem, 7vw, 4.5rem);
  font-size: 0.6875rem;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
}

.final__creed {
  margin-top: 1.4rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim);
  line-height: 2.2;
}

.final__cta { margin-top: clamp(2.6rem, 6vw, 3.6rem); }

/* ============================================================
   07  FOOTER
   ============================================================ */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 7vh, 5rem);
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.8rem 2.5rem;
}

.foot__brand { font-size: 0.75rem; letter-spacing: 0.4em; }

.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.1rem 2rem;
}

.foot__link {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim);
  transition: color var(--dur-fast) var(--ease-out);
}
.foot__link:hover { color: var(--cream); }

.foot__base {
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem 2rem;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim-deep);
}

/* ============================================================
   08  REVEAL SYSTEM
   ============================================================ */

/* No will-change here on purpose. Opacity and transform are already
   cheap to animate, and pinning two dozen elements into their own
   compositor layers costs far more than it saves. */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 1.05s var(--ease-out),
    transform 1.05s var(--ease-out),
    clip-path 1.15s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="up"]    { transform: translate3d(0, 32px, 0); }
[data-reveal="rise"]  { transform: translate3d(0, 22px, 0); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="media"] { transform: scale(1.06); }
[data-reveal="line"]  { transform: none; clip-path: inset(0 100% 0 0); }

/* A title card: the line rises out from behind a mask rather than
   simply fading in. The insets run past the box on both edges so
   the tails of g, y and p are never clipped. */
[data-reveal="title"] {
  transform: translate3d(0, 0.16em, 0);
  clip-path: inset(-30% 0 100% 0);
  transition-duration: 1.25s;
}
[data-reveal="title"].is-in { clip-path: inset(-30% 0 -30% 0); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* ============================================================
   09  RESPONSIVE
   ============================================================ */

/* --- Phone: a dedicated first viewport, not a squeezed desktop --- */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-top: 5.75rem;
    padding-bottom: 3.5rem;
    justify-content: flex-start;
  }

  /* The artwork owns the opening screen, edge to edge, so it reads
     as a plate rather than a picture sitting in a column. */
  .hero__art {
    width: calc(100% + var(--gutter) * 2);
    margin-left: calc(var(--gutter) * -1);
    margin-bottom: 2.2rem;
  }
  .hero__breath { width: 100%; }
  .hero__img { width: 100%; max-height: 54svh; }

  .hero__grid { display: flex; flex-direction: column; gap: 0; }

  /* Phone sequence: eyebrow, countdown, the call, then the form. */
  .hero__col--a { display: contents; }
  .hero__eyebrow { order: 1; font-size: 0.75rem; line-height: 1.85; max-width: 15ch; }
  .hero__timer   { order: 2; margin-top: 2rem; }
  .hero__call    { order: 3; margin: 2.2rem 0 0; font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .hero__col--b  { order: 4; margin-top: 2.9rem; }

  .hero__join { font-size: clamp(1.5rem, 6.6vw, 2rem); max-width: 12ch; }
  .signup { width: 100%; }
  .countdown { max-width: none; }
  .countdown__num { font-size: clamp(1.5rem, 7.4vw, 2.1rem); }
  .countdown__label { font-size: 0.5625rem; letter-spacing: 0.18em; }
  .countdown__unit { padding-right: 0.25rem; }

  .scene__head { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .final__head { font-size: clamp(3rem, 15.5vw, 5rem); }
  .scene { padding-block: clamp(5rem, 12vh, 7rem); }

  .ledger__key { font-size: 0.625rem; letter-spacing: 0.2em; }
}

/* --- Tablet and up --- */
@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }
  .hero__timer { margin-top: clamp(1.4rem, 3vw, 2rem); }

  .watching__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
  }

}

/* --- Desktop --- */
@media (min-width: 1024px) {
  .nav__inner { min-height: 76px; }
}

/* Hide the desktop only nav links where there is no room for them. */
@media (max-width: 767px) {
  .nav__links { display: none; }
  .nav__brand { font-size: 0.6875rem; letter-spacing: 0.34em; }
}

/* Comfortable targets on touch, without moving the layout. */
@media (pointer: coarse) {
  .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .signup__input { min-height: 48px; }
  .nav__link, .foot__link { padding-block: 0.6rem; }
}

/* ============================================================
   10  REDUCED MOTION AND PRINT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .env__grain, .env__leak { animation: none; }
  .hero__breath { animation: none; }
  .hero__cue { display: none; }

  .hero__art { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .veil { display: none; }
}

@media print {
  .env, .thread, .nav, .veil { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   11  THE SCENERY
   ------------------------------------------------------------
   One fixed stage behind the whole page holding every frame.
   Scrolling cross dissolves between them, so the site reads as
   one continuous film rather than a stack of sections. Only the
   live frame drifts, so only one layer is ever being composited.
   ============================================================ */

.scenery {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
  pointer-events: none;
}

.scenery__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease-soft);
}
.scenery__frame.is-live { opacity: 1; }

.scenery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  /* Held well down so cream type always has a dark ground to sit on.
     The frames are lit fabric, so this reads as grade, not as dimming. */
  filter: brightness(0.40) contrast(1.06) saturate(0.72);
  transform: scale(1.06);
}

/* Only the live frame moves. A slow push in, never a loop that
   snaps back. */
.scenery__frame.is-live img {
  animation: sceneDrift 30s var(--ease-inout) infinite alternate;
}

@keyframes sceneDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.2%, -1.6%, 0); }
}

/* Top and bottom carry most of the weight, because that is where
   the navigation and the section edges live. */
.scenery__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(5, 5, 5, 0.86) 0%,
      rgba(5, 5, 5, 0.46) 26%,
      rgba(5, 5, 5, 0.46) 74%,
      rgba(5, 5, 5, 0.88) 100%);
}

/* ============================================================
   12  SCENES
   Every section is a screen in the film.
   ============================================================ */

.scene {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(6rem, 14vh, 10rem);
}

/* Each scene carries its own shade, weighted toward wherever its
   words sit. Over the brightest thread in the scenery, secondary
   text measures about 3.7:1 unaided, which is under the floor.
   This is what lifts it clear while leaving the far side of the
   frame open, the way a title card is graded. */
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(5, 5, 5, 0.80) 0%,
    rgba(5, 5, 5, 0.58) 34%,
    rgba(5, 5, 5, 0.22) 66%,
    rgba(5, 5, 5, 0.06) 100%);
}

/* The hero keeps its middle clear so the artwork sits in open air. */
.scene--hero::before {
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0.42) 0%,
    rgba(5, 5, 5, 0.10) 26%,
    rgba(5, 5, 5, 0.10) 48%,
    rgba(5, 5, 5, 0.72) 82%,
    rgba(5, 5, 5, 0.86) 100%);
}

/* The closing screen is centred, so its shade is too. */
.scene--final::before {
  background:
    radial-gradient(72% 60% at 50% 46%, rgba(5, 5, 5, 0.86), rgba(5, 5, 5, 0.62) 62%, rgba(5, 5, 5, 0.42) 100%);
}

@supports not (height: 1svh) {
  .scene { min-height: 100vh; }
}

.scene--hero { justify-content: center; }

/* The closing screen sits under its own extra shade so the type
   is the only thing left in the room. */
.scene--final {
  text-align: center;
  background: linear-gradient(to bottom, transparent, rgba(3, 3, 3, 0.72) 45%, rgba(3, 3, 3, 0.92));
}

.scene__body { width: 100%; }

/* A measured column so type never runs the full width of a screen. */
.scene__col { max-width: 46rem; }
.scene__col--right { margin-left: auto; text-align: left; }

/* ============================================================
   13  THE GALLERY
   The details, as an index. Touching a line brings its frame up
   behind the page instead of showing a thumbnail.
   ============================================================ */

.gallery { border-top: 1px solid var(--rule); }

.gallery__row {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
  width: 100%;
  padding: clamp(1.05rem, 2.6vw, 1.7rem) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-mid) var(--ease-out);
}
.gallery__row:hover,
.gallery__row:focus-visible { border-bottom-color: var(--rule-live); }

.gallery__no {
  flex: 0 0 auto;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--dim-deep);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-mid) var(--ease-out);
}

.gallery__name {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  color: var(--dim);
  transition: color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}

.gallery__rule {
  flex: 1 1 auto;
  min-width: 1rem;
  height: 1px;
  background: var(--rule);
  transform: translateY(-0.35em);
}

.gallery__cue {
  flex: 0 0 auto;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim-deep);
  opacity: 0;
  transform: translate3d(-6px, 0, 0);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}

.gallery__row:hover .gallery__name,
.gallery__row:focus-visible .gallery__name,
.gallery__row.is-open .gallery__name { color: var(--cream); transform: translate3d(0.5rem, 0, 0); }

.gallery__row:hover .gallery__no,
.gallery__row:focus-visible .gallery__no,
.gallery__row.is-open .gallery__no { color: var(--dim); }

.gallery__row:hover .gallery__cue,
.gallery__row:focus-visible .gallery__cue,
.gallery__row.is-open .gallery__cue { opacity: 1; transform: none; }

/* The one detail held back. It behaves like the others but says so. */
.gallery__row--sealed { cursor: default; }
.gallery__row--sealed .gallery__name { font-style: italic; }
.gallery__row--sealed:hover .gallery__name,
.gallery__row--sealed:focus-visible .gallery__name { transform: none; color: var(--dim); }
.gallery__row--sealed .gallery__cue { letter-spacing: 0.26em; }

/* ============================================================
   14  SCENE TYPOGRAPHY
   ============================================================ */

.scene__kicker { margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }

.scene__head {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-major);
  line-height: 0.96;
  letter-spacing: var(--ls-display);
  color: var(--cream);
  text-wrap: balance;
}
.scene__head em { display: block; font-style: italic; color: var(--cream-soft); }

.scene__creed {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding-top: clamp(1.5rem, 3.5vw, 2.1rem);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.6rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim);
}
.scene__creed li:first-child { color: var(--cream); }

.scene__cta { margin-top: clamp(1.9rem, 4.5vw, 2.8rem); }

/* Footer closes the film: solid ground, no scenery behind it. */
.foot {
  position: relative;
  z-index: 1;
  background: var(--ink-deep);
}

@media (min-width: 768px) {
  .scene__col { max-width: min(52%, 34rem); }
  .scene--about .scene__col { max-width: min(48%, 32rem); }
}

@media (prefers-reduced-motion: reduce) {
  .scenery__frame.is-live img { animation: none; transform: scale(1.02); }
  .scenery__frame { transition-duration: 0.001ms; }
}

/* ============================================================
   15  THE RIG
   ------------------------------------------------------------
   The lights are in the room, not behind glass. Hard beams rake
   the frame, their sources sit at the ends of them, and the key
   light travels as you scroll, so the screen moves with the
   light rather than under it.

   Two custom properties drive all of it, both written by
   camera.js on the root element:
     --travel  0 to 1, how far down the page you are
     --sweep   0 to 1, the same thing eased, for the key light
   ============================================================ */

:root {
  --travel: 0;
  --sweep: 0;
}

/* The camera itself: the whole stage rises a little as you go. */
.scenery__dolly {
  position: absolute;
  inset: -7%;
  transform: translate3d(0, calc(var(--travel) * -4.5%), 0);
}

.rig {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The key: one broad soft source that crosses the room. */
.rig__key {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(
      36% 44% at calc(10% + var(--sweep) * 78%) calc(20% + var(--travel) * 44%),
      rgba(241, 237, 227, 0.17),
      rgba(241, 237, 227, 0.035) 46%,
      transparent 70%);
}

/* The beams tilt through the frame as the camera rises. */
.rig__beams {
  position: absolute;
  inset: -30%;
  transform:
    translate3d(0, calc(var(--travel) * -9%), 0)
    rotate(calc(-1.5deg + var(--travel) * 3deg));
}

.rig__beam {
  position: absolute;
  left: -12%;
  width: 128%;
  transform-origin: 50% 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(241, 237, 227, 0.07) 16%,
    rgba(241, 237, 227, 0.30) 44%,
    rgba(241, 237, 227, 0.17) 62%,
    transparent 92%);
}

.rig__beam--a { top: 27%; height: 3px; transform: rotate(-17deg); filter: blur(2px); opacity: 0.85; }
.rig__beam--b { top: 40%; height: 2px; transform: rotate(-17deg); filter: blur(1px); opacity: 0.6; }
.rig__beam--c { top: 57%; height: 3px; transform: rotate(-17deg); filter: blur(1.2px); opacity: 1; }
.rig__beam--d { top: 70%; height: 2px; transform: rotate(9deg);  filter: blur(1.5px); opacity: 0.5; }

/* The sources, sitting at the ends of their beams. */
.rig__lamp {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(241, 237, 227, 0.46) 0%,
    rgba(241, 237, 227, 0.17) 22%,
    rgba(241, 237, 227, 0.03) 46%,
    transparent 70%);
}

.rig__lamp--1 { left: 8%;  top: 22%; }
.rig__lamp--2 { left: 62%; top: 47%; width: 150px; height: 150px; opacity: 0.8; }
.rig__lamp--3 { left: 24%; top: 68%; width: 220px; height: 220px; opacity: 0.65; }

/* The hero keeps the room quieter so the artwork stays the subject. */
.scene--hero { --rig-hold: 0.55; }

@media (max-width: 767px) {
  /* Fewer sources on a phone: the beams read, the extra glows do not. */
  .rig__beam--b, .rig__lamp--2 { display: none; }
  .rig__lamp { width: 140px; height: 140px; }
  .rig__key { background:
    radial-gradient(
      52% 34% at calc(14% + var(--sweep) * 70%) calc(22% + var(--travel) * 40%),
      rgba(241, 237, 227, 0.10),
      rgba(241, 237, 227, 0.03) 48%,
      transparent 72%); }
}

@media (prefers-reduced-motion: reduce) {
  /* The room is still lit, it just stops moving. */
  .scenery__dolly { transform: none; }
  .rig__beams { transform: rotate(-1.5deg); }
  .rig__key {
    background: radial-gradient(36% 44% at 42% 38%,
      rgba(241, 237, 227, 0.10), rgba(241, 237, 227, 0.03) 46%, transparent 70%);
  }
}

/* ============================================================
   16  THE PLAIN PAGES
   Privacy and terms. Same room, lights off, nothing moving.
   ============================================================ */

.doc {
  padding-top: clamp(7rem, 18vh, 11rem);
  padding-bottom: clamp(4rem, 12vh, 7rem);
  position: relative;
  z-index: 1;
}

.doc__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  color: var(--cream);
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

.doc__stamp {
  margin-top: 1.1rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dim-deep);
}

.doc h2 {
  margin-top: clamp(2.6rem, 6vw, 4rem);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--cream);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.doc p {
  margin-top: 1.1rem;
  max-width: 58ch;
  color: var(--dim);
  font-size: clamp(0.875rem, 1.1vw, 0.95rem);
  line-height: 1.85;
}

.doc__link {
  color: var(--cream);
  border-bottom: 1px solid var(--rule-live);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.doc__link:hover { border-bottom-color: var(--cream); }

/* ============================================================
   17  THE CUT
   A scene change blooms for a quarter of a second and then falls
   away over a second, which is how a cut between two lit frames
   actually reads. A plain cross dissolve reads as a slideshow.
   ============================================================ */

.scenery__flare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(58% 48% at 50% 42%, rgba(241, 237, 227, 0.10), transparent 72%);
  transition: opacity 1.05s var(--ease-out);
}

.scenery.is-cutting .scenery__flare {
  opacity: 1;
  transition-duration: 0.26s;
}

@media (prefers-reduced-motion: reduce) {
  .scenery__flare { display: none; }
}