/* ==========================================================================
   Scroll Interactions & Effects
   ========================================================================== */

/* Content is ALWAYS visible by default - no opacity:0 hiding */
.animate-on-scroll {
    will-change: transform, opacity;
}

.animate-on-scroll.visible {
    opacity: 1 !important;
}

/* Fade In Base */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Slide Up */
.slide-up {
    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Slide Right (for split layouts) */
.slide-right {
    animation: slideRightFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Animation Delays */
.delay-1 {
    animation-delay: 0.15s;
}

.delay-2 {
    animation-delay: 0.3s;
}

.delay-3 {
    animation-delay: 0.45s;
}

.delay-4 {
    animation-delay: 0.6s;
}

/* Micro interactions */
.animate-bounce {
    animation: float 4s ease-in-out infinite;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideRightFade {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0% {
        transform: translate(-50%, 0px);
    }

    50% {
        transform: translate(-50%, -15px);
    }

    100% {
        transform: translate(-50%, 0px);
    }
}

/* Background pulse glow effect */
@keyframes pulse-glow {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.5;
        transform: scale(1);
    }
}

.hero-bg-glow {
    animation: pulse-glow 8s ease-in-out infinite alternate;
}

.glow-2 {
    animation-delay: -4s;
}