/* Scroll Animation Styles */

/* Base animation states */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-right.animated {
    opacity: 1;
    transform: translateX(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.fade-in.animated {
    opacity: 1;
}

/* Scale animations */
.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.animated {
    opacity: 1;
    transform: scale(1);
}

/* Stagger animations for grid items */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.stagger-item.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Add delays for stagger effect */
.stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-item:nth-child(5) { transition-delay: 0.5s; }
.stagger-item:nth-child(6) { transition-delay: 0.6s; }
.stagger-item:nth-child(7) { transition-delay: 0.7s; }
.stagger-item:nth-child(8) { transition-delay: 0.8s; }
.stagger-item:nth-child(9) { transition-delay: 0.9s; }

/* Slide animations */
.slide-in-bottom {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-bottom.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Rotate animations */
.rotate-in {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.rotate-in.animated {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Counter animation */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.counter-animate {
    animation: countUp 0.8s ease-out forwards;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .fade-in,
    .scale-in,
    .stagger-item,
    .slide-in-bottom,
    .rotate-in {
        transition: none;
        opacity: 1;
        transform: none;
    }
}