/**
 * Animation Fallback CSS
 * Ensures content is visible when GSAP fails to load
 * Also provides basic CSS fallback animations
 */

/* ============================================
   NO-JS / NO-GSAP FALLBACK
   Make all content visible immediately
   ============================================ */
.no-js *,
.no-gsap * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ============================================
   DEFAULT STATE: Hidden until animated
   (Only when GSAP is ready)
   ============================================ */
.gsap-ready .heading,
.gsap-ready .text-block-2,
.gsap-ready .flex-block-13,
.gsap-ready .flex-block-2>a,
.gsap-ready .heading-2,
.gsap-ready .text-block-5,
.gsap-ready .div-block-10,
.gsap-ready .div-block-11,
.gsap-ready .div-block-12,
.gsap-ready .slider.w-slider,
.gsap-ready .footer-dark,
.gsap-ready .nav-link,
.gsap-ready .button-7,
.gsap-ready .incos-head,
.gsap-ready .image-5 {
    /* Elements start visible - GSAP handles the from() animation */
    visibility: visible;
}

/* ============================================
   CSS-ONLY FALLBACK ANIMATIONS
   For browsers with JS disabled or GSAP failure
   ============================================ */
@media (prefers-reduced-motion: no-preference) {

    /* Simple fade-in for elements when no GSAP */
    .no-gsap .heading-2,
    .no-gsap .text-block-5 {
        animation: simpleFadeIn 0.6s ease forwards;
    }

    .no-gsap .div-block-10,
    .no-gsap .div-block-11,
    .no-gsap .div-block-12 {
        animation: simpleFadeInUp 0.6s ease forwards;
    }

    @keyframes simpleFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes simpleFadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

/* ============================================
   REDUCED MOTION PREFERENCE
   Respect user's accessibility settings
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}