/* ==========================================================================
   ANIMAÇÕES — revelações no scroll, text reveal, parallax e microinterações
   Todas as classes começam ocultas apenas quando o JS está ativo
   (`html.js`), garantindo conteúdo visível sem JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reveal genérico — fade + subida
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s var(--e-out) var(--delay, 0ms),
    transform 0.85s var(--e-out) var(--delay, 0ms),
    filter 0.85s var(--e-out) var(--delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="blur"] { filter: blur(10px); transform: translateY(20px); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }

.js [data-reveal].is-in {
  opacity: 1;
  filter: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   2. Text reveal — linhas que sobem por trás de uma máscara
   -------------------------------------------------------------------------- */
/* A máscara precisa de folga embaixo: sem ela o overflow:hidden corta as
   descendentes ("q", "ç") da serifada de display. */
.js [data-text-reveal] .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.28em;
  margin-bottom: -0.28em;
}
.js [data-text-reveal] .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--e-out);
  transition-delay: calc(var(--i, 0) * 90ms + var(--delay, 0ms));
  will-change: transform;
}
.js [data-text-reveal].is-in .line > span { transform: translateY(0); }

/* Palavra a palavra (usado no manifesto da seção Sobre) */
.js [data-words] .word {
  display: inline-block;
  opacity: 0.16;
  transition: opacity 0.5s var(--e-out);
  transition-delay: calc(var(--i, 0) * 26ms);
}
.js [data-words].is-in .word { opacity: 1; }

/* --------------------------------------------------------------------------
   3. Parallax — o JS escreve --py em px
   -------------------------------------------------------------------------- */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Micro-animações contínuas
   -------------------------------------------------------------------------- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}
.float-soft { animation: float-soft 7s var(--e-in-out) infinite; }
.float-soft--slow { animation-duration: 9.5s; animation-delay: -2s; }
.float-soft--fast { animation-duration: 5.5s; animation-delay: -1s; }

@keyframes pulse-ring {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid currentColor;
  animation: pulse-ring 2.4s var(--e-out) infinite;
  pointer-events: none;
}

/* Gradiente que respira — usado em detalhes, nunca em blocos inteiros */
@keyframes hue-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.gradient-text {
  background: linear-gradient(100deg, var(--ink), var(--accent), var(--ink));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-drift 9s var(--e-in-out) infinite;
}

/* --------------------------------------------------------------------------
   5. Contador numérico
   -------------------------------------------------------------------------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   6. Respeito total a prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-text-reveal] .line > span,
  .js [data-words] .word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  [data-parallax] { transform: none !important; }
  .float-soft, .pulse::after, .gradient-text { animation: none !important; }
  .marquee__track { animation: none !important; }
}