/* ----- ANIMACIONES Y EFECTOS ----- */

/* --- Efectos Hover para Botones --- */
.cta-button,
.whatsapp-button {
    position: relative; /* Necesario para los pseudo-elementos (brillo) */
    overflow: hidden; /* Oculta el brillo mientras se expande fuera del botón */
    z-index: 1; /* Asegura que el botón esté sobre el fondo */
    
    /* Base del botón (ajusta si es necesario para tu diseño general) */
    padding: 15px 30px; /* Mantener tu padding original */
    border-radius: 5px; /* Mantener tu border-radius original */
    font-weight: bold;
    font-size: 1rem;
    color: white; /* Asegurar texto blanco */
    border: none; /* Asegurar sin borde */

    /* Transiciones para el nuevo efecto de salto */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; 
    
    /* Animación de pulso existente */
    animation: pulse 2.5s infinite;
}

/* Colores base para cada tipo de botón */
.cta-button {
    background-color: #C7007D; /* Tu color original para el CTA */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Sombra inicial sutil */
}

.whatsapp-button {
    background-color: #25D366; /* Color verde de WhatsApp */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Sombra inicial sutil */
}


.cta-button:hover,
.whatsapp-button:hover {
    transform: translateY(-8px); /* ¡Efecto de salto más pronunciado! */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4); /* Sombra más grande y prominente al saltar */
}


/* Efecto de Brillo/Glow al Hover (::before) - Mantenemos y ajustamos ligeramente */
.cta-button::before,
.whatsapp-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /* Ajustamos el brillo para que sea más sutil y se adapte al "salto" */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%); 
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
    z-index: -1; /* Detrás del texto del botón */
    pointer-events: none;
}

.cta-button:hover::before,
.whatsapp-button:hover::before {
    width: 150%; 
    height: 150%;
    opacity: 1;
}


/* --- Animación para Secciones al Scroll --- */
.hidden-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.visible-section {
    opacity: 1;
    transform: translateY(0);
}

/* NUEVO: Animación para Títulos al Scroll */
.hidden-text {
    opacity: 0;
    transform: translateY(20px); /* Un deslizamiento más corto para el texto */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* Transición un poco más rápida */
}

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

/* Opcional: Para el h1 del Hero, podemos darle un pequeño retraso */
#hero h1.hidden-text {
    transition-delay: 0.2s; /* Un leve retraso para el título principal */
}
#hero h1.visible-text {
    transition-delay: 0.2s;
}


/* --- Animación de Pulso para Botones (keyframes) --- */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(199, 0, 125, 0.4); }
  70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(199, 0, 125, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(199, 0, 125, 0); }
}

/* NUEVO: Animación para el Total de Tokens */
@keyframes glowFade {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.4), 0 0 10px rgba(199, 0, 125, 0.3);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(199, 0, 125, 0.6);
    }
}

.price-update-animation {
    animation: glowFade 0.8s ease-out; /* Duración de la animación */
}

/* --- Animación de Degradado de Fondo para el Hero --- */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* NUEVO: Efecto de Barrido/Scanline para el Cuadro de la Calculadora */
.token-calculator {
    position: relative; /* Necesario para posicionar el ::after */
    overflow: hidden; /* Oculta el barrido cuando está fuera */
    /* Aquí puedes añadir otros estilos base si quieres que el cuadro tenga un borde */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */ /* Ejemplo de borde sutil */
}

.token-calculator::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Empieza fuera del lado izquierdo */
    width: 50%; /* Ancho del barrido */
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); /* Luz blanca translúcida */
    transform: skewX(-20deg); /* Inclina la luz para un efecto más dinámico */
    animation: scanlineAnimation 5s infinite ease-in-out; /* Animación de barrido */
    animation-delay: 2s; /* Retraso inicial para que no empiece de inmediato */
    pointer-events: none; /* Asegura que no bloquee interacciones */
    z-index: 2; /* Para que esté por encima del contenido del cuadro */
}

@keyframes scanlineAnimation {
    0% {
        left: -100%; /* Empieza fuera de la pantalla por la izquierda */
    }
    10% {
        left: -50%; /* Se mueve a mitad de camino */
    }
    20% {
        left: 100%; /* Atraviesa el cuadro completamente */
    }
    100% {
        left: 100%; /* Se queda fuera por la derecha hasta el final del ciclo */
    }
}

/* NUEVO: Borde Brillante Pulsante para .token-card */
.token-card {
    position: relative; /* Necesario para posicionar el pseudo-elemento del borde */
    overflow: hidden; /* Asegura que el brillo no se desborde */
    /* Mantenemos tu background-color, padding y border-radius existentes para .token-card */
    
    /* Propiedad clave para el borde animado */
    box-shadow: 0 0 0 2px rgba(199, 0, 125, 0.4); /* Borde inicial sutil */
    animation: borderPulse 3s infinite ease-in-out; /* Aplica la animación de pulso */
}

@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 2px rgba(199, 0, 125, 0.4); /* Borde base */
    }
    50% {
        box-shadow: 0 0 0 5px rgba(199, 0, 125, 0.8), /* Brillo exterior más fuerte */
                    0 0 20px rgba(199, 0, 125, 0.6); /* Sombra de brillo más difusa */
    }
    100% {
        box-shadow: 0 0 0 2px rgba(199, 0, 125, 0.4); /* Vuelve al borde base */
    }
}

/* ============================================================= */
/* --- NUEVA ANIMACIÓN DE GOTEO CON VIDEO (CSS MIX BLEND) --- */
/* ============================================================= */

.drip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.drip-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 0.2;
    /* Añadimos un ligero filtro de brillo */
    filter: brightness(1.5);
}