/* Advanced Scroll Animations for Homepage */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Base Animation Classes */
.scroll-animate {
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.scroll-animate.active {
    opacity: 1;
}

/* Fade Animations */
.fade-in-up {
    transform: translateY(60px);
}

.fade-in-up.active {
    transform: translateY(0);
}

.fade-in-down {
    transform: translateY(-60px);
}

.fade-in-down.active {
    transform: translateY(0);
}

.fade-in-left {
    transform: translateX(-60px);
}

.fade-in-left.active {
    transform: translateX(0);
}

.fade-in-right {
    transform: translateX(60px);
}

.fade-in-right.active {
    transform: translateX(0);
}

/* Zoom Animations */
.zoom-in {
    transform: scale(0.8);
}

.zoom-in.active {
    transform: scale(1);
}

.zoom-out {
    transform: scale(1.2);
}

.zoom-out.active {
    transform: scale(1);
}

/* Rotate Animations */
.rotate-in {
    transform: rotate(-15deg) scale(0.8);
}

.rotate-in.active {
    transform: rotate(0deg) scale(1);
}

.rotate-in-left {
    transform: rotate(-180deg) scale(0.5);
    transform-origin: left center;
}

.rotate-in-left.active {
    transform: rotate(0deg) scale(1);
}

.rotate-in-right {
    transform: rotate(180deg) scale(0.5);
    transform-origin: right center;
}

.rotate-in-right.active {
    transform: rotate(0deg) scale(1);
}

/* Flip Animations */
.flip-in-x {
    transform: perspective(1000px) rotateX(-90deg);
    transform-origin: center;
}

.flip-in-x.active {
    transform: perspective(1000px) rotateX(0deg);
}

.flip-in-y {
    transform: perspective(1000px) rotateY(-90deg);
    transform-origin: center;
}

.flip-in-y.active {
    transform: perspective(1000px) rotateY(0deg);
}

/* Bounce Animations */
.bounce-in {
    transform: scale(0.3);
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in.active {
    transform: scale(1);
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bounce-in-animated.active {
    animation: bounceIn 1.5s ease-out;
}

/* Slide & Fade */
.slide-fade-up {
    transform: translateY(100px);
    opacity: 0;
}

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

.slide-fade-down {
    transform: translateY(-100px);
    opacity: 0;
}

.slide-fade-down.active {
    transform: translateY(0);
    opacity: 1;
}

.slide-fade-left {
    transform: translateX(-100px);
    opacity: 0;
}

.slide-fade-left.active {
    transform: translateX(0);
    opacity: 1;
}

.slide-fade-right {
    transform: translateX(100px);
    opacity: 0;
}

.slide-fade-right.active {
    transform: translateX(0);
    opacity: 1;
}

/* Blur Animations */
.blur-in {
    filter: blur(10px);
    opacity: 0;
}

.blur-in.active {
    filter: blur(0);
    opacity: 1;
}

/* Skew Animations */
.skew-in {
    transform: skewX(-20deg) translateX(-50px);
    opacity: 0;
}

.skew-in.active {
    transform: skewX(0deg) translateX(0);
    opacity: 1;
}

/* Stagger Delays */
.delay-50 { transition-delay: 0.05s; }
.delay-100 { transition-delay: 0.1s; }
.delay-150 { transition-delay: 0.15s; }
.delay-200 { transition-delay: 0.2s; }
.delay-250 { transition-delay: 0.25s; }
.delay-300 { transition-delay: 0.3s; }
.delay-350 { transition-delay: 0.35s; }
.delay-400 { transition-delay: 0.4s; }
.delay-450 { transition-delay: 0.45s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }
.delay-900 { transition-delay: 0.9s; }
.delay-1000 { transition-delay: 1s; }

/* Glow Effects */
.glow-on-scroll {
    transition: box-shadow 1s ease;
}

.glow-on-scroll.active {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}

.glow-green.active {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}

.glow-orange.active {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
}

.glow-red.active {
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse-on-scroll.active {
    animation: pulse 3s ease-in-out infinite;
}

/* Shake Animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake-on-scroll.active {
    animation: shake 1s ease-in-out;
}

/* Swing Animation */
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.swing-on-scroll.active {
    animation: swing 1.8s ease-in-out;
    transform-origin: top center;
}

/* Rubber Band Animation */
@keyframes rubberBand {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }
    50% {
        transform: scaleX(1.15) scaleY(0.85);
    }
    65% {
        transform: scaleX(0.95) scaleY(1.05);
    }
    75% {
        transform: scaleX(1.05) scaleY(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.rubber-band.active {
    animation: rubberBand 1.5s ease-in-out;
}

/* Parallax Effect */
.parallax-slow {
    transition: transform 1s ease-out;
}

.parallax-medium {
    transition: transform 0.7s ease-out;
}

.parallax-fast {
    transition: transform 0.4s ease-out;
}

/* Hover Enhancements */
.hover-lift {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.hover-scale {
    transition: transform 0.5s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-rotate {
    transition: transform 0.5s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* Text Animations */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 1s ease;
}

.text-reveal.active span {
    opacity: 1;
    transform: translateY(0);
}

/* Gradient Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 5s ease infinite;
}

/* Performance Optimizations */
.scroll-animate,
.parallax-slow,
.parallax-medium,
.parallax-fast {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-animate {
        opacity: 1;
        transform: none;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .scroll-animate {
        transition-duration: 1.2s;
    }
    
    .fade-in-up,
    .fade-in-down,
    .fade-in-left,
    .fade-in-right {
        transform: translateY(30px);
    }
    
    .fade-in-up.active,
    .fade-in-down.active,
    .fade-in-left.active,
    .fade-in-right.active {
        transform: translateY(0);
    }
}