.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Rigid Reset for the Design System */
* { border-radius: 0 !important; }
body { font-family: 'Manrope', sans-serif; background-color: #FCF8F8; color: #1C1B1B; }
h1, h2, h3, h4 { font-family: 'Epilogue', sans-serif; letter-spacing: -0.02em; }

/* -------------------------------
   ANIMATIONS & EFFECTS
   ------------------------------- */
/* Marquee Noticiário */
.animate-marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.animate-marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Entrada do Hero Banner & Flutuação */
.hero-enter { opacity: 0; transform: translateY(40px); animation: heroFadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.hero-delay-1 { animation-delay: 0.2s; }
.hero-delay-2 { animation-delay: 0.4s; }
.hero-delay-3 { animation-delay: 0.6s; }

@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }

/* A classe animate-float será ativada DEPOIS da entrada via animation-composition na teoria, 
mas para garantir limpeza usaremos um wrapper de float dentro da entrada */
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-12px); } 
}

/* Base de Scroll Animation (IntersectionObserver classes) */
[data-anim] { opacity: 0; transition: all 1s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; }

[data-anim="fade-up"] { transform: translateY(50px); }
[data-anim="slide-right"] { transform: translateX(-50px); }
[data-anim="slide-left"] { transform: translateX(50px); }
[data-anim="fade-in"] { transform: scale(0.95); }
[data-anim="drop-down"] { transform: translateY(-50px); }

/* Ativação via Classe (JS injetará .is-visible) */
.is-visible[data-anim] { opacity: 1; transform: translate(0, 0) scale(1); }

/* Staggered Delays (Mistura final) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }