/* =========================================================================
   CITEM — Animations: "Blockout Suizo" (Standalone Theme Folder)
   Mínimas. Solo lo esencial para el ticker + observer.
   ========================================================================= */

/* Keyframes */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Base Classes animadas por el observer en JS */
.animate {
    opacity: 0;
}

.animate.is-visible {
    animation: fadeUp 0.4s ease-out forwards; /* Más rápido que conservatorio */
}

/* Staggering delays */
.animate-delay-1 { animation-delay: 0.05s; }
.animate-delay-2 { animation-delay: 0.1s; }
.animate-delay-3 { animation-delay: 0.15s; }
.animate-delay-4 { animation-delay: 0.2s; }

/* Control para usuarios que prefieren no 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 {
        opacity: 1;
    }
}

/* Ticker / Marquesina infinita */
@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Ticker inverso: empieza con contenido ya visible */
@keyframes ticker-reverse {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}