/* ============================================================
   CINEMATIC HERO — centered SOIL → SOIL Physics scroll reveal
   Themed via tokens; works in light & dark.
   ============================================================ */

/* Hide the site chrome until the intro has played (home page only) */
body.cine-home .site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  transform: translateY(-115%); opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}

.cine-hero{ position: relative; height: 340vh; margin: 0; background: var(--bg); }
.cine-sticky{
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 4vw; box-sizing: border-box;
}

/* Title: one line in, one line out */
.cine-title{
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(0.82rem, 3vw, 2.8rem); line-height: 1.16; margin: 0; white-space: nowrap;
  --capmix: 0;   /* 0 = accent (highlight the acronym) · 1 = ink (settled) — driven by JS */
}
.cine-title > span{
  display: inline-block; vertical-align: bottom; overflow: hidden;
  line-height: 1; padding-bottom: .18em; white-space: nowrap;   /* room for descenders */
}
.cine-title .cap{ font-weight: 700; will-change: color;
  color: color-mix(in srgb, var(--ink) calc(var(--capmix) * 100%), var(--accent)); }
.cine-title .tail, .cine-title .sep, .cine-title .physics{ will-change: max-width, opacity; }
.cine-title .recur{ color: var(--accent); font-weight: 700; }
.cine-title .physics{ color: var(--ink-muted); font-weight: 400; will-change: max-width, opacity, transform;
  max-width: 0; opacity: 0; }

/* Sub-line: shared slot for the recursion note, then the tagline */
.cine-sub{ position: relative; width: 100%; min-height: 2.2em; margin-top: clamp(.5rem, 1.4vh, 1rem); }
.cine-sub > *{ position: absolute; left: 0; right: 0; top: 0; margin: 0; }
.cine-recur-note{
  display: flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent);
  opacity: 0; will-change: opacity, transform;
}
.cine-recur-note svg{ width: 1em; height: 1em; }
.cine-tagline{
  font-family: var(--font-sans); font-weight: 400; color: var(--ink-muted);
  font-size: clamp(.95rem, 1.5vw, 1.25rem); line-height: 1.5; opacity: 0; will-change: opacity, transform;
}
.cine-tagline strong{ color: var(--accent); font-weight: 600; }
.cine-hero:not(.cine-tagline-on) .cine-tagline{ display: none; }

/* Soil specimen: centered, starts small, grows + drifts toward viewer */
.cine-figure{ margin: clamp(1.2rem, 4vh, 2.6rem) 0 0; transform-origin: center top; will-change: transform; }
.cine-soil{ width: clamp(190px, 30vw, 440px); height: auto; max-height: 46vh; object-fit: contain; }
@media (max-width: 600px){ .cine-soil{ width: clamp(150px, 56vw, 300px); } }

.cine-cue{
  position: absolute; left: 50%; bottom: 3.2vh; transform: translateX(-50%); z-index: 3; text-align: center;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-faint);
  will-change: opacity;
}
.cine-cue .chev{ display: block; margin-top: .5em; font-size: 1rem; animation: cineBob 1.8s ease-in-out infinite; }
@keyframes cineBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(7px); } }

@media (prefers-reduced-motion: reduce){ .cine-cue .chev{ animation: none; } }