/* ===================================================
   KARMA LOTTO — Animations
   =================================================== */

/* ── Fade In ── */
.fade-in{opacity:0;transform:translateY(24px);animation:fadeIn .8s ease forwards}
.fade-in--delay-1{animation-delay:.15s}
.fade-in--delay-2{animation-delay:.3s}
.fade-in--delay-3{animation-delay:.45s}
.fade-in--delay-4{animation-delay:.6s}

@keyframes fadeIn{
    to{opacity:1;transform:translateY(0)}
}

/* ── Scroll Reveal ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Float ── */
@keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}

/* ── Glow pulse ── */
@keyframes glowPulse{
    0%,100%{box-shadow:0 0 20px rgba(167,139,250,.1)}
    50%{box-shadow:0 0 40px rgba(167,139,250,.25)}
}

/* ── Ball shimmer ── */
.mini-ball{animation:ballShimmer 3s ease-in-out infinite alternate}
.mini-ball--1{animation-delay:0s}
.mini-ball--2{animation-delay:.3s}
.mini-ball--3{animation-delay:.6s}
.mini-ball--4{animation-delay:.9s}
.mini-ball--5{animation-delay:1.2s}
.mini-ball--bonus{animation-delay:1.5s}

@keyframes ballShimmer{
    0%{filter:brightness(1)}
    100%{filter:brightness(1.2)}
}

/* ── Node hover pulse ── */
.hero-flow__node{animation:nodeFloat 4s ease-in-out infinite}
.hero-flow__node:nth-child(2){animation-delay:.5s}
.hero-flow__node:nth-child(3){animation-delay:1s}
.hero-flow__node:nth-child(4){animation-delay:1.5s}
.hero-flow__node:nth-child(5){animation-delay:2s}

@keyframes nodeFloat{
    0%,100%{transform:translate(-50%,0)}
    50%{transform:translate(-50%,-4px)}
}

/* ── Flow demo nodes subtle hover ── */
.flow-node{transition:all .3s ease}

/* ── Tracker card row highlight ── */
.tracker-card__row{transition:background .2s ease}

/* ── Spin (for loading states) ── */
@keyframes spin{
    to{transform:rotate(360deg)}
}

/* ── Typing cursor ── */
@keyframes blink{
    0%,50%{opacity:1}
    51%,100%{opacity:0}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important
    }
    .logos-bar__slide{animation:none}
    .hero-flow__node{animation:none}
    .mini-ball{animation:none}
}
