/* 
 * ANIMACIONES PERSONALIZADAS
 */

/* Marquee Infinito (Usado en Hero - Social Hub) */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Efecto Escáner (Usado en Hero - Rutas Regulares) */
@keyframes scan {
    0% {
        top: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Efecto Slide Down (Usado en RegularRoutes - Visualización Mapa) */
@keyframes slideDown {
    0% {
        top: -50%;
    }

    100% {
        top: 150%;
    }
}

/* Efecto Shine (Usado en Logo Header) */
@keyframes shine {
    100% {
        left: 125%;
    }
}

/* Fade In Up (Genérico para modales/popups) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In (Overlay móvil) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Clases de Utilidad para Animación */
.animate-marquee {
    animation: marquee 40s linear infinite;
}

.animate-scan {
    animation: scan 3s linear infinite;
}

.animate-shine {
    animation: shine 1s;
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.pause-on-hover:hover {
    animation-play-state: paused;
}