/* =========================================================
   Speedx Services — animations.css
   ========================================================= */

@keyframes sx-spin { to { transform: rotate(360deg); } }

@keyframes sx-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

@keyframes sx-rise {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

@keyframes sx-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Scroll reveal */
.sx-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.sx-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children when a grid becomes visible */
.sx-grid .sx-reveal.is-visible { transition-delay: calc(var(--sx-i, 0) * 60ms); }

/* Animated gradient text option */
.sx-animated-gradient {
    background-size: 200% 200%;
    animation: sx-gradient-shift 8s ease infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .sx-reveal { opacity: 1 !important; transform: none !important; }
    .sx-hero__image { animation: none !important; }
}