/* ── Second scroll layer ───────────────────────────────────────────────────
   Pairs with motion.js, alongside scroll-motion.css: the speed-reactive
   ticker, the aperture on the pinned craft film, and the lattice outro.
   Every rule that moves something is gated on a class motion.js adds, so
   the page without it, or under reduced motion, is the static layout. */

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

/* motion.js drives the track from here on, so the CSS loop stands down. */
.hero-ticker.is-driven .ticker-track {
  animation: none;
  will-change: transform;
}

/* ── Split-flap labels and reading fill ────────────────────────────────── */
.flap { white-space: pre; }
.scrub-word { transition: opacity 0.2s linear; }

/* ── Crossing tapes ────────────────────────────────────────────────────────
   Two bands crossed in an X between the craft wall and the interlude: red
   in English, cream in each place's own script. Unarmed they sit still at
   their resting angles; armed, motion.js runs them as belts and swings the
   pair through the crossing as the section passes. */
.tapes {
  --tape-h: clamp(64px, 8.5vw, 132px);
  position: relative;
  height: clamp(300px, 38vw, 560px);
  overflow: hidden;
  background: var(--night);
  pointer-events: none;
  user-select: none;
}

.tape {
  position: absolute;
  top: 50%;
  left: -12vw;
  right: -12vw;
  height: var(--tape-h);
  margin-top: calc(var(--tape-h) / -2);
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow:
    inset 0 3px 0 rgba(0, 15, 8, 0.16),
    inset 0 -3px 0 rgba(0, 15, 8, 0.16),
    0 22px 46px rgba(0, 0, 0, 0.4);
}

.tape-red {
  z-index: 2;
  background: var(--red);
  color: var(--night);
  rotate: -4deg;
}

.tape-cream {
  z-index: 1;
  background: var(--cream);
  color: var(--ink);
  rotate: 3deg;
}

.tapes.is-armed .tape-red { rotate: calc(-10deg + var(--swing, 0.5) * 12deg); }
.tapes.is-armed .tape-cream { rotate: calc(9deg - var(--swing, 0.5) * 12deg); }

.tape-track {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.42em;
  padding-left: 0.42em;
  font-size: calc(var(--tape-h) * 0.64);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}

.tape-track i {
  font-style: normal;
  font-size: 0.5em;
  color: var(--cream);
}

.tape-cream .tape-track i { color: var(--red); }

.tape-cream .tape-track span {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0;
}

.tape-track [lang="mr"],
.tape-track [lang="hi"] { font-family: "Noto Sans Devanagari", sans-serif; }
.tape-track [lang="ta"] { font-family: "Noto Sans Tamil", sans-serif; }

/* ── The craft: aperture on the film ───────────────────────────────────── */
.wall-stage.is-scrubbed {
  clip-path: inset(
    calc((1 - var(--open, 1)) * 18%) calc((1 - var(--open, 1)) * 24%)
    round calc((1 - var(--open, 1)) * 64px));
}

.wall-stage.is-scrubbed .reel-bg { scale: calc(1.35 - var(--open, 1) * 0.35); }

/* ── Lattice outro ─────────────────────────────────────────────────────────
   Unarmed, the finished poster on cream. Armed, the stage pins for three
   screens while the lattice draws, fills, turns over and closes up. The
   poster is the template motion.js clones onto the back of every cell. */
.lattice-outro {
  position: relative;
  background: var(--cream);
  color: var(--ink);
}

.lattice-outro.is-armed {
  height: 400svh;
  background: var(--night);
}

.lattice-stage {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.lattice-outro.is-armed .lattice-stage {
  position: sticky;
  top: 0;
  perspective: 1800px;
  background: var(--night);
}

.lattice-outro.is-armed .lattice-stage.is-poster { background: var(--cream); }

.lattice-art {
  position: absolute;
  inset: 0;
  padding: 96px var(--page) clamp(92px, 14vh, 128px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--cream);
  color: var(--ink);
}

.lattice-outro.is-armed .lattice-stage > .lattice-art { display: none; }

.lattice-art-row,
.lattice-hud {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid currentColor;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.17em;
}

.lattice-art-title {
  margin: 0;
  font-size: min(17vw, 24svh);
  font-weight: 400;
  line-height: 0.75;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.lattice-art-title span { display: block; white-space: nowrap; }

.lattice-art-title span:nth-child(2) {
  margin-left: 0.02em;
  font-size: 0.78em;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.lattice-art-title .accent { color: var(--red); }

.lattice-grid {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.lattice-cell {
  position: absolute;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* No backface-visibility: compositors disagree on how to cull faces inside
   a turning card, so motion.js shows exactly one face at a time instead. The
   back's own half-turn then cancels the card's, flattened or not. */
.lattice-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lattice-front { background: var(--night-soft) center / cover no-repeat; }

.lattice-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 15, 8, 0) 55%, rgba(0, 15, 8, 0.72) 100%);
}

.lattice-front span {
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
  bottom: 9px;
  color: var(--cream);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lattice-back {
  transform: rotateY(180deg);
  background: var(--cream);
}

/* Full-stage poster inside every back, shifted by motion.js so each cell
   shows only its own slice. */
.lattice-back .lattice-art {
  inset: auto;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
}

.lattice-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lattice-line {
  position: absolute;
  background: rgba(243, 230, 208, 0.32);
}

.lattice-line.is-v {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.lattice-line.is-h {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.lattice-node {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -6px 0 0 -6px;
  transform: scale(0);
}

.lattice-node::before,
.lattice-node::after {
  content: "";
  position: absolute;
  background: var(--red);
}

.lattice-node::before { left: 5.5px; top: 0; width: 2px; height: 13px; }
.lattice-node::after { top: 5.5px; left: 0; width: 13px; height: 2px; }

.lattice-hud {
  position: absolute;
  z-index: 3;
  top: 96px;
  left: var(--page);
  right: var(--page);
  display: none;
  color: var(--heritage);
  pointer-events: none;
}

.lattice-outro.is-armed .lattice-hud { display: flex; }
.lattice-hud b { font-weight: 400; color: var(--cream); }

/* It sits over the mosaic for a while, so it carries its own shadow. */
.lattice-hud span { text-shadow: 0 1px 10px rgba(0, 15, 8, 0.95), 0 0 2px rgba(0, 15, 8, 0.9); }

.lattice-end {
  position: absolute;
  z-index: 3;
  left: var(--page);
  right: var(--page);
  bottom: clamp(28px, 5vh, 48px);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  border-top: 1px solid var(--line-dark);
  color: var(--ink);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.17em;
}

.lattice-end .text-link { flex: none; }

/* Fades in last, but never hides from someone tabbing to it early. */
.lattice-end:focus-within { opacity: 1 !important; }

@media (max-width: 820px) {
  .lattice-art { padding-top: 88px; }
  .lattice-hud { top: 88px; }
}

/* At phone width the middle line breaks the way the hero's does, which lets
   the poster run larger and fill the height instead of shrinking to fit. */
@media (max-width: 560px) {
  .lattice-art-title { font-size: min(27vw, 20svh); }
  .lattice-art-title span { white-space: normal; }
  .lattice-art-title span:nth-child(2) { margin-left: 0; font-size: 0.82em; }
  .lattice-art-row,
  .lattice-hud,
  .lattice-end { font-size: 0.56rem; }
  .lattice-end .text-link { gap: 14px; font-size: 0.62rem; }
}