/* Scroll Animation Base States */
.scroll-reveal-left,
.scroll-reveal-right,
.scroll-reveal-fade {
    opacity: 0;
    visibility: visible;
    will-change: opacity, transform;
}

/* Initial Transform States */
.scroll-reveal-left {
    transform: translateX(-50px);
}

.scroll-reveal-right {
    transform: translateX(50px);
}

/* Active States (Applied by JavaScript) */
.scroll-reveal-left.active,
.scroll-reveal-right.active,
.scroll-reveal-fade.active {
    opacity: 1;
    transform: translateX(0);
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-fade.active {
    transition-delay: var(--delay, 0ms);
}

/* Staggered Delays for Stats */
.scroll-reveal-fade[data-index="1"] { --delay: 200ms; }
.scroll-reveal-fade[data-index="2"] { --delay: 400ms; }
.scroll-reveal-fade[data-index="3"] { --delay: 600ms; }
.scroll-reveal-fade[data-index="4"] { --delay: 800ms; }

/* Counter Animation Styles */
.counter-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.counter-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure text is visible during animations */
[class*="scroll-reveal"] {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Prevent Flash of Invisible Text */
.scroll-reveal-left,
.scroll-reveal-right,
.scroll-reveal-fade {
    opacity: 0 !important;
}

.scroll-reveal-left.active,
.scroll-reveal-right.active,
.scroll-reveal-fade.active {
    opacity: 1 !important;
}