/* Jule-pynt (sne og lyskæde), som applyTheme('xmas') i app.js sætter ind. Bruges af spillet og af hub-siderne. */

.xmas-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Sne i to lag, der falder i hver sit tempo. Flyttes præcis to fliser, så løkken ikke hopper. */
.xmas-snow {
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        radial-gradient(3px 3px at 30px 40px, #fff 50%, transparent 52%),
        radial-gradient(2px 2px at 110px 160px, #fff 50%, transparent 52%),
        radial-gradient(3px 3px at 200px 90px, #fff 50%, transparent 52%),
        radial-gradient(2px 2px at 260px 230px, #fff 50%, transparent 52%),
        radial-gradient(2.5px 2.5px at 160px 280px, #fff 50%, transparent 52%);
    background-size: 300px 300px;
    animation: xmas-snow 18s linear infinite;
}
.xmas-snow.far {
    opacity: .3;
    background-size: 180px 180px;
    animation-duration: 28s;
    filter: blur(.5px);
}
@keyframes xmas-snow { to { background-position: 40px 600px; } }
.xmas-snow.far { animation-name: xmas-snow-far; }
@keyframes xmas-snow-far { to { background-position: -20px 360px; } }

/* Lyskæde hen over toppen. */
.xmas-lights { position: absolute; left: 0; right: 0; top: 0; height: 40px; }
.xmas-lights svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xmas-lights .bulb {
    position: absolute;
    top: 9px;
    width: 12px;
    height: 18px;
    margin-left: -6px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: var(--c);
    box-shadow: 0 0 10px 2px var(--c), 0 0 22px var(--c);
    transform: rotate(var(--r));
    animation: xmas-twinkle 2.6s ease-in-out infinite;
    animation-delay: var(--d);
}
.xmas-lights .bulb::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #2b2420;
}
@keyframes xmas-twinkle { 50% { opacity: .35; box-shadow: 0 0 3px var(--c); } }