/* ===========================================================
   TEXT ROLL — hover que "gira" as letras
   Cada letra vira uma coluna com DUAS cópias empilhadas; no
   hover a coluna sobe metade da altura, então a cópia de baixo
   toma o lugar. O --d (stagger por letra) faz a ondinha.
   As letras são geradas por scripts/roll.js.
   =========================================================== */
.roll{
  display:inline-block;
  overflow:hidden;
  height:1.15em;          /* uma linha; folga p/ acentos e descendentes */
  vertical-align:bottom;
  line-height:1.15em;
}

.roll__col{
  display:flex;
  flex-direction:column;
  /* spring (≈ Time .8 / Bounce .2 do Framer): overshoot leve no fim */
  transition:transform .6s cubic-bezier(.42,1.4,.5,1);
  transition-delay:var(--d,0ms);
}

.roll__c{
  display:block;
  height:1.15em;
  line-height:1.15em;
}

/* dispara ao passar o mouse (ou focar) no LINK inteiro → todas as
   letras giram, cada uma no seu tempo */
.nav__links a:hover .roll__col,
.nav__links a:focus-visible .roll__col,
.footer__links a:hover .roll__col,
.footer__links a:focus-visible .roll__col{
  transform:translateY(-50%);
}

@media (prefers-reduced-motion:reduce){
  .roll__col{transition:none;}
  .nav__links a:hover .roll__col,
  .footer__links a:hover .roll__col{transform:none;}
}