:root {
  --ink: #f3eedc;
  --ink-2: #c9c6b2;
  --ground: #11190d;
  --ground-2: #18241200;
  --leaf: #8fc463;
  --red: #d8392b;
  --sky1: 244 205 150;
  --sky2: 120 150 120;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 1.125rem/1.65 var(--sans);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--leaf); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: 0.005em; }
h2 { font-size: clamp(2.4rem, 1.3rem + 4.6vw, 5.4rem); margin: 0 0 0.45em; letter-spacing: -0.01em; }
h3 { font-size: 1.5rem; margin: 0 0 0.3em; }

.wrap { width: min(1100px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(720px, 100% - 32px); }
.wrap-lead { font-size: 1.25rem; color: var(--ink-2); max-width: 46rem; }

/* the sky glow: fixed behind everything, tinted by scroll position (main.js) */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 70% at 50% -10%, rgb(var(--sky1) / 0.42), transparent 70%),
    linear-gradient(180deg, rgb(var(--sky2) / 0.28), transparent 60%),
    var(--ground);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: start;
  overflow: hidden;
}
.hero-img, .hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 16 8 / 0.72) 0%, rgb(10 16 8 / 0.25) 38%, transparent 55%, rgb(17 25 13 / 0.9) 100%);
}
.hero-text {
  position: relative;
  z-index: 1;
  width: min(1100px, 100% - 32px);
  margin: 12svh auto 0;
}
.kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.85rem; color: var(--ink-2); margin: 0; }
.hero h1 {
  font-size: clamp(4rem, 2rem + 11vw, 10rem);
  margin: 0.05em 0 0.1em;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.35);
}
.lead { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); max-width: 36rem; margin: 0; }
.scroll-hint {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 4svh;
  transform: translateX(-50%);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.6em 1em 2.2em;
}
.scroll-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.4em;
  width: 2px;
  height: 1.4em;
  background: var(--ink);
  transform-origin: top;
}
.motion .scroll-hint::after { animation: drip 2.4s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- trailer ---------- */
.trailer { padding: 12vh 0 4vh; }
.trailer-title { text-align: center; }
.trailer-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
}
.trailer-poster, .trailer-poster img, .trailer-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trailer-video { object-fit: contain; background: #000; }
.trailer-frame:not(.playing)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70% at 50% 50%, transparent, rgb(0 0 0 / 0.45));
  pointer-events: none;
}
.trailer-state, .trailer-play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  color: var(--ink);
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.6);
  white-space: nowrap;
}
.trailer-state {
  padding: 0.35em 0.9em;
  border: 1px solid rgb(243 238 220 / 0.5);
  border-radius: 999px;
  background: rgb(10 16 8 / 0.35);
  backdrop-filter: blur(4px);
}
.trailer-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1.1em;
  border: 0;
  border-radius: 999px;
  background: rgb(10 16 8 / 0.55);
  cursor: pointer;
}
.trailer-play[hidden], .trailer-state[hidden], .trailer-video[hidden] { display: none; }
.play-icon { width: 0; height: 0; border-left: 0.8em solid currentColor; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; }

/* ---------- descent ---------- */
.descent { position: relative; }
.descent-stage { position: relative; }
.descent .layer img { width: 100%; }
.descent .layer:not(:last-of-type) { display: none; }
.altimeter { display: none; }
.descent-steps .step { width: min(720px, 100% - 32px); margin: 2rem auto; }
.motion .descent { height: 420vh; }
.motion .descent-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.motion .descent .layer { display: block; position: absolute; inset: 0; transform-origin: 50% 60%; will-change: transform, opacity; }
.motion .descent .layer img { width: 100%; height: 100%; object-fit: cover; }
.motion .descent .layer[data-layer="1"], .motion .descent .layer[data-layer="2"] { opacity: 0; }
.motion .descent-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(17 25 13 / 0.35), transparent 30%, transparent 55%, rgb(17 25 13 / 0.75));
}
.motion .altimeter {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 2;
  right: max(16px, 4vw);
  top: 12svh;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.alt-value { font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 4vw, 4.6rem); line-height: 1; }
.alt-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--ink-2); }
.motion .descent-steps {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 46svh;
  pointer-events: none;
}
.motion .descent-steps .step {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(10svh + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: 34rem;
  margin: 0 auto;
}
.motion .descent-steps .step p {
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgb(12 18 9 / 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 1.2rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s, transform 0.5s;
}
.motion .descent-steps .step.on p { opacity: 1; transform: none; }
@media (max-width: 599px) {
  .motion .descent-steps .step p { font-size: 1.05rem; padding: 0.85rem 1rem; }
}

/* ---------- bands and titlecard ---------- */
.band { padding: 14vh 0; }
.big-number { font-family: var(--serif); font-size: clamp(4rem, 2rem + 10vw, 9rem); line-height: 1; margin: 0 0 0.2em; color: var(--red); }
.scale p:not(.big-number) { font-size: 1.3rem; }
.titlecard { padding: 10vh 0 16vh; }
.motion .tc-line { min-height: 75svh; display: flex; flex-direction: column; justify-content: center; margin: 0; font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); }
.tc-line {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.25;
  margin: 0 0 1.4em;
}
.tc-line::before { content: ""; display: block; width: 2.4rem; height: 3px; margin-bottom: 0.6em; background: var(--red); border-radius: 2px; }

/* ---------- controls ---------- */
.controls { position: relative; padding: 8vh 0; }
.controls-stage { display: flex; flex-direction: column; align-items: center; padding: 2rem 0; }
.phone-rig {
  --rx: 10deg;
  --ry: -8deg;
  --rz: 0deg;
  position: relative;
  width: min(560px, 86vw);
  perspective: 1400px;
}
.phone {
  position: relative;
  aspect-ratio: 2.31 / 1;
  padding: 2.1%;
  border-radius: 9% / 20%;
  background: linear-gradient(160deg, #3a3c40 0%, #1d1e21 38%, #141517 70%, #2b2d31 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 0 0 3px #0c0d0e,
    0 1px 0 1px rgb(255 255 255 / 0.04);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  transform-style: preserve-3d;
  will-change: transform;
}
/* side keys on the upper edge (the phone's right side, turned to landscape) */
.phone::before, .phone::after {
  content: "";
  position: absolute;
  top: -2px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #4a4c51, #26272a);
}
.phone::before { left: 62%; width: 14%; }
.phone::after { left: 80%; width: 7%; }
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 7% / 16%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* glass: a soft reflection that drifts as the phone turns */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(calc(110deg + var(--rz)), rgb(255 255 255 / 0.13) 0%, rgb(255 255 255 / 0.03) 32%, transparent 48%);
  transform: translateX(calc(var(--ry) * 0.8));
  pointer-events: none;
}
.phone-cam {
  position: absolute;
  z-index: 1;
  left: 2.4%;
  top: 50%;
  width: 2.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 40% 40%, #2a3340 0 25%, #050607 45%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}
.phone-shadow {
  height: 26px;
  margin: 4% 10% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), transparent);
  filter: blur(6px);
}
.motion .controls-stage.shaking .phone-rig { animation: shake 0.22s linear infinite; }
.controls-caption { font-family: var(--serif); font-size: 1.6rem; min-height: 1.6em; margin: 0.8rem 0 0; color: var(--ink-2); }
.cstep { width: min(720px, 100% - 32px); margin: 2.5rem auto; }

@media (min-width: 900px) {
  .motion .controls { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .motion .controls-stage { position: sticky; top: 0; height: 100svh; justify-content: center; grid-column: 1; grid-row: 1; }
  .motion .controls-steps { grid-column: 2; grid-row: 1; padding: 30vh 0 40vh; }
  .motion .controls-steps .wrap.narrow { width: auto; margin: 0 2rem 30vh 0; }
  .motion .cstep { width: auto; min-height: 60vh; margin: 0 2rem 0 0; opacity: 0.35; transition: opacity 0.4s; }
  .motion .cstep.on { opacity: 1; }
  .motion .controls-caption { display: none; }
}
@media (max-width: 899px) {
  .motion .controls-stage { position: sticky; top: 0; z-index: 1; padding: 1.2rem 0 2.2rem; background: linear-gradient(180deg, var(--ground) calc(100% - 2.2rem), transparent); }
  .motion .controls-caption { margin-top: 0.2rem; }
  .motion .phone-rig { width: min(400px, 82vw); }
  .motion .cstep { min-height: 55vh; }
}
@keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 75% { transform: translate(3px, -2px); } }

/* ---------- full-bleed features ---------- */
.feature.full {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.feature-img { position: absolute; inset: 0; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature.full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ground) 0%, transparent 18%, transparent 45%, rgb(12 18 9 / 0.88) 100%);
}
.feature-text {
  position: relative;
  z-index: 1;
  width: min(1100px, 100% - 32px);
  margin: 0 auto 12vh;
}
.feature-text p { max-width: 36rem; font-size: 1.2rem; }
.feature.right .feature-text { text-align: right; }
.feature.right .feature-text p { margin-left: auto; }
.motion .parallax { will-change: transform; transform: scale(1.15); }

/* ---------- animals (gallery parked until the beauty renders exist, see index.html) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.card { margin: 0; background: rgb(255 255 255 / 0.04); border-radius: 14px; overflow: hidden; }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card figcaption { padding: 1rem 1.2rem 1.3rem; color: var(--ink-2); font-size: 1.02rem; }
.card strong { color: var(--ink); }

/* ---------- day and night ---------- */
.day { padding: 12vh 0; }

/* ---------- facts ---------- */
.fact {
  margin: 1.5rem 0;
  padding: 1.5rem 1.6rem;
  border-left: 4px solid var(--red);
  background: rgb(255 255 255 / 0.05);
  border-radius: 0 14px 14px 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.4;
}
.fact p { margin: 0; }
.motion .fact p.swap { animation: fadein 0.6s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fact-next, .button {
  display: inline-block;
  font: inherit;
  font-size: 1rem;
  color: var(--ground);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 0.7em 1.4em;
  cursor: pointer;
  text-decoration: none;
}
.fact-next:hover, .button:hover { background: #fff; }
.fact-next[hidden], .button[hidden] { display: none; }

/* ---------- sound, parents, status ---------- */
.sound { padding: 12vh 0; }
.sound p { font-size: 1.3rem; }
.points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.points li { padding: 1.3rem 1.4rem; background: rgb(255 255 255 / 0.05); border-radius: 14px; color: var(--ink-2); }
.points strong { color: var(--ink); }
.status { padding: 14vh 0 18vh; text-align: center; }
.alpha-note {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5em 1.2em;
  border: 1px solid rgb(243 238 220 / 0.45);
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ---------- footer and legal pages ---------- */
.foot { padding: 3rem 0 4rem; color: var(--ink-2); font-size: 0.95rem; border-top: 1px solid rgb(255 255 255 / 0.08); }
.foot p { margin: 0.3rem 0; }
.foot a { color: var(--ink-2); }
.legal { padding: 10vh 0 6vh; }
.legal h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); margin: 0.3em 0 0.6em; }
.legal h2 { font-size: 1.5rem; margin: 1.8em 0 0.4em; }
.legal .back { font-size: 1rem; }
.secret canvas { display: inline-block; vertical-align: top; }

/* ---------- reveals ---------- */
.motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.motion .reveal.in { opacity: 1; transform: none; }

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

/* ---------- scrubbed takeoff and loops ---------- */
.scrub { position: relative; }
.scrub-stage { position: relative; height: 100svh; overflow: hidden; display: grid; align-items: center; }
.scrub-poster, .scrub-poster img, .scrub-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrub-video { opacity: 0; transition: opacity 0.4s; }
.scrub.ready .scrub-video { opacity: 1; }
.scrub-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ground), transparent 25%, transparent 60%, rgb(12 18 9 / 0.7)); }
.scrub-text { position: relative; z-index: 1; width: min(1100px, 100% - 32px); margin: 0 auto; text-align: center; }
.scrub-text h2 { font-size: clamp(3rem, 1.5rem + 8vw, 8rem); margin: 0; text-shadow: 0 2px 30px rgb(0 0 0 / 0.4); }
.scrub-text p { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); margin: 0.3em 0 0; text-shadow: 0 1px 16px rgb(0 0 0 / 0.6); }
.motion .scrub { height: 320vh; }
.motion .scrub-stage { position: sticky; top: 0; }
video.loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* keep the small beetle in frame when a portrait phone crops the 16:9 still */
.descent .layer[data-layer="2"] img { object-position: 27% 60%; }