/* Julbyn lever: dekoration ovanpå bakgrundsbilden och under luckorna (village.js).
   Bara opacity och transform animeras. Allt pausas när fliken är dold eller när ett fönster
   (ritläget, garaget) är öppet, och står still vid "minska rörelse". */
.village{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.village-map{position:absolute;left:0;top:0;--s:1}
.village i{position:absolute;display:block;width:calc(var(--r,10) * 2px * var(--s));height:calc(var(--r,10) * 2px * var(--s));translate:-50% -50%;border-radius:50%;animation-duration:var(--t,3s);animation-delay:var(--d,0s);animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.v-warm{background:radial-gradient(circle,#fffbe8 0 13%,#ffd86ee6 24%,#ffbe5455 46%,transparent 70%);animation-name:v-twinkle}
.v-colour{--t:2.8s;background:radial-gradient(circle,#fff 0 11%,var(--c) 20% 30%,color-mix(in srgb,var(--c) 40%,transparent) 44%,transparent 70%);animation-name:v-blink}
.v-glow{background:radial-gradient(circle,#fff3c8cc 0 8%,#ffd27a88 26%,#ffbf5a33 50%,transparent 70%)}
.v-lamp{--t:5s;animation-name:v-flicker}
.v-headlight{--t:9s;background:radial-gradient(circle,#fffbe8 0 10%,#fff2b8aa 28%,#ffe58a33 52%,transparent 70%);animation-name:v-flash;animation-timing-function:linear}
.v-star-glow{--t:2.6s;background:radial-gradient(circle,#fffbe0 0 12%,#ffe08ab3 26%,#ffcf5a40 50%,transparent 70%);animation-name:v-pulse}
.village .v-window{width:calc(var(--w) * 1px * var(--s));height:calc(var(--h) * 1px * var(--s));border-radius:35%;background:radial-gradient(closest-side,#ffe3a0d9,#ffc0596b 62%,transparent);animation-name:v-flicker}
.v-smoke{--t:7.2s;opacity:0;background:radial-gradient(circle,#fffffff0 0 28%,#f4f6f8a0 52%,transparent 72%);animation-name:v-smoke;animation-timing-function:ease-out}
.v-spray{--t:1.2s;opacity:0;background:radial-gradient(circle,#fff 0 40%,#ffffff99 60%,transparent 75%);animation-name:v-spray;animation-timing-function:ease-out}
.village .v-sparkle{opacity:0;border-radius:0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:radial-gradient(circle,#fff 0 30%,#fff2b8 60%,#ffd76a);animation-name:v-sparkle}
.village .v-star{--t:9s;opacity:.95;animation-name:v-star-spin;animation-timing-function:linear}
.village .v-snowman{display:none}
/* Hemligheterna under kalendern: granen och garaget glittrar extra, snögubben får stjärnor. */
.party-tree .v-tree,.party-tree .v-star-glow{animation-duration:.8s}
.party-garage .v-garage{animation-duration:.7s}
.village.party-garage .v-garage-lamp{animation:v-bright .6s ease-in-out 6 alternate}
.village.party-car .v-headlight{animation:v-bright .25s ease-in-out 8 alternate}.village.party-car .v-spray{animation-duration:.5s}
.village.party-snowman .v-snowman{display:block;animation-iteration-count:2}
@keyframes v-twinkle{0%,100%{opacity:.3;scale:.75}50%{opacity:1;scale:1.12}}
@keyframes v-blink{0%,38%{opacity:1;scale:1}50%,88%{opacity:.08;scale:.7}100%{opacity:1;scale:1}}
@keyframes v-flicker{0%,100%{opacity:.5}17%{opacity:.8}31%{opacity:.6}52%{opacity:.9}68%{opacity:.62}85%{opacity:.82}}
@keyframes v-pulse{0%,100%{opacity:.6;scale:.88}50%{opacity:1;scale:1.14}}
@keyframes v-star-spin{0%{rotate:0deg;scale:.8}50%{scale:1.2}100%{rotate:360deg;scale:.8}}
@keyframes v-smoke{0%{opacity:0;scale:.35;translate:-50% -50%}15%{opacity:.6}100%{opacity:0;scale:1.7;translate:calc(-50% - var(--s) * 42px) calc(-50% - var(--s) * 150px)}}
@keyframes v-spray{0%{opacity:0;scale:.4;translate:-50% -50%}12%{opacity:.95}100%{opacity:0;scale:1.4;translate:calc(-50% + var(--s) * var(--dx) * 1px) calc(-50% + var(--s) * var(--dy) * 1px)}}
@keyframes v-sparkle{0%,60%,100%{opacity:0;scale:0;rotate:0deg}72%{opacity:1;scale:1;rotate:45deg}86%{opacity:0;scale:.25;rotate:90deg}}
@keyframes v-flash{0%,74%,84%,94%,100%{opacity:.35}78%,88%{opacity:1}}
@keyframes v-string{0%,38%{opacity:1}50%,88%{opacity:.35}100%{opacity:1}}
@keyframes v-bright{from{opacity:.7;scale:1}to{opacity:1;scale:1.35}}

/* Ljusslinga högst upp i Mitt rallygarage. */
.garage-lights{position:absolute;top:0;left:0;right:0;height:24px;display:flex;pointer-events:none;overflow:hidden}
.garage-lights i{position:relative;flex:1}
.garage-lights i:before{content:'';position:absolute;left:0;right:0;top:-9px;height:14px;border-bottom:2px solid #2f4a3d;border-radius:0 0 50% 50%}
.garage-lights i:after{content:'';position:absolute;left:50%;top:6px;width:9px;height:13px;margin-left:-4.5px;border-top:3px solid #2f4a3d;border-radius:40% 40% 50% 50%/30% 30% 70% 70%;background:var(--c);box-shadow:0 0 9px 2px var(--c);animation:v-string 2.4s ease-in-out var(--d,0s) infinite}
.rally-garage.has-lights .garage-header{margin-top:6px}

.village.paused i,:root:has(dialog[open]) .village i,.rally-garage:not([open]) .garage-lights i:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 .village i,.garage-lights i:after{animation:none!important}
 .village .v-smoke,.village .v-spray,.village .v-sparkle{display:none!important}
 .village .v-bulb{opacity:.85}.village .v-window,.village .v-glow{opacity:.6}
}