/* ============================================================
   ANIMACIONES — transiciones escalonadas para slides
   Las slides usan .stagger como contenedor y hijos .stagger > *
   se animan con --i como índice de retraso.
   ============================================================ */

@keyframes slide-in-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse-accent {
    0%, 100% { box-shadow: 0 0 0 0 rgb(0 230 172 / 0); }
    50% { box-shadow: 0 0 0 8px rgb(0 230 172 / 25%); }
}

/* Cuando la slide está activa, sus hijos animables aparecen */
.slide.is-activa .stagger > * {
    animation: slide-in-up var(--transicion, 180ms ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}

.slide.is-activa .stagger-inline > * {
    animation: slide-in-right var(--transicion, 180ms ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}

.slide.is-activa .fade {
    animation: fade-in 320ms ease both;
}

/* Pulse utilitario para destacar elementos */
.u-pulse {
    animation: pulse-accent 1.6s ease-in-out infinite;
}

/* Respeto a reduced-motion en base.css ya cubre el caso global. */