/* Het pand vandaag (pand-vandaag.js): alleen de Workx-ramen lichten op, met de echte tijd en het seizoen */
/* Workx-ramen: begane grond, voordeur en de dakkapellen van de 4e verdieping */
.wx-raam { fill: var(--geel); }
.wx-gloed { mix-blend-mode: multiply; pointer-events: none; }
/* verdieping 1-3 zijn van andere huurders: neutraal getekend, geen geel */
.wx-buren { fill: #f3f3ee; }
.wx-buren-gloed { display: none; }
.avond-pand .wx-buren { fill: #2c2c2a; }
.avond-pand .wx-gloed { mix-blend-mode: screen; }
.contact.avond.licht .avond-pand .wx-raam { filter: drop-shadow(0 0 4px rgba(249,255,133,.6)); }
.verhaal-pand .wx-buren { fill: #f3f3ee; }
/* aan/uit volgens de tijd: 'uit' wint van de intro-animatie */
.held-pand .uit, .avond-pand .uit { animation: none !important; opacity: 0 !important; }
/* overdag: ramen zacht (daglicht), geen gloed; schemer: halve gloed */
.held-pand.buiten-licht .wx-raam { fill-opacity: .7; }
.held-pand.buiten-licht .wx-dakkapel { fill-opacity: 0; }
.held-pand.buiten-licht .wx-gloed { visibility: hidden; }
.held-pand.buiten-schemer .wx-gloed { fill-opacity: .6; }
.held-pand .wx-raam, .held-pand .wx-gloed, .avond-pand .wx-raam { transition: fill-opacity 1.2s ease; }

/* ---------- seizoensdetails ---------- */
.wx-sneeuw-vlak { fill: var(--wit); stroke: #9a9a94; stroke-width: .35; stroke-linejoin: round; }
.avond-pand .wx-sneeuw-vlak { fill: #ecece6; stroke: none; }
.wx-vlok { fill: var(--wit); stroke: var(--steen-licht); stroke-width: .3; }
.avond-pand .wx-vlok { fill: #e9e9e3; stroke: none; opacity: .8; }
.wx-blad { fill: #8fae6a; }
.wx-bloem.roze { fill: #f2a7b8; } .wx-bloem.wit { fill: var(--wit); stroke: var(--schakel); stroke-width: .25; }
.avond-pand .wx-blad { fill: #5f7a47; } .avond-pand .wx-bloem.wit { stroke: none; }
.wx-stok { stroke: #3c3c3b; stroke-width: .7; stroke-linecap: round; fill: none; }
.avond-pand .wx-stok { stroke: #9a9a94; }
.wx-wimpel { fill: #f39200; }
.wx-wimpel-licht { fill: var(--wit); opacity: .18; }
.wx-herfstblad.a { fill: #d98c3a; } .wx-herfstblad.b { fill: #b8642e; }
.wx-nerf { stroke: rgba(0,0,0,.25); stroke-width: .3; fill: none; }
.wx-krans { fill: none; stroke: #4f7a45; stroke-width: 2.6; }
.wx-krans-gat { display: none; }
.wx-strik { fill: #c4363a; }
.wx-snoer { fill: none; stroke: #6d6d68; stroke-width: .3; }
.wx-lampje { fill: #ffd66b; }
.avond-pand .wx-lampje { filter: drop-shadow(0 0 1.5px rgba(255,214,107,.9)); }
/* zachte beweging: vlokken en blaadjes dwarrelen, lampjes twinkelen heel licht */
@keyframes wxDwarrel { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes wxTwinkel { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes wxWapper { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-4deg); } }
.wx-seizoen:not(.stil) .wx-vlok { animation: wxDwarrel 9s linear infinite; animation-delay: calc(var(--i) * -1.1s); transform-box: fill-box; }
.wx-seizoen:not(.stil) .wx-blad-val > * { animation: wxDwarrel 12s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.wx-seizoen:not(.stil) .wx-lampje { animation: wxTwinkel 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.wx-seizoen:not(.stil) .wx-wimpel, .wx-seizoen:not(.stil) .wx-wimpel-licht { animation: wxWapper 4s ease-in-out infinite; transform-origin: 168px 320px; }
@media (prefers-reduced-motion: reduce) { .wx-seizoen * { animation: none !important; } }
/* buiten beeld stil op dezelfde stand (script.js zet .buiten-beeld op het pand); in beeld verandert niets */
.buiten-beeld .wx-seizoen * { animation-play-state: paused !important; }
/* demo-schakelaar in de conceptbalk */
.contact.avond.licht .avond-pand .wx-buren { filter: none; }