/* =========================================================
   The Creators Voyage

   Direction   "Warm studio". Bold tight type, soft generous radii,
               photography and flat colour fields as the connective
               tissue.

   Palette     Bright warm base, warm near-black ink, and three warm
               hues used as FLAT FIELDS only: amber, orange, forest.
               No red anywhere. Colour appears in exactly three
               well-spaced moments (amber manifesto, forest host, ink
               guest) rather than scattered through the page.
               No glows, no gradients, no tints, no cool greys.

   Labels      All type is Geist. Micro-labels are the same sans at
               wider tracking, never a mono face.

   Layout      Colour moments are FULL-BLEED bands. Everything else sits on
               the base. No inset panels, no rounded sections.

   Radius      media 16px, buttons and inputs pill. Nothing else.
   ========================================================= */

:root {
  /* --- warm neutrals, brighter than a cream so the colour fields pop --- */
  --bg:        #f9f7f2;
  --surface:   #ffffff;
  --ink:       #15130f;
  --ink-2:     #423c33;
  --muted:     #5a534a;
  --faint:     #6b645a;
  --line:      #e6e1d6;
  --line-2:    #cec7b8;

  /* --- the colour set: yellows, oranges, greens. No red anywhere. ---
     Ranked, not equal. Amber is the page's ONE bright field; the deep pine
     sits in the dark family alongside the footage bands and the ink CTA so it
     reads as a tonal step rather than a second competing voice. Orange never
     appears as a field at all, only as the interactive colour.
       amber   the one bright band (manifesto)
       pine    the host band, and all coloured text
       orange  buttons, marks, focus fills
     Used as flat fields only. Never a gradient, glow, or tint. */
  --c-amber:  #eeb42b;
  --c-orange: #e8842a;
  --c-forest: #1d4a39;

  --accent:      var(--c-orange);
  --accent-ink:  #1a0f05;
  /* Neither amber nor orange clears 4.5:1 as small text on this base, so every
     coloured word on the page is forest. Focus rings are ink for the same
     reason: an amber ring would sit at 1.8:1 against the background. */
  --accent-text: var(--c-forest);

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1280px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --content: calc(var(--wrap) - (2 * var(--pad)));
  --gap: clamp(1rem, 1.8vw, 1.6rem);

  --r-md: 16px;
  --r-pill: 999px;

  /* One vertical rhythm for the whole page. --y for sections on the base,
     --y-lg for the full-bleed colour bands. Nothing sets its own. */
  --y:    clamp(4rem, 8vw, 7rem);
  --y-lg: clamp(5rem, 10vw, 9rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* Warm dark, not cold dark. Same direction after sundown. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14110d;
    --surface:   #1e1a15;
    --ink:       #f9f7f2;
    --ink-2:     #d6cfc2;
    --muted:     #a49b8c;
    --faint:     #8f8779;
    --line:      #2e2921;
    --line-2:    #40392f;

    /* The colour set is already bright enough to hold on a dark field, so it
       carries over unchanged. Only the text tint has to lighten. */
    --accent-text: #6fc79b;

    color-scheme: dark;
  }
}

:root { interpolate-size: allow-keywords; }
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings are LIGHT. At weight 300 the tight tracking that suited 600 closes
   the counters up, so the negative tracking comes back to roughly a third of
   what it was and the leading opens slightly. The hero overrides this; it is
   the one heavy moment on the page. */
h1, h2, h3 {
  margin: 0;
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.06;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 1rem; top: -100%; z-index: 100;
  padding: 0.7rem 1.2rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg);
  font-size: 0.9rem; font-weight: 500;
}
.skip-link:focus-visible { top: 1rem; }

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { .grain { opacity: 0.05; } }

/* ---------- primitives ---------- */

.link {
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link:hover { color: var(--accent-text); border-color: var(--accent-text); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn span { transition: transform 0.22s var(--ease); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--solid  { background: var(--ink);    color: var(--bg); }
.btn--quiet  { background: transparent;   color: var(--ink); border-color: var(--line-2); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover span { transform: translateX(3px); }
  .btn--quiet:hover { border-color: var(--ink); }
}
.btn:active { transform: translateY(0); }

/* ---------- masthead ---------- */

/* Two states, and the DEFAULT is the readable one. `.is-over` (transparent,
   light type) is added only while the hero video is on screen. Written this way
   round so that if scripting never runs, the nav is still legible against the
   page rather than white-on-cream. */
.masthead {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 72px;
  padding-inline: var(--pad);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              color 0.35s var(--ease);
}
.masthead.is-over {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: #fff;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 600; font-size: 1.02rem; letter-spacing: -0.03em;
}
.wordmark__mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); }
.nav > a {
  font-size: 0.93rem;
  color: inherit;
  opacity: 0.72;
  transition: opacity 0.2s var(--ease);
}
.nav > a:hover { opacity: 1; }
/* The pill keeps its own colours in both masthead states so its label never
   drops below AA against the footage. */
.nav > .nav__cta {
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
  opacity: 1;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.masthead.is-over .nav__cta { background: #fff; color: var(--ink); }
.nav > .nav__cta:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }

@media (max-width: 820px) { .nav > a:not(.nav__cta) { display: none; } }

/* ---------- layout ---------- */

section { padding-inline: var(--pad); }

/* =========================================================
   HERO  ·  full-bleed looping video
   ========================================================= */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  margin-top: -72px;            /* run the video up behind the sticky masthead */
  padding-top: 72px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: clip;
}
.hero__video,
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Poster and video are both dark-ish; the scrim below does the real work of
     guaranteeing text contrast whatever frame is showing. */
}
/* Vignette plus top/bottom falloff. The vignette is what makes it read as a
   frame rather than a photo with text on it, and it guarantees the type keeps
   its contrast whatever frame the loop is on. */
.hero__scrim {
  background:
    radial-gradient(125% 85% at 50% 45%, transparent 38%, rgb(8 6 4 / 0.6) 100%),
    linear-gradient(to bottom, rgb(10 8 5 / 0.5), rgb(10 8 5 / 0.28) 45%, rgb(10 8 5 / 0.62));
}

.hero__inner {
  max-width: var(--wrap);
  padding-inline: var(--pad);
  padding-block: clamp(4rem, 10vh, 7rem);
  color: #fff;
}

/* The show name is the hero. "The Creators Voyage" measures 8.911em wide in
   Geist 600 at this tracking (measured on this element, not a synthetic span),
   so dividing the available width by 9.0 fits it to one line at any desktop
   size. Re-measure if the name, weight or tracking ever changes. */
.hero__title {
  font-size: min(9rem, calc((min(100vw, var(--wrap)) - (2 * var(--pad))) / 9.0));
  font-weight: 600;
  letter-spacing: -0.052em;
  line-height: 0.94;
  margin: 0;
  white-space: nowrap;
}
/* Below this the one-line fit gets too small to carry a hero, so let it wrap
   and take the size back up. Capped at 13.5vw because "The Creators" has to
   hold one line: any larger and the name breaks into three. */
@media (max-width: 560px) {
  .hero__title {
    font-size: clamp(2.4rem, 13.5vw, 3.4rem);
    white-space: normal;
    text-wrap: balance;
  }
}
.hero__title .line {
  display: block; overflow: hidden;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  animation: line-rise 1s var(--ease) forwards;
}
.hero__title .line:nth-child(2) > span { animation-delay: 0.12s; }
@keyframes line-rise { to { transform: translateY(0); } }

.hero__sub {
  margin: clamp(1.1rem, 2.2vw, 1.75rem) auto 0;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.82);
}

/* Frame marks, pinned to the corners of the footage. */
.hero__marks {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--pad);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.75;
  color: rgb(255 255 255 / 0.78);
}
.hero__marks span { display: block; }
.hero__marks p:last-child { text-align: right; }

.hero :focus-visible { outline-color: #fff; }

/* Content lifts and fades as the hero scrolls away. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__inner {
      animation: hero-exit linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
    @keyframes hero-exit { to { opacity: 0; transform: translateY(-4rem); } }
  }
}

@media (max-width: 640px) {
  .hero__title { text-wrap: balance; }
}

/* =========================================================
   MANIFESTO  ·  the one colour block
   ========================================================= */

/* Full bleed. The colour runs edge to edge and the copy inside still lands on
   the page's shared content column. */
.manifesto {
  background: var(--c-amber);
  color: #1a1405;
  padding-block: var(--y-lg);
}
.manifesto__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.manifesto__title {
  grid-column: 1 / -1;
  font-size: clamp(2.8rem, 7.6vw, 6.4rem);
  letter-spacing: -0.024em;
  line-height: 1.0;
  max-width: 13ch;
}
.manifesto__body {
  grid-column: 1 / -1;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 78ch;
}
/* Full-strength ink. Softening it drops contrast below AA on the fill. */
.manifesto__body p { color: #33280a; font-size: 1.05rem; }
.manifesto__body p:first-child {
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  line-height: 1.34; letter-spacing: -0.028em;
}
.manifesto ::selection { background: #1a1405; color: var(--c-amber); }

@media (max-width: 900px) {
  .manifesto__body { grid-column: 1 / -1; grid-template-columns: 1fr; }
}

/* =========================================================
   FILM BAND  ·  one statement over footage
   ========================================================= */

.filmband {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(320px, 42vw, 560px);
  padding-block: var(--y);
  padding-inline: var(--pad);
  overflow: clip;
}
/* Statement lands on the same 144px column as every other section rather than
   hugging the frame edge. */
.filmband__inner { width: 100%; max-width: var(--content); margin: 0 auto; }
.filmband__video,
.filmband__scrim { position: absolute; inset: 0; z-index: -1; }
.filmband__video { width: 100%; height: 100%; object-fit: cover; }
.filmband__scrim {
  background: linear-gradient(to top, rgb(8 6 4 / 0.74), rgb(8 6 4 / 0.3) 55%, rgb(8 6 4 / 0.2));
}
.filmband__line {
  max-width: 18ch;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: #fff;
}

/* =========================================================
   AUDIENCE
   ========================================================= */

.audience {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-block: var(--y);
}
.audience__title {
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  max-width: 20ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
/* Tops align. The old stagger put three hairlines at three different heights,
   which is what made this block read as ragged rather than composed. */
.voice__quote {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.4; letter-spacing: -0.022em;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}
.voice__who {
  margin-top: 1rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
@media (max-width: 860px) {
  .audience__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* =========================================================
   HOST
   ========================================================= */

.host { padding-block: var(--y-lg); background: var(--c-forest); color: #f2fbf6; }
.host__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.host__labels {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.82rem;
  color: #b9dbc8;
  margin-bottom: 1.1rem;
}
.host__media { margin: 0; }
.host__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
}
.host__title {
  font-size: clamp(2rem, 5.4vw, 4.8rem);
  letter-spacing: -0.024em;
  line-height: 1.06;
}
.host__name { font-size: 1.02rem; font-weight: 400; }
.host__bio { color: #eaf7ef; max-width: 62ch; }
.host .link { color: inherit; border-color: rgb(255 255 255 / 0.35); }
.host .link:hover { color: #fff; border-color: #fff; }
.host ::selection { background: #f2fbf6; color: var(--c-forest); }
.host :focus-visible { outline-color: #f2fbf6; }

@media (max-width: 860px) {
  .host__inner { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .host__aside { max-width: 300px; }
}

/* =========================================================
   GUEST  ·  full-bleed ink band
   ========================================================= */

.guest { background: var(--ink); color: var(--bg); padding-block: var(--y-lg); }
.guest__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}
.guest__title { font-size: clamp(2.2rem, 5.2vw, 4.2rem); letter-spacing: -0.024em; }
.guest__lede {
  margin-top: 1.3rem; max-width: 46ch;
  color: color-mix(in srgb, var(--bg) 74%, var(--ink));
  font-size: 1rem;
}
.guest__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.6rem; margin-top: 2rem;
}
.guest .link { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.guest .link:hover { color: var(--bg); border-color: var(--bg); }
.guest :focus-visible { outline-color: var(--bg); }

.guest__fit { align-self: center; }
.guest__fit h3 {
  font-family: var(--sans); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 62%, var(--ink));
  margin-bottom: 1.1rem;
}
.guest__fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.guest__fit li {
  padding-left: 1.4rem; position: relative;
  font-size: 0.97rem; line-height: 1.45;
  color: color-mix(in srgb, var(--bg) 88%, var(--ink));
}
.guest__fit li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 2px; border-radius: var(--r-pill); background: var(--accent);
}
@media (max-width: 880px) { .guest__inner { grid-template-columns: 1fr; } }

/* =========================================================
   LISTEN
   ========================================================= */

.listen {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-block: var(--y);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.listen__copy h2 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); max-width: 14ch; }
.listen__copy p { margin-top: 0.9rem; max-width: 40ch; color: var(--muted); }

.signup {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem; align-items: start; padding-top: 0.4rem;
}
.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--sans); font-weight: 500; font-size: 0.67rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.field input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease);
}
.field input::placeholder { color: var(--faint); }
.field input:hover { border-color: var(--ink-2); }
.field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field__help { font-size: 0.84rem; color: var(--faint); padding-left: 1.1rem; }
/* Ink, not the accent. --accent-text is the deep pine, and a green error
   message reads as success. The orange input border plus aria-invalid carry
   the state; weight and full contrast separate this from the helper text. */
.field__error { font-size: 0.84rem; color: var(--ink); font-weight: 500; padding-left: 1.1rem; }
.field.has-error input { border-color: var(--accent); }
.field.has-error .field__help { display: none; }

.signup button { align-self: start; margin-top: 1.4rem; }
.signup button[aria-busy="true"] { opacity: 0.65; pointer-events: none; }
.signup__done {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  padding: 0.9rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.signup.is-done .field, .signup.is-done button { display: none; }

@media (max-width: 880px) { .listen { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .signup { grid-template-columns: 1fr; }
  .signup button { margin-top: 0.25rem; justify-content: center; }
}

/* =========================================================
   FOOTER  ·  oversized wordmark
   ========================================================= */

/* Clipped here rather than on body. `overflow-x: hidden` on body promotes it to
   a scroll container and breaks the sticky masthead. */
.site-footer { padding-inline: var(--pad); overflow: hidden; }
.site-footer__bar,
.site-footer__legal {
  max-width: var(--content);
  margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem;
}
.site-footer__bar { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.site-footer__tag { font-size: 1.02rem; color: var(--muted); }

.site-footer__giant {
  /* Light like every other heading. At weight 300 / -0.03em "The Creators
     Voyage" measures 8.731em wide (measured on the real element), so 8.83 fits
     it edge to edge with a little slack. */
  font-size: calc((100vw - (2 * var(--pad))) / 8.83);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.85;
  white-space: nowrap;
  text-align: center;
  color: var(--ink);
  /* Descender reserve for the 'p' and 'y'. */
  padding-bottom: 0.08em;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  transform-origin: 50% 100%;
}
@supports (animation-timeline: view()) {
  .site-footer__giant {
    animation: giant-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 55%;
  }
  @keyframes giant-in {
    from { transform: scale(0.82) translateY(18%); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
  }
}

.site-footer__legal {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.84rem;
  color: var(--faint);
}

/* =========================================================
   REVEAL
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: opacity 0.25s linear; transition-delay: 0ms; }
  .hero__title .line > span { animation: none; transform: none; }
  .btn, .btn span { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .btn:hover span { transform: none; }
  .site-footer__giant { animation: none; transform: none; opacity: 1; }
  .hero__inner { animation: none; opacity: 1; transform: none; }
}