/* Christmas Decorations Frontend Styles */

#xmas-decor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.xmas-particle {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    user-select: none;
}

.xmas-particle svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Snowflake specific */
.xmas-particle-snowflakes {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Confetti specific */
.xmas-particle-confetti {
    border-radius: 2px;
}

/* Lights specific */
.xmas-particle-lights {
    filter: blur(0.5px);
}

/* Animation keyframes for wobble */
@keyframes xmas-wobble {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(var(--wobble-amount, 20px));
    }
}

/* Animation keyframes for glow effect */
@keyframes xmas-glow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 3px currentColor);
    }
    50% {
        filter: brightness(1.3) drop-shadow(0 0 8px currentColor);
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .xmas-particle {
        animation: none !important;
        transition: none !important;
    }
}