#occasion-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 9999; overflow: hidden;
}

body.occasion-ramadan {
    background-color: #FFFEFA !important;
    background-image: radial-gradient(#F3E8FF 1px, transparent 1px);
    background-size: 40px 40px;
}

.ramadan-bg-star {
    position: fixed;
    background: #D4AF37; 
    border-radius: 50%;
    z-index: -1;
    animation: calmTwinkle 4s infinite alternate;
}
@keyframes calmTwinkle {
    0% { opacity: 0.1; transform: scale(0.8); }
    100% { opacity: 0.5; transform: scale(1.2); }
}

.hanging-rope-line {
    position: fixed;
    top: 20px; 
    left: -10%;
    width: 120%;
    height: 100px;
    border-bottom: 2px solid #C5A059;
    border-radius: 50%;
    z-index: 9998;
    opacity: 0.6;
}

.hanging-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: gentleSwing 5s ease-in-out infinite alternate;
}

.hanging-string {
    width: 1px;
    background: #C5A059;
}

.hanging-icon {
    font-size: 2.2rem;
    color: #D4AF37;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
    animation: goldGlow 3s infinite alternate;
}

@keyframes gentleSwing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

@keyframes goldGlow {
    0% { filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3)); opacity: 0.8; }
    100% { filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.8)); opacity: 1; }
}

.ramadan-falling-item {
    position: fixed;
    top: -50px;
    color: #D4AF37;
    z-index: 9999;
    opacity: 0.6;
    animation: fallingSlow linear infinite;
}
@keyframes fallingSlow {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.7; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

body.occasion-winter {
    background: linear-gradient(to bottom, #dbeafe, #eff6ff);
    background-attachment: fixed;
}

.snowflake {
    position: absolute;
    top: -20px;
    color: #93c5fd;
    opacity: 0.8;
    font-size: 1.2rem;
    animation: snowFall linear infinite;
}

@keyframes snowFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

body.occasion-love {
    background: linear-gradient(to bottom, #fff1f2, #ffe4e6);
    background-attachment: fixed;
}

.floating-heart {
    position: absolute;
    bottom: -50px;
    color: #e11d48;
    opacity: 0.6;
    animation: heartFloat linear infinite;
}

@keyframes heartFloat {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-110vh) scale(0.5); opacity: 0; }
}

body.occasion-default {
    background-color: #f9fafb;
    background-image: none;
}