.christmas-particle-layer {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    overflow: hidden;
}
.christmas-particle {
    position: absolute;
    top: -12vh;
    left: var(--particle-x, 50%);
    font-size: var(--particle-size, 14px);
    opacity: var(--particle-opacity, .8);
    text-shadow: 0 0 5px rgba(255,255,255,.28);
    animation: christmas-particle-fall var(--particle-duration, 12s) linear infinite;
    animation-delay: var(--particle-delay, 0s);
    will-change: transform;
}
@keyframes christmas-particle-fall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0deg); }
    50% { transform: translate3d(var(--particle-drift, 18px), 52vh, 0) rotate(180deg); }
    100% { transform: translate3d(calc(var(--particle-drift, 18px) * -1), 116vh, 0) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .christmas-particle-layer { display: none !important; }
}

.christmas-particle-layer.is-paused .christmas-particle{animation-play-state:paused!important}