/* Kop-illustratie (#scene). GEDEELD door de batterij-app (Victron-Tibber-integration) en de verwarmingsapp (CV-Analyse):
   in beide repo's byte-voor-byte gelijk. Alleen in CV-Analyse aanpassen, daarna webapp/tools/sync-scene.sh (test/test-scene.js). */
.scene-wrap { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--safe-t) + 300px); overflow: hidden; z-index: 0; pointer-events: none; }
#scene { width: 100%; height: 100%; display: block; }
#scene .ol { stroke: #1b2b3c; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
#scene .ol2 { fill: #ffffff; stroke: #9cc7d9; stroke-width: 1.2; stroke-linejoin: round; }
#scene .ground { fill: var(--page); }
#scene .shadow { fill: rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #scene .shadow { fill: rgba(0,0,0,.4); } }
:root[data-theme="dark"] #scene .shadow { fill: rgba(0,0,0,.4); }
#scene .wall { fill: #fff6e8; } #scene .wall2 { fill: #f0d9b8; } #scene .plinth { fill: #8a7a66; opacity: .55; }
#scene .roofb { fill: #2c3a4a; } #scene .fascia { fill: none; stroke: #f5f5f5; stroke-width: 1.6; stroke-linejoin: round; }
#scene .chim { fill: #c4573a; } #scene .chim2 { fill: #9e4229; } #scene .chim3 { fill: #2b2b2b; }
#scene .panel { fill: #1f3d6b; stroke: #9cc0ea; stroke-width: .7; transition: fill .8s; } #scene .pline { stroke: #6f95c4; stroke-width: .5; }
#scene.pv .panel { fill: #3373c4; }
#scene .win { fill: #a8dcf0; transition: fill .8s; } #scene .win2 { fill: #93cfe6; stroke: #1b2b3c; stroke-width: 1.3; transition: fill .8s; }
#scene .frame { stroke: #fff; stroke-width: 1.2; }
#scene .door { fill: #2f6f8f; } #scene .knob { fill: #ffd76a; } #scene .stepc { fill: #d9cbb6; }
#scene .battbox { fill: #ffffff; } #scene .battwin { fill: none; stroke: #1b2b3c; stroke-width: .9; } #scene .bled { fill: #27c46b; }
#scene .charger { fill: #23272b; }
#scene .led { fill: #8a939c; } #scene.plugged .led { fill: #3cb6d3; } #scene.charging .led { fill: #3ddc84; animation: blink 1.2s ease-in-out infinite; }
#scene .car { fill: #f7f9fb; } #scene .carfar { fill: #d3dae1; } #scene .cartop { fill: #e9eef3; } #scene .carhood { fill: #fbfcfd; } #scene .carnose { fill: #e3e8ee; }
#scene .carglass { fill: #121820; } #scene .carglass2 { fill: #121820; }
#scene .crease { fill: none; stroke: #c6ced7; stroke-width: .7; } #scene .handle { stroke: #9aa5b1; stroke-width: 1; stroke-linecap: round; }
#scene .tyre { fill: #16191c; } #scene .rim { fill: #b8c0c8; stroke: #5d6670; stroke-width: .6; } #scene .spoke { stroke: #5d6670; stroke-width: 1.1; stroke-linecap: round; } #scene .hub { fill: #2b2f33; }
#scene .lamp { fill: #fff3c4; } #scene .tail { fill: #d81f2f; }
#scene .cable { fill: none; stroke: #23272b; stroke-width: 1.8; stroke-linecap: round; }
#scene.charging .cable { stroke: #2fd57a; stroke-dasharray: 3 3; animation: cableflow .9s linear infinite; }
#scene .trunk { fill: #7a4f2a; } #scene .lf1 { fill: #f08d2c; } #scene .lf2 { fill: #e4692a; } #scene .bush { fill: #5aa64a; }
#scene .shine { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; }
#scene .c1 { animation: drift 60s linear infinite; } #scene .c2 { animation: drift 85s linear infinite; } #scene .c3 { animation: drift 70s linear infinite reverse; }
#scene .sun { fill: #ffd24d; } #scene .ray { stroke: #ffd24d; stroke-width: 2.4; stroke-linecap: round; }
#scene .moon { fill: #f1f3f8; display: none; } #scene .star { fill: #fff; display: none; }
#scene.night #sc-sky { fill: url(#skyNight); }
#scene.night #sc-sun { display: none; } #scene.night .moon, #scene.night .star { display: block; }
#scene.night .ol2 { fill: #3a5680; stroke: #4d6b96; }
#scene.night .win, #scene.night .win2 { fill: #ffd27a; } #scene.night .wall { fill: #b7b0a6; } #scene.night .wall2 { fill: #9d9180; }
#scene.night .car { fill: #c9d0d8; } #scene.night .cartop { fill: #b6bec8; } #scene.night .battbox { fill: #d5d9de; }
#scene #sc-batt { transition: y .8s, height .8s; }
@keyframes drift { from { transform: translateX(-30px); } 50% { transform: translateX(30px); } to { transform: translateX(-30px); } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes cableflow { to { stroke-dashoffset: -6; } }
@media (prefers-reduced-motion: reduce) { #scene .cloud, #scene .led, #scene .cable { animation: none !important; } }
#scene .carrail { fill: none; stroke: #e9eef3; stroke-width: .9; } #scene .carshoulder { fill: #e6ebf0; }
#scene .carintake { fill: #1d232a; } #scene .carplate { fill: #f2f2f2; stroke: #9aa5b1; stroke-width: .4; }
#scene .lightbar { fill: none; stroke: #2a3038; stroke-width: 1.1; stroke-linecap: round; }
#scene.night .lightbar { stroke: #fff6c8; filter: drop-shadow(0 0 2px #fff); }
#scene .carlamp { fill: #2a3038; stroke: #fff3c4; stroke-width: .5; }
#scene.night .carlamp { fill: #fff3c4; }
#scene .battside { fill: #d6dbe1; } #scene .batttop { fill: #eef1f4; }
#scene.night .battside { fill: #a9b0b8; } #scene.night .batttop { fill: #c3c9d0; }
/* schemer: --dusk 0..1 (uit het PV-vermogen); avondrood over de dagblauwe lucht, zon zakt en kleurt oranje, ramen gaan aan */
#scene { --dusk: 0; }
#scene #sc-dusk { opacity: var(--dusk); transition: opacity 2s; }
#scene.night #sc-dusk { opacity: 0; }
/* zon en maan bewegen over een boog (app.js, transform op #sc-sun-pos / #sc-moon-pos) */
#scene #sc-sun-pos, #scene #sc-moon-pos { transition: transform 2s; }
#scene.dusk .sun { fill: #ff9a3d; } #scene.dusk .ray { stroke: #ff9a3d; }
#scene.dusk .ol2 { fill: #f3d6d6; }
#scene.dusk.lit .win, #scene.dusk.lit .win2 { fill: #ffd27a; }
/* weer (Buienradar + regenmeter): grijze lucht bij bewolking/neerslag, regen, sneeuw, onweer */
#scene #sc-grey { fill: #7d8894; opacity: 0; transition: opacity 2s; }
#scene.overcast #sc-grey { opacity: .45; } #scene.wet #sc-grey { opacity: .6; } #scene.night #sc-grey { fill: #0d1626; }
#scene #sc-sun { opacity: var(--sunb, 1); transition: opacity 2s; } #scene.wet .moon { opacity: .7; } #scene.wet .star { opacity: .35; }
#scene.overcast .ol2, #scene.wet .ol2 { fill: #c9d0d8; } #scene.night.wet .ol2 { fill: #2c3a52; }
#scene #sc-rain, #scene #sc-snow { display: none; pointer-events: none; } #scene.rain #sc-rain, #scene.snow #sc-snow { display: block; }
#scene .drop { stroke: #b9d6f2; stroke-width: 1.3; stroke-linecap: round; opacity: .8; animation: rainfall .8s linear infinite; }
#scene.heavy .drop { stroke-width: 1.6; animation-duration: .55s; }
#scene .flake { fill: #fff; opacity: .9; animation: snowfall 9s linear infinite; }
#scene #sc-flash { fill: #fff; opacity: 0; pointer-events: none; } #scene.storm #sc-flash { animation: flash 9s infinite; }
@keyframes rainfall { from { transform: translate(0, 0); } to { transform: translate(-30px, 290px); } }
@keyframes snowfall { 0% { transform: translate(0, 0); } 25% { transform: translate(8px, 72px); } 50% { transform: translate(-6px, 145px); } 75% { transform: translate(6px, 218px); } 100% { transform: translate(0, 290px); } }
@keyframes flash { 0%, 90%, 93%, 100% { opacity: 0; } 91% { opacity: .7; } 92% { opacity: .1; } 92.5% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { #scene .drop, #scene .flake, #scene.storm #sc-flash { animation: none !important; } }
/* wind (Buienradar, km/u): bries ≥ 20, hard ≥ 39 (Bft 6), storm ≥ 62 (Bft 8) */
#scene .crown { transform-box: fill-box; transform-origin: 50% 100%; }
#scene.breeze .crown { animation: sway1 3s ease-in-out infinite; }
#scene.windy .crown { animation: sway2 1.6s ease-in-out infinite; }
#scene.gale .crown { animation: sway3 .9s ease-in-out infinite; }
#scene.windy .c1, #scene.windy .c2, #scene.windy .c3 { animation-duration: 18s; }
#scene.gale .c1, #scene.gale .c2, #scene.gale .c3 { animation-duration: 9s; }
#scene.windy .drop, #scene.gale .drop { animation-name: rainslant; }
#scene #sc-leaves { display: none; pointer-events: none; } #scene.gale #sc-leaves { display: block; }
#scene .leaf { animation: leaffly 3s linear infinite; }
@keyframes sway1 { 0%, 100% { transform: rotate(1deg); } 50% { transform: rotate(-3deg); } }
@keyframes sway2 { 0%, 100% { transform: rotate(-3deg) skewX(3deg); } 50% { transform: rotate(-10deg) skewX(8deg); } }
@keyframes sway3 { 0%, 100% { transform: rotate(-8deg) skewX(6deg); } 50% { transform: rotate(-17deg) skewX(13deg); } }
@keyframes rainslant { from { transform: translate(0, 0); } to { transform: translate(-110px, 290px); } }
@keyframes leaffly { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(-220px, -40px) rotate(-360deg); } 90% { opacity: 1; } 100% { transform: translate(-440px, 10px) rotate(-720deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #scene .crown, #scene .leaf { animation: none !important; } }
/* maan met de juiste fase (pad uit app.js), donker deel licht zichtbaar */
#scene .moondark { fill: #2a3550; stroke: #4d6b96; stroke-width: 1; } #scene .moonlit { fill: #f1f3f8; }
/* regenintensiteit uit Buienradar (mm/u): r1 = motregen … r4 = zware regen */
#scene .drop.r2, #scene .drop.r3, #scene .drop.r4 { display: none; }
#scene.rain2 .drop.r2, #scene.rain3 .drop.r2, #scene.rain3 .drop.r3, #scene.rain4 .drop.r2, #scene.rain4 .drop.r3, #scene.rain4 .drop.r4 { display: inline; }
#scene.rain1 .drop { opacity: .55; stroke-width: 1; }
/* bewolking (Buienradar-symbool): 0 zonnig … 3 zwaar bewolkt; meer wolken en een grijzere lucht */
#scene .cv1, #scene .cv2, #scene .cv3 { display: none; }
#scene.clouds1 .cv1, #scene.clouds2 .cv1, #scene.clouds2 .cv2, #scene.clouds3 .cv1, #scene.clouds3 .cv2, #scene.clouds3 .cv3 { display: inline; }
#scene.clouds2 #sc-grey { opacity: .2; } #scene.clouds3 #sc-grey { opacity: .45; }
/* zon: felheid uit de straling (--sunb 0,25…1), gloed bij veel zon */
#scene .sunglow { fill: #ffe27a; opacity: calc((var(--sunb, 1) - .6) * 1.2); filter: blur(4px); }
#scene.dusk .sunglow { fill: #ffb36b; }
#scene.clouds3 .ol2 { fill: #c9d0d8; } #scene.night.clouds3 .ol2 { fill: #2c3a52; }
/* kop: airco-buitenunit en rookpijpje */
#scene .acbox { fill: #f3f4f6; } #scene .acside { fill: #d3d8de; } #scene .actop { fill: #e7eaee; }
#scene .acring { fill: #39424d; stroke: #8b949e; stroke-width: .6; } #scene .blade { fill: #aab3bd; } #scene .acgrille { stroke: #aab2bb; stroke-width: .7; }
#scene .acfoot { stroke: #6d757e; stroke-width: 1.4; }
#scene.night .acbox { fill: #c9ced4; } #scene.night .acside { fill: #a3aab2; }
#scene #sc-fan-run { display: none; } #scene.acon #sc-fan-run { display: inline; } #scene.acon #sc-fan-still { display: none; }
#scene .pipe { fill: #c8ccd1; } #scene .pipecap { fill: #9aa1a8; }
#scene #sc-smoke { display: none; } #scene.burning #sc-smoke { display: inline; }
#scene .puff { fill: #e9edf1; opacity: 0; animation: puff 3.6s ease-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
#scene.night .puff { fill: #8d97a3; }
@keyframes puff { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .85; } 100% { opacity: 0; transform: translate(9px, -26px) scale(1.8); } }
@media (prefers-reduced-motion: reduce) { #scene .puff { animation: none; opacity: .6; } }
#scene .wpbox { fill: #c9cdd2; } #scene.night .wpbox { fill: #9ea4ab; }
#scene #sc-wp-run { display: none; } #scene.wpon #sc-wp-run { display: inline; } #scene.wpon #sc-wp-still { display: none; }