/* Floating panel on left side */
/* Floating panel: bottom-left with spacing */
.holiday-panel {
    position: fixed;
    bottom: 30px;
    left: 25px;
    z-index: 9999;
    width: 232px; /* increased from 160px */
    transition: width 0.3s ease;
}

.holiday-panel img {
    width: 100%;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

/* Animated items now appear anywhere */
.holiday-decor-item {
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

/* Rain from top */
@keyframes rain {
    0%   { transform: translateY(-100px) rotate(-30deg); opacity: 0; }
    10%  { opacity: var(--item-opacity); }
    50%  { transform: translateY(50vh) rotate(30deg); } /* mid-fall tilt */
    100% { transform: translateY(110vh) rotate(-45deg); opacity: var(--item-opacity); }
}

/* Natural firework-style upward launch */
@keyframes firework-launch {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.3) rotate(var(--rot-start));
    }
    20% {
        opacity: var(--item-opacity);
        transform: translateY(0px) scale(1) rotate(var(--rot-mid));
    }
    80% {
        opacity: var(--item-opacity);
        transform: translateY(var(--launch-height)) scale(1.05) rotate(var(--rot-end));
    }
    100% {
        opacity: 0;
        transform: translateY(calc(var(--launch-height) - 40px)) scale(0.9) rotate(var(--rot-end));
    }
}

/* dancing panel animation */
@keyframes dance {
    0%   { transform: translateX(0) rotate(0deg); }
    25%  { transform: translateX(-12px) rotate(-3deg); }
    50%  { transform: translateX(0) rotate(0deg); }
    75%  { transform: translateX(12px) rotate(3deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

/* jumping panel animation */
@keyframes jump {
    0%   { transform: translateY(0) scale(1); }
    20%  { transform: translateY(-20px) scale(1.05); }
    40%  { transform: translateY(0) scale(0.95); }
    60%  { transform: translateY(-10px) scale(1.03); }
    80%  { transform: translateY(0) scale(0.97); }
    100% { transform: translateY(0) scale(1); }
}

/* Explosion particles */
@keyframes firework-particle {
    0% { transform: scale(0); opacity: 1; }
    70% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}