/* ==========================================================================
   GSAP Entrance Animations
   ========================================================================== */

/* Base animation setup */
.animate-on-scroll {
    opacity: 0.001; /* Prevent Lighthouse NO_LCP error while hiding content */
    min-height: 1px; /* Prevent layout shift */
    visibility: visible;
    will-change: opacity, transform;
    /* Hardware acceleration */
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Animation type classes (GSAP sets initial states dynamically) */
.animate-fade-in,
.animate-fade-up,
.animate-fade-down,
.animate-fade-left,
.animate-fade-right,
.animate-scale-up,
.animate-rotate-in {
    /* Placeholder classes - GSAP handles all initial states */
}

/* Active state class (available for additional styling) */
.animate-on-scroll.animation-active {
    /* Optional: Add any post-animation styles here */
}

/* Duration utility classes (read by JavaScript) */
.duration-100,
.duration-200,
.duration-300,
.duration-400,
.duration-500,
.duration-600,
.duration-700,
.duration-800,
.duration-900,
.duration-1000,
.duration-1200,
.duration-1500,
.duration-2000 {
    /* Duration values are read by GSAP JavaScript */
}

/* Delay utility classes (read by JavaScript) */
.delay-100,
.delay-200,
.delay-300,
.delay-400,
.delay-500,
.delay-600,
.delay-700,
.delay-800 {
    /* Delay values are read by GSAP JavaScript */
}

/* Animation wrapper for maintaining element spacing */
.animation-wrapper {
    min-height: 1px;
}

/* Stagger animation support (CSS fallback) */


/* ==========================================================================
   Accessibility & Fallbacks
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* CSS fallback animations (when GSAP is not available) */
.gsap-not-available .animate-fade-in {
    opacity: 0.001;
    animation: fadeIn 0.8s ease-out forwards;
}

.gsap-not-available .animate-fade-up {
    opacity: 0.001;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease-out forwards;
}

.gsap-not-available .animate-fade-left {
    opacity: 0.001;
    transform: translateX(-30px);
    animation: fadeLeft 0.8s ease-out forwards;
}

.gsap-not-available .animate-fade-right {
    opacity: 0.001;
    transform: translateX(30px);
    animation: fadeRight 0.8s ease-out forwards;
}

/* Fallback keyframes */
@keyframes fadeIn {
    to { opacity: 1; }
}

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

@keyframes fadeLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}