/* ════════════════════════════════════════
   ANIMACIONES CSS - RepararFácil.com.co
   Últimas tendencias: Scroll-Driven, View Transitions, Keyframes
   ════════════════════════════════════════ */

/* ─── SCROLL-DRIVEN ANIMATIONS (Chrome 115+) ─── */
@supports (animation-timeline: view()) {
    .animate-in {
        animation: fade-in-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    .animate-in--left {
        animation: fade-in-left linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    .animate-in--right {
        animation: fade-in-right linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    .animate-in--scale {
        animation: fade-in-scale linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }
}

/* Fallback para navegadores sin scroll-driven */
@keyframes fade-in-up-fallback {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-in:not(:defined) {
    opacity: 0;
}

/* ─── KEYFRAMES PRINCIPALES ─── */

/* Fade In Up */
@keyframes fade-in-up {
    0%   { opacity: 0; transform: translateY(40px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fade-in-left {
    0%   { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
    0%   { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-scale {
    0%   { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

/* Float / levitación */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%      { transform: translateY(-8px) rotate(2deg); }
    66%      { transform: translateY(-4px) rotate(-1deg); }
}

/* Pulse suave */
@keyframes pulse-soft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.05); opacity: 0.85; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 150, 252, 0.4); }
    50%      { box-shadow: 0 0 0 15px rgba(30, 150, 252, 0); }
}

/* Shimmer / gradiente animado */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes text-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Rotación suave */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes spin-slower {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Wave */
@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-5deg); }
    75%      { transform: rotate(5deg); }
}

/* Scale reveal */
@keyframes scale-reveal {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Contador animado (para stats) */
@keyframes count-up {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Shimmer para skeleton loading */
@keyframes skeleton {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* ─── CLASES DE UTILIDAD ─── */

.animate-float {
    animation: float 4s var(--ease-in-out) infinite;
}

.animate-float-slow {
    animation: float-slow 6s var(--ease-in-out) infinite;
}

.animate-pulse-soft {
    animation: pulse-soft 2.5s var(--ease-in-out) infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.15) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2.5s infinite;
}

/* ─── TRANSICIONES DE ENTRADA (fallback JS) ─── */
.js-animate-in {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 600ms var(--ease-out),
                transform 600ms var(--ease-out);
}

.js-animate-in.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.js-animate-in--left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 500ms var(--ease-out),
                transform 500ms var(--ease-out);
}

.js-animate-in--left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ─── STAGGER (delay escalonado) ─── */
.service-card:nth-child(1),
.feature-card:nth-child(1),
.testimonial-card:nth-child(1) { --anim-delay: 0ms; }
.service-card:nth-child(2),
.feature-card:nth-child(2),
.testimonial-card:nth-child(2) { --anim-delay: 150ms; }
.service-card:nth-child(3),
.feature-card:nth-child(3),
.testimonial-card:nth-child(3) { --anim-delay: 300ms; }
.service-card:nth-child(4),
.feature-card:nth-child(4)        { --anim-delay: 450ms; }

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-in,
    .js-animate-in {
        opacity: 1 !important;
        transform: none !important;
    }
}