/* ============================================================
   CIDENER Corporation — animations.css
   Keyframes globales y animaciones de scroll-reveal
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes bg-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(35px, -35px) scale(1.08); }
    66%      { transform: translate(-25px, 25px) scale(0.94); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: var(--glow-primary); }
    50%      { box-shadow: var(--glow-primary-lg); }
}

/* ---------- Scroll reveal ---------- */
/* Los elementos entran suavemente al aparecer en pantalla.
   La clase .visible la agrega animations.js con IntersectionObserver */
.fade-in {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 800ms ease, transform 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Retardo escalonado para grids (cards que entran en cascada) */
.fade-in[data-delay="1"] { transition-delay: 100ms; }
.fade-in[data-delay="2"] { transition-delay: 200ms; }
.fade-in[data-delay="3"] { transition-delay: 300ms; }
.fade-in[data-delay="4"] { transition-delay: 400ms; }
.fade-in[data-delay="5"] { transition-delay: 500ms; }
.fade-in[data-delay="6"] { transition-delay: 600ms; }
.fade-in[data-delay="7"] { transition-delay: 700ms; }
.fade-in[data-delay="8"] { transition-delay: 800ms; }

/* ---------- Detalles vivos ---------- */
.logo__mark { animation: pulse-glow 4s ease-in-out infinite; }

.hero__badge {
    animation: fade-down 900ms ease both;
}

@keyframes fade-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Accesibilidad: respeta usuarios sin animación ---------- */
@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;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }
}