:root {
    --bg: #0b1e35;
}

.cursor-head,
.trail-item {
    position      : fixed;
    pointer-events: none;
    transform     : translate(-50%, -50%);
    will-change   : transform, opacity;
}

.cursor-head {
    z-index: 12000;
    width  : 52px;
    height : 52px;
}

.trail-item {
    z-index: 11000;
}

.hint {
    position     : fixed;
    left         : 16px;
    top          : 16px;
    background   : rgba(255, 255, 255, 0.9);
    padding      : 8px 12px;
    border-radius: 8px;
    color        : #24502f;
    box-shadow   : 0 6px 18px rgba(0, 0, 0, 0.06);
    font-size    : 13px;
}

@keyframes rainFall {
    0% {
        transform: translateY(-10vh) translateX(0);
        opacity  : 1;
    }
    100% {
        transform: translateY(100vh) translateX(var(--drift));
        opacity  : 0;
    }
}

/* Style for the raindrop balls */
.raindrop {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: rainFall linear infinite;
    will-change: transform, opacity;
}

/* Additional styling for smaller balls */
.raindrop:nth-child(even) {
    background-color: rgba(180, 210, 255, 0.8); /* Change color slightly for variation */
}

@keyframes snowFall {
    0% {
        transform: translateY(-10vh) translateX(0);
        opacity  : 0;
    }
    10% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(110vh) translateX(var(--drift));
        opacity  : 0.9;
    }
}