/* ================================================================
   animations.css — Keyframes, scroll reveal, hero animations
   modulixflow.com
================================================================ */

/* ──────────────────────────────────────────────────────────────
   1. KEYFRAMES GLOBALES
────────────────────────────────────────────────────────────── */

/* Fade up desde abajo */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Drift suave para orbs */
@keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(20px, -15px) scale(1.03); }
    66%  { transform: translate(-10px, 20px) scale(0.97); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes driftReverse {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-20px, 15px) scale(1.04); }
    66%  { transform: translate(10px, -20px) scale(0.96); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Parpadeo del badge dot */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.85); }
}

/* Entrada desde abajo (hero escalonado) */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Glow suave */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(108,71,255,0.3); }
    50%       { box-shadow: 0 0 40px rgba(108,71,255,0.6); }
}

/* Rotating gradient border */
@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────
   2. HERO — ORBS
────────────────────────────────────────────────────────────── */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    will-change: transform;
}

.hero-orb--purple {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(108,71,255,0.35) 0%, transparent 70%);
    top: -150px;
    left: -150px;
    animation: drift 11s ease-in-out infinite;
}

.hero-orb--teal {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,201,167,0.25) 0%, transparent 70%);
    bottom: -100px;
    right: -100px;
    animation: driftReverse 13s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────────
   3. HERO — PARTÍCULAS / ESTRELLAS
────────────────────────────────────────────────────────────── */
.hero-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 65%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 20% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 85%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(2px 2px at 60% 35%, rgba(108,71,255,0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 5% 55%, rgba(0,201,167,0.4) 0%, transparent 100%);
    background-size: 100% 100%;
}

/* ──────────────────────────────────────────────────────────────
   4. HERO — ENTRADAS ESCALONADAS
────────────────────────────────────────────────────────────── */
.hero__badge,
.hero__title,
.hero__subtitle,
.hero__actions,
.hero__stats {
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards;
}

.hero__badge    { animation-delay: 0.1s; }
.hero__title    { animation-delay: 0.3s; }
.hero__subtitle { animation-delay: 0.5s; }
.hero__actions  { animation-delay: 0.65s; }
.hero__stats    { animation-delay: 0.8s; }

/* ──────────────────────────────────────────────────────────────
   5. BADGE DOT — parpadeo
────────────────────────────────────────────────────────────── */
.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   6. SCROLL REVEAL — estado inicial + revealed
────────────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Delays escalonados */
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }
.d6 { transition-delay: 0.6s; }

/* ──────────────────────────────────────────────────────────────
   7. CTA FINAL — PARTÍCULAS
────────────────────────────────────────────────────────────── */
.cta-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 85%, rgba(108,71,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 35%, rgba(0,201,167,0.35) 0%, transparent 100%);
    background-size: 100% 100%;
}

/* ──────────────────────────────────────────────────────────────
   8. HOVER MICRO-INTERACTIONS
────────────────────────────────────────────────────────────── */

/* Pulsate en hover para CTAs importantes */
@keyframes ctaPulse {
    0%   { box-shadow: 0 0 0 0 rgba(108,71,255,0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(108,71,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(108,71,255,0); }
}

.btn--pulse:hover { animation: ctaPulse 1.2s ease-out; }

/* ──────────────────────────────────────────────────────────────
   9. REDUCED MOTION — accesibilidad
────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero__badge,
    .hero__title,
    .hero__subtitle,
    .hero__actions,
    .hero__stats { opacity: 1; animation: none; }
}