/* ══════════════════════════════════════════════════════════
   ANIMATIONS — todos os keyframes e classes de animação.
   Ativação: animations.js adiciona .visivel via IntersectionObserver.
   Efeitos muito específicos de componentes vivem em components/.
   ══════════════════════════════════════════════════════════ */

/* ── Keyframes base ─────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes revealMask {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes riseBlur {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ── Sistema de classes utilitárias ─────────────────────── */
/* Uso: class="animar fade-up" — o JS adiciona .visivel na entrada.
   O estado inicial invisível só se aplica com JS ativo (html.js),
   garantindo que o conteúdo nunca fique oculto sem JavaScript. */
html.js .animar {
  opacity: 0;
  will-change: transform, opacity;
}
.animar.visivel {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-duration: 0.8s;
}
.animar.fade-up.visivel     { animation-name: fadeUp; }
.animar.fade-in.visivel     { animation-name: fadeIn; }
.animar.slide-left.visivel  { animation-name: slideLeft; }
.animar.slide-right.visivel { animation-name: slideRight; }
.animar.scale-in.visivel    { animation-name: scaleIn; }
.animar.reveal.visivel      { animation-name: revealMask; }
.animar.rise-blur.visivel   { animation-name: riseBlur; }

/* ── Delays para sequências ─────────────────────────────── */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.35s; }
.delay-4 { animation-delay: 0.5s; }
.delay-5 { animation-delay: 0.7s; }

/* ── Respeito à preferência do usuário ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animar,
  .animar.visivel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}