/* ============================================
   Keyframes
   ============================================ */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Slide In (Mobile) */
@keyframes slideInLtr { from { left: -100%; } to { left: 0; } }
@keyframes slideInRtl { from { right: -100%; } to { right: 0; } }
@keyframes slideIn {
    [dir="rtl"] & { from { right: -100%; } to { right: 0; } }
}

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

/* Pulse */
@keyframes logoPulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50% { transform: scale(1.18); opacity: 0.55; }
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: .7; }
    100% { box-shadow: 0 0 0 20px transparent; opacity: 0; }
}
@keyframes pulseRing {
    0% { transform: scale(0.9); opacity: 1; }
    80%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Spin / Rotate */
@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
@keyframes rotate3d {
    0%, 100% { transform: rotate3d(1,1,1, 0); }
    50% { transform: rotate3d(1,1,1, 360deg); }
}

/* Gradient */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes gradientBG {
    0%, 100% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

/* Glow */
@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px var(--gold));
    }
    50% {
        filter: drop-shadow(0 0 20px var(--gold)) drop-shadow(0 0 40px rgba(168,85,247,0.6));
    }
}
@keyframes glowSoft {
    0%, 100% { box-shadow: 0 0 20px rgba(247, 147, 26, 0.3); }
    50% { box-shadow: 0 0 30px rgba(247, 147, 26, 0.5), 0 0 50px rgba(168, 85, 247, 0.3); }
}

/* Shimmer / Shine */
@keyframes shimmer {
    0% { transform: translateX(-150%) skewX(-20deg); }
    100% { transform: translateX(300%) skewX(-20deg); }
}

/* Scale */
@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2,0.8,0.4,1); }
    50% { transform: translateY(-10px); }
}
@keyframes zoomIn { from { opacity:0; transform: scale(.6); } to { opacity:1; transform: scale(1); } }

/* Typing / Blink */
@keyframes blink { 50% { opacity: 0; } }
@keyframes typing { from { width: 0 } to { width: 100% } }

/* Particle */
@keyframes particleRise {
    0% { transform: translate(0,0) rotate(0deg); opacity: 0; }
    20% { opacity: .8; }
    80% { opacity: .6; }
    100% { transform: translate(40px, -100vh) rotate(360deg); opacity: 0; }
}
@keyframes particleFloat {
    0%, 100% { transform: translate(0,0) rotate(0deg); opacity: .4; }
    33% { transform: translate(10px,-20px) rotate(120deg); }
    66% { transform: translate(-10px,15px) rotate(240deg); opacity: .6; }
}

/* Line / Draw */
@keyframes lineGrow { to { stroke-dashoffset: 0; } }

/* Shake */
@keyframes shake {
    10%,90% { transform: translate3d(-1px,0,0); }
    20%,80% { transform: translate3d(2px,0,0); }
    30%,50%,70% { transform: translate3d(-4px,0,0); }
    40%,60% { transform: translate3d(4px,0,0); }
}
@keyframes wobble {
    15% { transform: translate3d(25px,0,0) rotate(5deg); }
    30% { transform: translate3d(-20px,0,0) rotate(-4deg); }
    45% { transform: translate3d(12px,0,0) rotate(2.5deg); }
    60% { transform: translate3d(-6px,0,0) rotate(-1deg); }
    75% { transform: translate3d(3px,0,0) rotate(0.5deg); }
}

/* Orbit */
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(80px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* Marquee / Ticker */
@keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* Loading */
@keyframes loaderPulse { 0%, 100% { transform: scale(.85); opacity:.5 } 50% { transform: scale(1.15); opacity:1 } }

/* Ripple */
@keyframes ripple {
    to { transform: scale(2.4); opacity: 0; }
}

/* Glow Line */
@keyframes lineGlow {
    0%, 100% { box-shadow: 0 0 10px var(--gold), 0 0 20px var(--purple); }
    50% { box-shadow: 0 0 30px var(--gold), 0 0 50px var(--purple); }
}

/* ============================================
   Animation Classes (Reusable)
   ============================================ */

/* Trigger on scroll (add via JS .visible class) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease, transform .8s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-right { opacity:0; transform: translateX(-40px); transition: opacity .8s ease, transform .8s cubic-bezier(.4,0,.2,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-left { opacity:0; transform: translateX(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.4,0,.2,1); }
.reveal-left.visible { opacity:1; transform: translateX(0); }

.reveal-zoom { opacity:0; transform: scale(.85); transition: opacity .7s, transform .7s var(--bounce); }
.reveal-zoom.visible { opacity: 1; transform: scale(1); }

.stagger > * { opacity:0; transform: translateY(30px); transition: all .7s cubic-bezier(.4,0,.2,1); }
.stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: .08s; }
.stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: .16s; }
.stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: .24s; }
.stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: .32s; }
.stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: .40s; }
.stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: .48s; }

/* Utility animations (infinite / once) */
.float { animation: float 6s ease-in-out infinite; }
.float-fast { animation: float 3.5s ease-in-out infinite; }
.spin-slow { animation: spin 18s linear infinite; }
.spin-rev { animation: spinReverse 22s linear infinite; }
.coin-spin:hover { animation: coinSpin .9s cubic-bezier(0.4, 0, 0.2, 1); }
.pulse-glow { animation: glowSoft 2.6s ease-in-out infinite; }
.shake:hover { animation: shake .6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.wobble-once:hover { animation: wobble 1.2s both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001s !important;
        transition-duration: .001s !important;
    }
    .float, .spin-slow, .spin-rev, .pulse-glow { animation: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .reveal.visible, .reveal-right.visible, .reveal-left.visible,
    .reveal-zoom.visible { opacity:1; transform:none; transition:none; }
}

/* Utility helper for shimmer loading */
.skeleton {
    background: linear-gradient(
        110deg,
        var(--surface) 0%, var(--surface-alt) 40%,
        var(--surface) 60%, var(--surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: gradientBG 2s linear infinite;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}