/* ========================================
   ANIMACIONES DEL HEADER - COPECPAY
   ======================================== */

/* Animación marquee para el botón "Descargar app" */
.DownApp .DownloadWrapper {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    display: inline-block;
}

/* Ocultar el texto original */
.DownApp .DownloadWrapper {
    font-size: 0; /* Ocultar el texto original */
}

/* Texto animado con ::before */
.DownApp .DownloadWrapper::before {
    content: "Descargar app";
    display: inline-block;
    font-size: 16px; /* Restaurar el tamaño de fuente */
    color: inherit;
    font-weight: inherit;
    animation: marquee-move 3s linear infinite;
}

/* Animación principal - movimiento continuo de derecha a izquierda */
@keyframes marquee-move {
    0% {
        transform: translateX(120%);
    }
    100% {
        transform: translateX(-120%);
    }
}

/* Versión alternativa con movimiento continuo */
.DownApp .DownloadWrapper.continuous::before {
    animation: marquee-continuous 4s linear infinite;
}

@keyframes marquee-continuous {
    0% {
        transform: translateX(120%);
    }
    100% {
        transform: translateX(-120%);
    }
}

/* Versión con movimiento más suave */
.DownApp .DownloadWrapper.smooth::before {
    animation: marquee-smooth 5s ease-in-out infinite;
}

@keyframes marquee-smooth {
    0% {
        transform: translateX(120%);
    }
    50% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* Versión con pausa en los extremos */
.DownApp .DownloadWrapper.pause::before {
    animation: marquee-pause 6s ease-in-out infinite;
}

@keyframes marquee-pause {
    0% {
        transform: translateX(120%);
    }
    20% {
        transform: translateX(-120%);
    }
    40% {
        transform: translateX(-120%);
    }
    60% {
        transform: translateX(120%);
    }
    80% {
        transform: translateX(120%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* Responsive - Ajustar velocidad en móviles */
@media (max-width: 768px) {
    .DownApp .DownloadWrapper::before {
        animation-duration: 4s;
    }
    
    .DownApp .DownloadWrapper.continuous::before {
        animation-duration: 5s;
    }
    
    .DownApp .DownloadWrapper.smooth::before {
        animation-duration: 6s;
    }
    
    .DownApp .DownloadWrapper.pause::before {
        animation-duration: 7s;
    }
}

/* Hover effects - La animación continúa al hacer hover */

/* Versión con efecto de rebote */
.DownApp .DownloadWrapper.bounce::before {
    animation: marquee-bounce 3s ease-in-out infinite;
}

@keyframes marquee-bounce {
    0% {
        transform: translateX(120%);
    }
    25% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(-120%);
    }
    75% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* Versión con efecto de deslizamiento suave */
.DownApp .DownloadWrapper.slide::before {
    animation: marquee-slide 4s ease-in-out infinite;
}

@keyframes marquee-slide {
    0% {
        transform: translateX(120%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-120%);
        opacity: 0;
    }
}