/* ========================================
   Animation Fallback CSS
   Garante visibilidade se JavaScript falhar
   Usado em conjunto com GSAP/AOS
   ======================================== */

/* Fallback keyframe - torna elementos visíveis após 3s */
@keyframes fallback-reveal {
    to {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}

/* Classes de animação GSAP - Estado inicial */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-rotate,
.reveal,
.fade-in,
.slide-in-left,
.slide-in-right,
.scale-in,
.stagger-card,
.stagger-item,
.stagger-child {
    opacity: 0;
    animation: fallback-reveal 0.5s 3.5s forwards;
}

.reveal-up { transform: translateY(50px); }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-scale { transform: scale(0.8); }
.reveal-rotate { transform: rotate(-10deg) scale(0.9); }
.reveal { transform: translateY(50px); }
.fade-in { transform: translateY(30px); }
.slide-in-left { transform: translateX(-50px); }
.slide-in-right { transform: translateX(50px); }
.scale-in { transform: scale(0.9); }
.stagger-card { transform: translateY(40px); }
.stagger-item { transform: translateY(30px); }
.stagger-child { transform: translateY(30px); }

/* Estado revelado - quando JS adiciona a classe */
.revealed,
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed,
.reveal.revealed {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* AOS fallback - elementos com data-aos */
[data-aos] {
    opacity: 0;
    animation: fallback-reveal 0.5s 3.5s forwards;
}

[data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Quando JS carrega, remove o fallback */
.js-loaded .reveal-up,
.js-loaded .reveal-left,
.js-loaded .reveal-right,
.js-loaded .reveal-scale,
.js-loaded .reveal-rotate,
.js-loaded .reveal,
.js-loaded .fade-in,
.js-loaded .slide-in-left,
.js-loaded .slide-in-right,
.js-loaded .scale-in,
.js-loaded .stagger-card,
.js-loaded .stagger-item,
.js-loaded .stagger-child,
.js-loaded [data-aos] {
    animation: none;
}

/* Preloader/Loader - sempre deve ter fallback */
.preloader,
#preloader,
.loader,
#loader {
    transition: opacity 0.5s, visibility 0.5s;
}

.preloader.hidden,
#preloader.hidden,
.loader.hidden,
#loader.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Fallback para preloader/loader - esconde após 5s se JS falhar */
@keyframes preloader-fallback {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.preloader:not(.hidden),
#preloader:not(.hidden),
.loader:not(.hidden),
#loader:not(.hidden) {
    animation: preloader-fallback 0.5s 5s forwards;
}

/* Reduced motion - respeita preferência do usuário */
@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-rotate,
    .reveal,
    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .stagger-card,
    .stagger-item,
    .stagger-child,
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}