/* ————————————————————————————————————————————————
   CARMONA — site, versão 3
   Direção de arte em movimento, sobre as pranchas da v2.
   Regras de movimento desta versão:
   · só movimento com física real ou com a mão de quem faz
     (quique, marca, vassoura, traço, linha pintada);
   · um gesto por seção, nunca decoração;
   · com "reduzir movimento" ligado, o site aparece parado
     e completo.
   ———————————————————————————————————————————————— */

/* — Progresso de leitura: a linha de fundo sendo pintada — */
.bar{ position:sticky; }
.progresso{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--terracota); transform:scaleX(0); transform-origin:left;
}
.reduz .progresso{ display:none; }

/* ————————————————— Abertura ————————————————— */
.hero3{
  position:relative; height:calc(100svh - 58px); min-height:560px;
  overflow:hidden; background:var(--saibro-claro);
}
.hero3 canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  cursor:crosshair; touch-action:pan-y;
}
.hero3__txt{
  position:absolute; left:0; right:0; bottom:0; pointer-events:none;
  max-width:var(--width-shell); margin:0 auto;
  padding:0 var(--space-section) var(--space-block);
}
.hero3 h1,.hero3__frase{
  font-family:var(--font-serif); font-weight:var(--weight-serif-regular);
  font-size:var(--size-display); line-height:var(--leading-display);
  letter-spacing:var(--track-title); color:var(--tinta); max-width:13ch; margin:0;
}
.hero3 .sub{ color:var(--tinta); margin-top:var(--space-md); }
.hero3__fase2{ display:none; }
.js .hero3__fase2{ display:block; opacity:0; }
.reduz .hero3__fase2{ display:none; }

.hero3__dica{
  position:absolute; right:var(--space-section); top:var(--space-lg); margin:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-micro);
  font-family:var(--font-sans); font-size:var(--size-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--tinta);
  pointer-events:none;
}
.js:not(.reduz) .hero3__dica{ opacity:0; }
.reduz .hero3__dica span:last-child{ display:none; }

/* texto começa escondido só quando o JS vai revelá-lo */
.js:not(.reduz) .hero3__fase1{ visibility:hidden; }

/* — Revelação de título por linha (SplitText cria as máscaras) — */
[data-titulo]{ will-change:auto; }

/* — Caixa de vidro: o saibro sobe — */
.enche{ transform-box:fill-box; transform-origin:50% 100%; }

/* — Linha do tempo: linha real, pintada na rolagem — */
.tempo::before{ display:none; }
.tempo .tempo__linha{
  position:absolute; left:0; right:0; top:9px; height:3px;
  background:var(--tinta); transform-origin:left;
}

/* ————————————————— Responsivo ————————————————— */
@media (max-width:760px){
  .hero3{ min-height:520px; }
  .hero3__txt{ padding:0 var(--space-md) var(--space-lg-xl); }
  .hero3 h1,.hero3__frase{ font-size:48px; }
  .hero3__dica{ right:var(--space-md); top:var(--space-md); }
  .tempo .tempo__linha{ left:9px; right:auto; top:0; bottom:0; width:3px; height:auto; transform-origin:top; }
}
@media (max-width:420px){
  .hero3 h1,.hero3__frase{ font-size:42px; }
}

/* a linha é um li fora do fluxo: sem tique, sem recuo */
.tempo .tempo__linha{ padding:0; }
.tempo .tempo__linha::before{ display:none; }