/* ========================================
   SPATIAL INVERSE — Animations
   ======================================== */

/* --- Pulse Glow (Play Button) --- */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(0, 240, 255, 0.3);
    }

    50% {
        box-shadow: 0 4px 40px rgba(0, 240, 255, 0.6), 0 0 60px rgba(180, 74, 255, 0.3);
    }
}

/* --- Float Animation --- */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --- Title Shimmer --- */
@keyframes titleShimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* --- Star Pop In --- */
@keyframes starPopIn {
    0% {
        transform: scale(0) rotate(-30deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.3) rotate(5deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.star.pop-in {
    animation: starPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* --- Fade In Up --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

/* --- Fade In Scale --- */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Particle Float --- */
@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) translateX(30px);
        opacity: 0;
    }
}

/* --- Rotate Slow --- */
@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- Grid Line Pulse --- */
@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.3;
    }
}

/* --- Gravity Arrow Bounce --- */
@keyframes gravityBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* --- Screen Transition --- */
.screen-enter {
    animation: fadeInUp 0.4s ease forwards;
}

/* --- Marble Trail --- */
@keyframes trailFade {
    from {
        opacity: 0.8;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* --- Level Card Hover Wave --- */
@keyframes cardWave {
    0% {
        box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.1);
    }

    50% {
        box-shadow: inset 0 0 0 2px rgba(0, 240, 255, 0.3);
    }

    100% {
        box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.1);
    }
}

/* --- Glow Ring --- */
@keyframes glowRing {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 240, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
    }
}

/* --- Sparkle --- */
@keyframes sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- World Card Background Drift --- */
@keyframes bgDrift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* --- Goal Pulse --- */
@keyframes goalPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.6), 0 0 60px rgba(0, 255, 136, 0.2);
    }
}

/* --- Toolbar Slide Up --- */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

/* --- Win Confetti --- */
@keyframes confettiFall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}