/* ------------------------------------------------------------------
   Pinned stage: image sequence hero → dot → white disc → moon → fill
   Scroll-linked values are set by js/stage.js; class toggles here:
     .is-grown   white disc has expanded ("With focus on")
     .is-moon    black disc with the three words is showing
     .is-filled  black disc covers the viewport
     .is-init    first paint, transitions disabled
   ------------------------------------------------------------------ */
.stage-section {
  position: relative;
  height: calc(100vh + var(--stage-travel) * 100vh);
  background: var(--black);
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--black);
}
.stage.is-init * { transition: none !important; }

/* Sequence canvas + poster (frame 0 until the canvas has drawn) */
.stage__canvas,
.stage__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage__poster {
  object-fit: cover;
  transform: scale(var(--seq-zoom));
  transform-origin: center;
}
.stage__poster[hidden] { display: none; }

/* Title, bottom-left, moved upward by scroll */
.hero-title {
  position: absolute;
  left: calc(40 * var(--u));
  bottom: 9vh;
  z-index: 3;
  color: var(--black);
  text-transform: uppercase;
  font-weight: 300;
  will-change: transform;
}
.hero-title__kicker {
  display: block;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  letter-spacing: 0.45em;
  line-height: 1;
  margin: 0 0 calc(10 * var(--u)) 0.7em; /* optically aligned with the D stem below */
}
.hero-title__word {
  display: block;
  font-size: calc(190 * var(--u));
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 0.95;
  margin-left: 0;
  white-space: nowrap;
}

/* White dot that rises to the centre */
.dot {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border-radius: 50%;
  background: var(--white);
  transform: translate3d(0, 200vh, 0);
  will-change: transform;
}
.stage.is-grown .dot { opacity: 0; }

/* White disc revealing "With focus on"; grows leftward with its right edge anchored */
.disc {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--white);
  opacity: 0;
  clip-path: circle(19px at 50% 47%);
  transition: clip-path 1.2s cubic-bezier(0.45, 0, 0.55, 1);
}
.stage.is-grown .disc {
  opacity: 1;
  clip-path: circle(150vw at -95vw 47vh);
}
.focus-lead {
  position: absolute;
  left: 40.5vw;
  top: 47vh;
  margin: 0;
  font-size: calc(36 * var(--u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--black);
  opacity: 0.3;
  transform: translate3d(0, -50%, 0);
  transition: opacity 1.2s ease;
  will-change: transform;
}
.stage.is-grown .focus-lead { opacity: 1; }

/* Black disc ("moon") with the three words; later fills the viewport */
.moon {
  --r: 42vw;
  position: absolute;
  z-index: 6;
  width: calc(2 * var(--r));
  height: calc(2 * var(--r));
  left: calc(80vw - var(--r));
  top: calc(45vh - var(--r));
  border-radius: 50%;
  background: var(--black);
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.stage.is-moon .moon { transform: scale(1); }
.stage.is-filled .moon {
  transform: scale(3.4);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.7, 0.2);
}

.focus-words {
  position: absolute;
  z-index: 7;
  left: 44vw;
  top: 44vh;
  transform: translate3d(0, -50%, 0);
  will-change: transform;
}
.focus-words__list {
  color: var(--white);
  font-size: calc(52 * var(--u));
  font-weight: 500;
  line-height: 1.1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.stage.is-moon .focus-words__list { opacity: 1; }