/* PROFESSIONAL LANDING PAGE ANIMATIONS - XPANDSIA */

/* Base Animation Classes with Premium Easing */
.fade-in {
    opacity: 0;
    animation: fadeInPremium 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-up {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUpPremium 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-down {
    opacity: 0;
    transform: translateY(-50px);
    animation: fadeDownPremium 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: fadeLeftPremium 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-right {
    opacity: 0;
    transform: translateX(50px);
    animation: fadeRightPremium 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.scale-in {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
    animation: scaleInPremium 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-up {
    opacity: 0;
    transform: translateY(80px);
    animation: slideUpPremium 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Advanced Animation Classes */
.fade-in-blur {
    opacity: 0;
    filter: blur(10px);
    animation: fadeInBlur 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.zoom-in {
    opacity: 0;
    transform: scale(0.5) rotate(-5deg);
    animation: zoomInRotate 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in-bounce {
    opacity: 0;
    transform: translateY(100px);
    animation: slideInBounce 1.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.flip-in {
    opacity: 0;
    transform: rotateY(-90deg) scale(0.8);
    animation: flipIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Enhanced Staggered Animation Delays */
.delay-50 { animation-delay: 0.05s; }
.delay-100 { animation-delay: 0.1s; }
.delay-150 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.2s; }
.delay-250 { animation-delay: 0.25s; }
.delay-300 { animation-delay: 0.3s; }
.delay-350 { animation-delay: 0.35s; }
.delay-400 { animation-delay: 0.4s; }
.delay-450 { animation-delay: 0.45s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }
.delay-1200 { animation-delay: 1.2s; }
.delay-1400 { animation-delay: 1.4s; }
.delay-1600 { animation-delay: 1.6s; }
.delay-1800 { animation-delay: 1.8s; }
.delay-2000 { animation-delay: 2s; }

/* Premium Keyframe Animations */
@keyframes fadeInPremium {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUpPremium {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDownPremium {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeftPremium {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRightPremium {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleInPremium {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideUpPremium {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInBlur {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0);
    }
}

@keyframes zoomInRotate {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-5deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flipIn {
    from {
        opacity: 0;
        transform: rotateY(-90deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotateY(0deg) scale(1);
    }
}

/* Advanced Scroll-triggered Animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Premium Hover Animations */
.hover-lift {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.hover-glow {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(255, 212, 0, 0.4);
    transform: translateY(-3px) scale(1.01);
}

/* Magnetic Hover Effect */
.hover-magnetic {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Floating Animation with Variations */
.float-animation {
    animation: floatPremium 8s ease-in-out infinite;
}

.float-animation-slow {
    animation: floatPremium 12s ease-in-out infinite;
}

.float-animation-reverse {
    animation: floatPremium 10s ease-in-out infinite reverse;
}

@keyframes floatPremium {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(2deg);
    }
    50% {
        transform: translateY(-8px) rotate(-1deg);
    }
    75% {
        transform: translateY(-20px) rotate(3deg);
    }
}

/* Pulse Animation with Glow */
.pulse-glow {
    animation: pulseGlowPremium 3s ease-in-out infinite;
}

@keyframes pulseGlowPremium {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 212, 0, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 212, 0, 0.6);
        transform: scale(1.02);
    }
}

/* Ripple Effect */
@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* Responsive Animation Adjustments */
@media (max-width: 768px) {
    .fade-up, .fade-down, .fade-left, .fade-right {
        animation-duration: 1s;
    }
    
    .scale-in, .zoom-in {
        animation-duration: 1.1s;
    }
    
    .slide-in-bounce {
        animation-duration: 1.3s;
    }
    
    .flip-in {
        animation-duration: 1.2s;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .fade-in, .fade-up, .fade-down, .fade-left, .fade-right,
    .scale-in, .slide-up, .fade-in-blur, .zoom-in, 
    .slide-in-bounce, .flip-in {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
    
    .scroll-reveal, .scroll-reveal-left, .scroll-reveal-right, .scroll-reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .float-animation, .float-animation-slow, .float-animation-reverse,
    .pulse-glow {
        animation: none;
    }
}