/* "Na prática": a seção fica presa na tela e, conforme a rolagem, cada frase acende palavra por palavra.
   Primeiro a parte escura, depois o complemento verde. Um par por vez, tudo centralizado.
   Rolagem normal, com o mesmo percurso por frase do site da LMH.
   Janelas baixas: cada par acende uma vez ao aparecer, sem prender a rolagem.
   Movimento reduzido: todas as frases aparecem prontas, uma embaixo da outra. */

.historia { position: relative; background: var(--osso); padding-block: 88px; border-top: 1px solid var(--linha); }
.historia__palco { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--lateral); }
.historia__pares { display: grid; gap: 72px; }
.historia__par { text-align: center; }
.historia__par h2, .historia__par h3 { max-inline-size: 19ch; margin: 0 auto; font: 700 clamp(2.3rem, min(5.6vw, 8.6svh), 4.9rem)/1.04 var(--grot); letter-spacing: -.045em; text-wrap: balance; }
.historia__lead, .historia__resp { display: block; }
.historia__lead { --aceso: var(--tinta); color: var(--aceso); }
.historia__resp { --aceso: var(--teal-escuro); color: var(--aceso); margin-top: .28em; }
.historia__pal { display: inline-block; color: var(--aceso); }

/* "Continue descendo..." com o anel girando */
.historia__aviso { display: none; flex-shrink: 0; margin-bottom: clamp(28px, 5svh, 48px); text-align: center; }
.historia__aviso p { font-size: .95rem; color: var(--cinza-escuro); }
.historia__anel { position: relative; width: 64px; height: 64px; margin: 14px auto 0; }
.historia__anel svg { width: 100%; height: 100%; overflow: visible; animation: historia-gira 12s linear infinite; }
.historia__anel text { font: 500 10px var(--mono); letter-spacing: .8px; fill: var(--teal-texto); }
.historia__anel span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.05rem; color: var(--tinta); }
@keyframes historia-gira { to { transform: rotate(360deg); } }

/* ---------- presa na tela ---------- */
.historia--fixa { height: calc(var(--pares, 5) * 180svh + 100svh); padding: 0; }
.historia--fixa .historia__palco { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.historia--fixa .historia__aviso { display: block; }
.historia--fixa .historia__pares { gap: 0; }
.historia--fixa .historia__par { grid-area: 1 / 1; align-self: center; opacity: 0; pointer-events: none; transition: opacity 180ms ease-out; }
.historia--fixa .historia__par[data-ativo] { opacity: 1; pointer-events: auto; }
.historia--fixa .historia__pal { color: rgba(5,5,5,.12); transition: color 140ms ease-out; }
.historia--fixa .historia__pal.aceso { color: var(--aceso); }
.historia--fixa .historia__resp { opacity: 0; transition: opacity 180ms ease-out; }
.historia--fixa .tem-resp .historia__resp { opacity: 1; }

/* ---------- acende ao aparecer (janelas baixas) ---------- */
.historia--fluxo .historia__pal { color: rgba(5,5,5,.12); }
.historia--fluxo .visivel .historia__pal { animation: historia-acende 300ms ease-out var(--atraso) both; }
@keyframes historia-acende { from { color: rgba(5,5,5,.12); } to { color: var(--aceso); } }

@media (max-width: 899px) {
  .historia { padding-block: 64px; }
  .historia__pares { gap: 56px; }
  .historia__par h2, .historia__par h3 { max-inline-size: 15ch; font-size: clamp(2rem, 8.8vw, 2.7rem); line-height: 1.08; }
  .historia__resp { margin-top: .4em; }
  .historia--fixa { height: calc(var(--pares, 5) * 140svh + 100svh); padding: 0; }
  .historia__anel { width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .historia { height: auto !important; padding-block: 64px !important; }
  .historia .historia__palco { position: static; height: auto; display: block; }
  .historia .historia__aviso { display: none; }
  .historia .historia__pares { gap: 56px; }
  .historia .historia__par { grid-area: auto; opacity: 1; }
  .historia .historia__pal { animation: none; transition: none; color: var(--aceso); }
  .historia .historia__resp { opacity: 1; transition: none; }
  .historia__anel svg { animation: none; }
}