/* ==========================================================================
   GJOTTA — MOVIMENTO
   Keyframes e utilitarios de animacao.

   REGRA: nenhuma animacao pode esconder conteudo de forma permanente.
   Quem tem `prefers-reduced-motion: reduce` ligado ve tudo, parado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(1.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes beat {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.45);
    opacity: 0.6;
  }
}

@keyframes eq-bounce {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes ken-burns {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(0, -1.5%, 0);
  }
}

@keyframes load-bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Saida da tela de abertura — ver .loader em components.css */
@keyframes loader-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes drift-down {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* --------------------------------------------------------------------------
   Revelacao no scroll
   O JS adiciona `.is-visible` quando o elemento entra na tela.
   O `no-js` no <html> garante que sem JavaScript tudo aparece normalmente.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal='left'] {
  transform: translateX(-1.75rem);
}

[data-reveal='right'] {
  transform: translateX(1.75rem);
}

[data-reveal='scale'] {
  transform: scale(0.94);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Sem JavaScript: mostra tudo */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Entrada em cascata (o JS calcula o atraso de cada filho)
   -------------------------------------------------------------------------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

.no-js [data-stagger] > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Parallax
   O JS escreve --parallax (em px) conforme a rolagem.
   -------------------------------------------------------------------------- */
[data-parallax] {
  transform: translate3d(0, var(--parallax, 0), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Desliga animacoes decorativas continuas quando pedido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .glow,
  .eq span,
  .logo-dot,
  .tag--live::before,
  .marquee__track,
  .hero__media img,
  .loader__bar i {
    animation: none !important;
  }

  .marquee__track {
    /* sem animacao, mostra so o comeco da faixa */
    transform: none;
  }

  /*
    A tela de abertura continua animada de proposito: e a animacao que
    tira ela da frente. So fica instantanea.
  */
  .loader {
    transition: none;
    animation-duration: 1ms;
    animation-delay: 200ms;
  }
}