#oio-weather-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 2147483647; /* Force on top of everything */
    overflow: hidden;
    display: block !important;
    visibility: visible !important;
}

.oio-flake-item {
    position: absolute;
    user-select: none;
    transform: translateZ(0); /* Hardware acceleration */
    pointer-events: none;
}

/* --- ANIMATIONS --- */

/* 1. Fall */
.anim-fall {
    top: -100px;
    animation: oioFall linear infinite;
}
@keyframes oioFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0.2; }
}

/* 2. Rise */
.anim-rise {
    bottom: -100px;
    animation: oioRise linear infinite;
}
@keyframes oioRise {
    0% { transform: translateY(0) translateX(0); opacity: 0.9; }
    25% { transform: translateY(-30vh) translateX(20px); }
    50% { transform: translateY(-60vh) translateX(-20px); }
    100% { transform: translateY(-110vh) translateX(0); opacity: 0; }
}

/* 3. Sway */
.anim-sway {
    top: -100px;
    animation: oioSway ease-in-out infinite;
}
@keyframes oioSway {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.9; }
    50% { transform: translateY(60vh) translateX(40px) rotate(90deg); }
    100% { transform: translateY(110vh) translateX(0) rotate(180deg); opacity: 0; }
}

/* 4. Spin */
.anim-spin {
    top: -100px;
    animation: oioSpin linear infinite;
}
@keyframes oioSpin {
    0% { transform: translateY(0) rotateY(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotateY(1080deg); opacity: 0; }
}

/* 5. Pulse */
.anim-pulse {
    top: -100px;
    animation: oioPulse ease-in-out infinite;
}
@keyframes oioPulse {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.9; }
    50% { transform: translateY(50vh) scale(1.3); opacity: 1; }
    100% { transform: translateY(110vh) scale(1); opacity: 0; }
}

/* 6. Spiral */
.anim-spiral {
    top: -100px;
    animation: oioSpiral linear infinite;
}
@keyframes oioSpiral {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.8; }
    25% { transform: translateY(25vh) translateX(30px) rotate(90deg); }
    50% { transform: translateY(50vh) translateX(0) rotate(180deg); }
    75% { transform: translateY(75vh) translateX(-30px) rotate(270deg); }
    100% { transform: translateY(110vh) translateX(0) rotate(360deg); opacity: 0; }
}

/* 7. Wind */
.anim-wind {
    top: -100px;
    animation: oioWind linear infinite;
}
@keyframes oioWind {
    0% { transform: translateY(0) translateX(0) rotate(15deg); opacity: 0.8; }
    100% { transform: translateY(110vh) translateX(30vw) rotate(15deg); opacity: 0.2; }
}

/* 8. Twinkle */
.anim-twinkle {
    top: -100px;
    animation: oioTwinkle linear infinite;
}
@keyframes oioTwinkle {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; transform: scale(1.2) translateY(20vh); }
    40% { opacity: 0.2; transform: scale(0.8) translateY(40vh); }
    60% { opacity: 1; transform: scale(1.2) translateY(60vh); }
    80% { opacity: 0.2; transform: scale(0.8) translateY(80vh); }
    100% { transform: translateY(110vh); opacity: 0; }
}

/* 9. Firework */
.anim-firework {
    bottom: -50px;
    animation: oioFirework ease-out infinite;
}
@keyframes oioFirework {
    0% { transform: translateY(0) scale(0.5); opacity: 1; }
    60% { transform: translateY(-60vh) scale(0.8); opacity: 1; }
    100% { transform: translateY(-65vh) scale(3); opacity: 0; }
}