/* Fade In Up */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delay */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* Floating Particles (Juice feel) */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.2;
    animation: float 15s infinite linear;
}

.particle:nth-child(1) { width: 100px; height: 100px; left: 10%; bottom: -100px; animation-duration: 20s; }
.particle:nth-child(2) { width: 60px; height: 60px; left: 30%; bottom: -60px; animation-duration: 15s; animation-delay: 2s; background: radial-gradient(circle, var(--lemon) 0%, transparent 70%); }
.particle:nth-child(3) { width: 150px; height: 150px; left: 70%; bottom: -150px; animation-duration: 25s; animation-delay: 5s; background: radial-gradient(circle, var(--cherry) 0%, transparent 70%); }
.particle:nth-child(4) { width: 80px; height: 80px; left: 85%; bottom: -80px; animation-duration: 18s; animation-delay: 1s; background: radial-gradient(circle, var(--grape) 0%, transparent 70%); }

@keyframes float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) scale(1.5);
        opacity: 0;
    }
}

/* Subtle Glow Pulse */
@keyframes pulseGlow {
    0% { box-shadow: 0 0 20px rgba(255, 140, 66, 0.1); }
    50% { box-shadow: 0 0 40px rgba(255, 140, 66, 0.25); }
    100% { box-shadow: 0 0 20px rgba(255, 140, 66, 0.1); }
}

.game-wrapper {
    animation: pulseGlow 4s infinite alternate ease-in-out;
}