/* ======== Landing page - animaciones y micro-interacciones ======== */

html { scroll-behavior: smooth; }

/* ---- Scroll reveal ---- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Flotación suave (mock / badges) ---- */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.floaty { animation: floaty 5s ease-in-out infinite; }

/* ---- Punto de "en línea" ---- */
@keyframes pip {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.75); }
}
.pulse-dot { animation: pip 1.6s ease-in-out infinite; }

/* ---- Indicador de escritura (3 puntos) ---- */
.typing-dot {
    width: 7px; height: 7px; border-radius: 9999px;
    background: #059669; display: inline-block;
}
.typing-dot:nth-child(1) { animation: typing 1.2s infinite; }
.typing-dot:nth-child(2) { animation: typing 1.2s .2s infinite; }
.typing-dot:nth-child(3) { animation: typing 1.2s .4s infinite; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ---- Brillo que recorre el badge ---- */
.shine { position: relative; overflow: hidden; }
.shine::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: shine 3.5s ease-in-out infinite;
}
@keyframes shine { to { transform: translateX(120%); } }

/* ---- Elevación al hover de las cards ---- */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.18); }

/* ---- Botón con micro-interacción ---- */
.btn-float { transition: transform .2s ease, box-shadow .2s ease; }
.btn-float:hover { transform: translateY(-2px); }
.btn-float:active { transform: translateY(0) scale(.98); }

/* ---- Accesibilidad ---- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .floaty, .pulse-dot, .typing-dot, .shine::after, .scroll-bounce { animation: none !important; }
}