/* ============================================================
   ANIMATIONS — um sistema só. Keyframes + classes utilitárias.
   Disparadas por animations.js (IntersectionObserver → .visivel).
   Anima só transform e opacity.
   ============================================================ */

.animar { opacity: 0; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; }
.fade-up   { transform: translateY(32px); }
.fade-in   { transform: none; }
.fade-esq  { transform: translateX(-40px); }
.fade-dir  { transform: translateX(40px); }
.escala    { transform: scale(0.94); }

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

.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }

/* --- Marcas flutuantes da colagem (decorativas, só transform) --- */
@keyframes flutuar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
@keyframes balancar {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(5deg); }
}
.flutuar { animation: flutuar var(--dur-flutuar) ease-in-out infinite; }
.flutuar--lento { animation-duration: calc(var(--dur-flutuar) * 1.6); }
.balancar { animation: balancar var(--dur-balanco) ease-in-out infinite; }

/* Respeita quem pede menos movimento: tudo aparece sem animar. */
@media (prefers-reduced-motion: reduce) {
    .animar { opacity: 1 !important; transform: none !important; transition: none !important; }
    .flutuar, .balancar { animation: none !important; }
    html { scroll-behavior: auto; }
}