/* ====================================
   SCROLL ANIMATION STYLES
   ==================================== */

/* Base animation setup - hide elements initially */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* When element is visible */
.scroll-animate.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Animation Variants */
.scroll-fade-up {
    /* opacity: 0; */
    transform: translateY(60px);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.scroll-fade-down {
    opacity: 0;
    transform: translateY(-60px);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-fade-down.animated {
    opacity: 1;
    transform: translateY(0);
}

.scroll-fade-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.scroll-fade-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.scroll-zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.scroll-zoom-out {
    opacity: 0;
    transform: scale(1.2);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-zoom-out.animated {
    opacity: 1;
    transform: scale(1);
}

.scroll-rotate-in {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.scroll-flip-up {
    opacity: 0;
    transform: perspective(1000px) rotateX(-45deg);
    transform-origin: bottom;
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-flip-up.animated {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg);
}

/* Stagger delay classes for sequential animations */
.scroll-delay-1 {
    transition-delay: 0.1s;
}

.scroll-delay-2 {
    transition-delay: 0.2s;
}

.scroll-delay-3 {
    transition-delay: 0.3s;
}

.scroll-delay-4 {
    transition-delay: 0.4s;
}

.scroll-delay-5 {
    transition-delay: 0.5s;
}

.scroll-delay-6 {
    transition-delay: 0.6s;
}

/* Bounce effect */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(50px);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

.scroll-bounce {
    opacity: 0;
}

.scroll-bounce.animated {
    /* animation: bounceIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; */
}

/* Slide and fade combination */
@keyframes slideInUpFade {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.scroll-slide-fade {
    opacity: 0;
}

.scroll-slide-fade.animated {
    animation: slideInUpFade 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Elastic effect */
@keyframes elasticIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.scroll-elastic {
    opacity: 0;
}

.scroll-elastic.animated {
    animation: elasticIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Blur fade effect */
.scroll-blur-fade {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.scroll-blur-fade.animated {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Glow effect */
@keyframes glowIn {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(66, 153, 225, 0);
        transform: scale(0.9);
    }
    50% {
        box-shadow: 0 0 30px rgba(66, 153, 225, 0.5);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 0 rgba(66, 153, 225, 0);
        transform: scale(1);
    }
}

.scroll-glow {
    opacity: 0;
}

.scroll-glow.animated {
    animation: glowIn 1s ease-out forwards;
}

/* Wave effect for text */
.scroll-wave {
    display: inline-block;
}

.scroll-wave span {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
}

.scroll-wave.animated span {
    animation: waveIn 0.6s ease-out forwards;
}

@keyframes waveIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-wave.animated span:nth-child(1) { animation-delay: 0.1s; }
.scroll-wave.animated span:nth-child(2) { animation-delay: 0.15s; }
.scroll-wave.animated span:nth-child(3) { animation-delay: 0.2s; }
.scroll-wave.animated span:nth-child(4) { animation-delay: 0.25s; }
.scroll-wave.animated span:nth-child(5) { animation-delay: 0.3s; }

/* Special effects for cards */
.scroll-card-flip {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-card-flip.animated {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg);
}

/* Parallax-like scroll effect */
.scroll-parallax {
    opacity: 0;
    transform: translateY(100px) translateZ(0);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

.scroll-parallax.animated {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* Enhanced entrance for hero sections */
@keyframes heroEntrance {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
        filter: blur(5px);
    }
    60% {
        transform: translateY(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.scroll-hero {
    opacity: 0;
}

.scroll-hero.animated {
    animation: heroEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Smooth reveal effect */
@keyframes smoothReveal {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.scroll-reveal {
    opacity: 0;
}

.scroll-reveal.animated {
    animation: smoothReveal 0.9s ease-out forwards;
}

/* Performance optimization */
.scroll-animate,
.scroll-fade-up,
.scroll-fade-down,
.scroll-fade-left,
.scroll-fade-right,
.scroll-zoom-in,
.scroll-zoom-out,
.scroll-rotate-in,
.scroll-flip-up,
.scroll-bounce,
.scroll-slide-fade,
.scroll-elastic,
.scroll-blur-fade,
.scroll-glow,
.scroll-card-flip,
.scroll-parallax,
.scroll-hero,
.scroll-reveal {
    /* will-change: transform, opacity; */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}