/* 
 * DobleSena Landing Page Animations
 * Animaciones para elementos de la landing page del juego de dominó venezolano
 */

/* Animación para la ficha de dominó en el hero */
.animated-domino {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Animación para los botones */
.btn:hover {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Animación para las tarjetas de características */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    animation: cardHover 0.5s forwards;
}

@keyframes cardHover {
    to {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }
}

/* Animación para los iconos de características */
.feature-icon img {
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon img {
    animation: iconSpin 1s ease;
}

@keyframes iconSpin {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Animación para el botón de play en el video */
.play-button {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.play-button:hover {
    animation: playPulse 1.5s infinite;
}

@keyframes playPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        background-color: rgba(255, 255, 255, 0.8);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        background-color: rgba(255, 255, 255, 1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        background-color: rgba(255, 255, 255, 0.8);
    }
}

/* Animación para los números de pasos */
.step-number {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.step:hover .step-number {
    animation: stepPulse 1s infinite;
}

@keyframes stepPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        background-color: var(--secondary-color);
    }
    100% {
        transform: scale(1);
    }
}

/* Animación para las tarjetas de planes */
.plan-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
    animation: planHover 0.5s forwards;
}

@keyframes planHover {
    to {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    }
}

/* Animación para el plan destacado */
.plan-card.featured {
    animation: featuredPlan 2s infinite;
}

@keyframes featuredPlan {
    0% {
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.2);
    }
    50% {
        box-shadow: 0 5px 25px rgba(255, 193, 7, 0.5);
    }
    100% {
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.2);
    }
}

/* Animación para los testimonios */
.testimonial {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

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

/* Animación para los dispositivos en la sección de descarga */
.device {
    transition: transform 0.3s ease;
}

.device:hover {
    animation: deviceBounce 0.5s;
}

@keyframes deviceBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Animación para las preguntas del FAQ */
.faq-question {
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #f9f9f9;
}

.faq-toggle {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    animation: rotate45 0.3s forwards;
}

@keyframes rotate45 {
    to {
        transform: rotate(45deg);
    }
}

/* Animación para los enlaces del footer */
.footer-links a {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-links a:hover {
    animation: linkSlide 0.3s forwards;
}

@keyframes linkSlide {
    to {
        transform: translateX(5px);
    }
}

/* Animación para los iconos sociales */
.social-links a {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.social-links a:hover {
    animation: socialBounce 0.5s;
}

@keyframes socialBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Animación para el logo */
.logo img {
    transition: transform 0.3s ease;
}

.logo:hover img {
    animation: logoSpin 1s;
}

@keyframes logoSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Animaciones de entrada para elementos al hacer scroll */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animación para el botón de menú móvil */
.mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Animación para el menú móvil */
.nav-links.mobile-active {
    animation: slideDown 0.5s forwards;
}

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

/* Animación para las estadísticas */
.stat-number {
    animation: countUp 2s ease-out forwards;
}

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

/* Animación para la sección de título */
.section-title::after {
    animation: expandWidth 1s ease-out forwards;
}

@keyframes expandWidth {
    from {
        width: 0;
    }
    to {
        width: 80px;
    }
}