/* ============================================
   ANIMATIONS - All slide animations
   Fade, slide, float, skew, blur effects
   ============================================ */

/* ====== LANDING PAGE ANIMATIONS ====== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ====== SLIDE CONTENT ANIMATIONS ====== */

/* 1. Fade In - Simple opacity transition */
.anim-fadeIn {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

/* 2. Slide Up + Fade - Element rises from below */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-slideUpFade {
    animation: slideUpFade 0.6s ease-out forwards;
    opacity: 0;
}

/* 3. Slide Left + Fade - Element comes from right */
@keyframes slideLeftFade {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-slideLeftFade {
    animation: slideLeftFade 0.8s ease-out forwards;
    opacity: 0;
}

/* 4. Slide Right + Fade - Element comes from left */
@keyframes slideRightFade {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-slideRightFade {
    animation: slideRightFade 0.8s ease-out forwards;
    opacity: 0;
}

/* 5. Float - Continuous subtle motion */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.anim-float {
    animation: float 3s ease-in-out infinite;
}

/* 6. Float with Fade In */
@keyframes floatFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.anim-floatFadeIn {
    animation: floatFadeIn 0.8s ease-out forwards, 
               float 3s ease-in-out infinite 0.8s;
    opacity: 0;
}

/* 7. Skew/Rotate Header - Dynamic entrance */
@keyframes skewIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.anim-skewIn {
    animation: skewIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

/* 8. Blur In - Starts blurry, becomes sharp */
@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.anim-blurIn {
    animation: blurIn 0.8s ease-out forwards;
    opacity: 0;
}

/* 9. Scale In - Zooms from small to normal */
@keyframes scaleInFade {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.anim-scaleIn {
    animation: scaleInFade 0.6s ease-out forwards;
    opacity: 0;
}

/* 10. Bounce In - Playful entrance */
@keyframes bounceIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.anim-bounceIn {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    opacity: 0;
}

/* 11. Flip In - 3D rotation effect */
@keyframes flipIn {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(-90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

.anim-flipIn {
    animation: flipIn 0.6s ease-out forwards;
    opacity: 0;
}

/* ====== STAGGERED ANIMATIONS ====== */

/* Apply increasing delays to child elements */
.stagger-children > *:nth-child(1) { animation-delay: 0s !important; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s !important; }
.stagger-children > *:nth-child(3) { animation-delay: 0.2s !important; }
.stagger-children > *:nth-child(4) { animation-delay: 0.3s !important; }
.stagger-children > *:nth-child(5) { animation-delay: 0.4s !important; }
.stagger-children > *:nth-child(6) { animation-delay: 0.5s !important; }
.stagger-children > *:nth-child(7) { animation-delay: 0.6s !important; }
.stagger-children > *:nth-child(8) { animation-delay: 0.7s !important; }
.stagger-children > *:nth-child(9) { animation-delay: 0.8s !important; }
.stagger-children > *:nth-child(10) { animation-delay: 0.9s !important; }

/* ====== ANIMATION DELAYS ====== */
.delay-100 { animation-delay: 0.1s !important; }
.delay-200 { animation-delay: 0.2s !important; }
.delay-300 { animation-delay: 0.3s !important; }
.delay-400 { animation-delay: 0.4s !important; }
.delay-500 { animation-delay: 0.5s !important; }
.delay-600 { animation-delay: 0.6s !important; }
.delay-700 { animation-delay: 0.7s !important; }
.delay-800 { animation-delay: 0.8s !important; }
.delay-900 { animation-delay: 0.9s !important; }
.delay-1000 { animation-delay: 1s !important; }

/* ====== ANIMATION DURATIONS ====== */
.duration-fast { animation-duration: 0.3s !important; }
.duration-medium { animation-duration: 0.6s !important; }
.duration-slow { animation-duration: 1s !important; }
.duration-very-slow { animation-duration: 1.5s !important; }

/* ====== ANIMATION EASING ====== */
.ease-in { animation-timing-function: ease-in !important; }
.ease-out { animation-timing-function: ease-out !important; }
.ease-in-out { animation-timing-function: ease-in-out !important; }
.ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; }

/* ====== SPECIAL: COUNTER ANIMATION ====== */
.counter-animating {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ====== SPECIAL: TEXT REVEAL ====== */
@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-reveal {
    display: inline-block;
    animation: textReveal 0.6s ease-out forwards;
    opacity: 0;
}

/* Stagger words in a sentence */
.text-reveal:nth-child(1) { animation-delay: 0s; }
.text-reveal:nth-child(2) { animation-delay: 0.05s; }
.text-reveal:nth-child(3) { animation-delay: 0.1s; }
.text-reveal:nth-child(4) { animation-delay: 0.15s; }
.text-reveal:nth-child(5) { animation-delay: 0.2s; }
.text-reveal:nth-child(6) { animation-delay: 0.25s; }
.text-reveal:nth-child(7) { animation-delay: 0.3s; }
.text-reveal:nth-child(8) { animation-delay: 0.35s; }
.text-reveal:nth-child(9) { animation-delay: 0.4s; }
.text-reveal:nth-child(10) { animation-delay: 0.45s; }

/* ====== SPECIAL: GLOW PULSE ====== */
@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
                     0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.8),
                     0 0 40px rgba(255, 255, 255, 0.5);
    }
}

.anim-glow {
    animation: glowPulse 2s ease-in-out infinite;
}

/* ====== REDUCED MOTION SUPPORT ====== */
@media (prefers-reduced-motion: reduce) {
    .anim-fadeIn,
    .anim-slideUpFade,
    .anim-slideLeftFade,
    .anim-slideRightFade,
    .anim-floatFadeIn,
    .anim-skewIn,
    .anim-blurIn,
    .anim-scaleIn,
    .anim-bounceIn,
    .anim-flipIn,
    .text-reveal {
        animation: fadeIn 0.01ms !important;
    }
    
    .anim-float,
    .anim-glow {
        animation: none !important;
    }
}