/*
  Animações da landing do Gem+. Depende de tokens.css.
  O scroll reveal é ativado via IntersectionObserver (main.js) — os elementos
  com [data-reveal] começam invisíveis e ganham a classe de animação ao entrar
  na viewport.
*/

/* ---------- Reveal ao entrar na viewport (sobe + desfoca -> nítido) ----------
   Easing "expo-out": começa rápido e assenta devagar, sem freada seca.
   O delay em cascata é calculado no main.js (índice do elemento no grupo). */
:root {
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
}

@keyframes reveal-up {
  0%   { opacity: 0; transform: translateY(48px); filter: blur(16px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.animate-reveal-up,
.animate-sequential-fade-in {
  animation: reveal-up 1.1s var(--ease-soft) both;
}

@keyframes fade-in {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in 1.2s var(--ease-soft) both;
}

/* ---------- Título do hero: palavras entram uma a uma ---------- */
.hero__title .w { display: inline-block; }
@keyframes word-in {
  0%   { opacity: 0; transform: translateY(.7em) scale(.96); filter: blur(16px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.animate-title .w {
  animation: word-in 1s var(--ease-soft) both;
}
.animate-title .w:nth-child(1) { animation-delay: .1s; }
.animate-title .w:nth-child(2) { animation-delay: .19s; }
.animate-title .w:nth-child(3) { animation-delay: .28s; }
.animate-title .w:nth-child(4) { animation-delay: .37s; }
.animate-title .w:nth-child(5) { animation-delay: .52s; }
.animate-title .w:nth-child(6) { animation-delay: .61s; }

/* ---------- Blur ao rolar (blocos internos) ----------
   O blur do hero ao rolar é feito no main.js (funciona em todo navegador);
   aqui só os blocos internos, onde houver suporte a scroll timeline. */
@supports (animation-timeline: view()) {
  .features-grid,
  .steps,
  .plans {
    animation: scroll-exit-blur linear both;
    animation-timeline: view();
    animation-range: exit 10% exit 90%;
  }
}
@keyframes scroll-exit-blur {
  to { opacity: .08; filter: blur(14px); }
}

/* ---------- Sublinhado deslizante em links ---------- */
.link-underline {
  position: relative;
  text-decoration: none;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path var(--t-base) var(--ease-out);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}