.grape {
    position: absolute;
    top: -50px; /* Start above the screen */
    font-size: 1.5rem; /* Grape emoji size */
    user-select: none; /* Prevent text selection */
    animation: rain-fall 5s linear infinite;
    opacity: 0;
    z-index: 0; /* Ensure grapes are behind content cards */
}

@keyframes rain-fall {
    0% {
        transform: translateY(0) translateX(-5px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) translateX(5px) rotate(10deg); /* Fall below the viewport height with slight sway */
        opacity: 0;
    }
}