/* ==================================================================
   animations.css — motion design com propósito
   Entradas suaves, feedback de toque e transições curtas.
   ================================================================== */

@keyframes brilho {
  100% {
    transform: translateX(100%);
  }
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes clarear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Entrada da página */
.pagina {
  animation: clarear var(--lento) var(--curva) both;
}

/* Elementos que entram ao aparecer na tela (ativado por main.js) */
.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}

.revelar.visivel {
  opacity: 1;
  transform: none;
}

.revelar:nth-child(2) {
  transition-delay: 60ms;
}

.revelar:nth-child(3) {
  transition-delay: 120ms;
}

.revelar:nth-child(4) {
  transition-delay: 180ms;
}

.revelar:nth-child(5) {
  transition-delay: 240ms;
}

.revelar:nth-child(6) {
  transition-delay: 300ms;
}

/* Hero: entrada imediata e discreta */
.hero__foto,
.hero__texto {
  animation: surgir var(--lento) var(--curva) both;
}

.hero__texto {
  animation-delay: 90ms;
}

/* Estado de carregamento de botão */
.botao--carregando {
  pointer-events: none;
  opacity: 0.85;
}

.botao--carregando::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: girar 700ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* Respeito total à preferência de menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .revelar {
    opacity: 1;
    transform: none;
  }
}