/* Estilos para la marquesina de patrocinios con tema Halloween */

/* Animación de marquesina Halloween */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes marqueeGlow {
    0%, 100% {
        text-shadow: 0 0 5px var(--halloween-orange);
    }
    50% {
        text-shadow: 0 0 20px var(--halloween-orange), 0 0 30px var(--halloween-yellow);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite, marqueeGlow 2s ease-in-out infinite;
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    color: var(--halloween-orange) !important;
}

/* Pausar la animación al pasar el mouse */
.animate-marquee:hover {
    animation-play-state: paused;
    cursor: pointer;
}

/* Asegurar que el contenedor oculte el desbordamiento */
.marquee-container {
    overflow: hidden;
    position: relative;
}

/* Efecto de niebla en la marquesina */
.marquee-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        rgba(255, 107, 53, 0.1) 0%,
        transparent 20%,
        transparent 80%,
        rgba(123, 31, 162, 0.1) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Para duplicar el contenido y crear efecto continuo */
.marquee-content {
    display: inline-block;
    white-space: nowrap;
}

/* Responsive: reducir velocidad en móviles */
@media (max-width: 768px) {
    .animate-marquee {
        animation-duration: 45s;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .animate-marquee {
        animation-duration: 60s;
        font-size: 0.75rem;
    }

    /* Reducir efectos en móviles lentos */
    .animate-marquee {
        animation: marquee 60s linear infinite;
    }
}