/* ========================================
   Animations — CSS Keyframe Animations
   ======================================== */

/* ===== Scroll Indicator Line ===== */
@keyframes scrollLine {
    0% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 1;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
    51% {
        transform: scaleY(1);
        transform-origin: bottom;
        opacity: 1;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
        opacity: 0.5;
    }
}

/* ===== Glow Pulse (for service cards) ===== */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(41, 151, 255, 0.05);
    }
    50% {
        box-shadow: 0 0 40px rgba(41, 151, 255, 0.15);
    }
}

/* ===== Fade In Up (CSS fallback) ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Fade In Scale (CSS fallback) ===== */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* ===== Initial hidden states for GSAP reveal ===== */
/* These will be overridden by GSAP animations */
.reveal-up,
.reveal-text,
.reveal-scale {
    will-change: transform, opacity;
}

/* ===== Loading State — GSAP will animate from opacity 0 ===== */
/* No CSS opacity:0 here; GSAP handles initial states in JS */