/* Posição fixa: três frases se sucedem (3 × 90vh + 100vh); cada palavra
   acende pelo progresso e um indicador de três pontos marca a vez. */

.stance { --n: 3; --pin: 1; padding-block: 140px; }
.stance__stage { display: grid; gap: 40px; justify-items: center; text-align: center; }
.stance__sentence {
  max-width: 22ch;
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 380;
  font-variation-settings: "opsz" 72;
  font-size: clamp(32px, 0.9rem + 3.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.stance__steps { display: none; }

.has-motion .stance { --pin: 0; height: calc(var(--n) * 90vh + 100vh); padding-block: 0; }
.has-motion .stance__sticky {
  position: sticky;
  top: 0;
  display: grid;
  align-items: center;
  min-height: 100svh;
  background: radial-gradient(48% 42%, color-mix(in srgb, var(--sage) 30%, transparent), transparent);
}
.has-motion .stance__stage { grid-template-areas: "stage" "steps"; }
.has-motion .stance__sentence {
  --raw: calc(var(--pin) * var(--n) - var(--i));
  --in: clamp(0, calc((var(--raw) - 0.06) * 12), 1);
  --out: clamp(0, calc((var(--raw) - 0.8) * 7.5), 1);
  grid-area: stage;
  opacity: calc(var(--in) * (1 - var(--out)));
  transform: translateY(calc(var(--out) * -3rem + (1 - var(--in)) * 1.5rem));
}
.has-motion .stance__sentence[data-state="future"],
.has-motion .stance__sentence[data-state="past"] { visibility: hidden; }
.has-motion .stance__sentence--last { --out: 0; }
.has-motion .stance__sentence .w { opacity: calc(0.12 + clamp(0, calc((var(--raw) * 1.35 - var(--at)) * 7), 1) * 0.88); }
.has-motion .stance__steps { grid-area: steps; display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.has-motion .stance__steps li {
  --on: clamp(0, calc((var(--pin) * var(--n) - var(--i)) * 12), 1);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sun) calc(var(--on) * 100%), color-mix(in srgb, var(--ink) 25%, transparent));
}