/* Weather is light within the glass, rather than a panel over the facade. */
.splash{--wall-light:.78;--wall-saturation:1;--ambient:transparent;--ambient-strength:0;--sky-light:.24}
.facade,.green-facade{filter:brightness(var(--wall-light)) saturate(var(--wall-saturation));transition:filter 6s ease}
.atmosphere{filter:blur(36px) brightness(var(--sky-light));transition:filter 6s ease}
.scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--ambient);opacity:var(--ambient-strength);mix-blend-mode:screen;transition:background 6s ease,opacity 6s ease}
.splash[data-phase="sunny"]{--wall-light:1.1;--sky-light:.46;--wall-saturation:.88;--ambient:linear-gradient(120deg,#d6eeff80,transparent 45%),radial-gradient(ellipse at 12% 5%,#fff2cda0,transparent 75%);--ambient-strength:.52}
.splash[data-phase="day"]{--wall-light:.91;--sky-light:.34;--wall-saturation:.85;--ambient:linear-gradient(150deg,#bcdbed36,transparent 70%);--ambient-strength:.4}
.splash[data-phase="sunrise"]{--wall-light:.91;--sky-light:.35;--ambient:linear-gradient(115deg,#ffcba77d,transparent 65%),linear-gradient(0deg,#819ed24a,transparent 75%);--ambient-strength:.65}
.splash[data-phase="sunset"]{--wall-light:.85;--sky-light:.3;--wall-saturation:1.12;--ambient:linear-gradient(245deg,#ff906b7a,transparent 65%),linear-gradient(0deg,#b248a855,transparent 80%);--ambient-strength:.65}
.splash[data-phase="night"]{--wall-light:.58;--sky-light:.16;--ambient:linear-gradient(145deg,#3265a237,transparent 70%);--ambient-strength:.32}
.splash[data-rain="true"]{--wall-light:.62;--sky-light:.2;--wall-saturation:.72;--ambient:linear-gradient(135deg,#7fa5be40,transparent 80%);--ambient-strength:.5}
/* Blend at the button layer so dark photo pixels reveal the facade behind it.
   Photo and live cathodes retain one shared coordinate system. */
.weather-block{mix-blend-mode:screen;position:absolute;left:75.4%;top:14.4%;width:7.7%;height:13.05%;z-index:3;display:block;padding:0;border:0;border-radius:9%;background:transparent;color:#ffd1a1;font-family:Arial,Helvetica,sans-serif;cursor:pointer;text-align:center;touch-action:manipulation}
.weather-block::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.weather-nixie-art{position:absolute;inset:1%;overflow:hidden;border-radius:7%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
.weather-nixie-glass,.weather-nixie-display{position:absolute;left:-11%;top:-11%;width:122%;height:122%;max-width:none;pointer-events:none;user-select:none}
.weather-block{mix-blend-mode:normal}
.weather-nixie-art{background:radial-gradient(ellipse,#01030755,transparent 76%)}
.weather-nixie-glass{object-fit:fill;opacity:.06;filter:brightness(.6) saturate(0);mix-blend-mode:screen}
.weather-block[data-art-ready="true"] .weather-nixie-glass{opacity:.035}
.weather-nixie-display{overflow:visible;filter:brightness(var(--block-neon-gain,1.35));opacity:1;transition:opacity .4s ease,filter .45s ease}
.weather-block:hover .weather-nixie-display,.weather-block:focus-visible .weather-nixie-display,.scene[data-active="true"] .weather-nixie-display{opacity:1}
.nixie-electrode path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.nixie-halo{stroke:#ff631c;stroke-width:22;opacity:.85;filter:blur(10px);transition:stroke-width .45s ease,filter .45s ease}
.weather-block:is(:hover,:focus-visible) .nixie-halo{stroke-width:30;filter:blur(30px)}
.nixie-glow{stroke:#ff842f;stroke-width:9;filter:blur(2.5px)}
.nixie-wire{stroke:#ffeac6;stroke-width:3.8}
.weather-block[data-weather-state="unavailable"] .nixie-digit{opacity:.45}
.weather-block[data-weather-state="loading"] .nixie-digit{opacity:.65}
.weather-block:focus-visible{outline:1px solid #dcf5ff;outline-offset:4px}
.weather-detail{position:absolute;right:0;top:calc(100% + 12px);width:230px;padding:12px 14px;border:1px solid #aee0ff44;border-radius:8px;background:#07121fea;box-shadow:0 0 20px #94ddff22;color:#e0f5ff;font-size:14px;line-height:1.5;text-shadow:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.weather-block:hover .weather-detail,.weather-block:focus .weather-detail{opacity:1;visibility:visible;transform:translateY(0)}
.weather-credit:focus{clip:auto;width:auto;height:auto;overflow:visible;left:24px;bottom:24px;z-index:10;padding:12px;background:#081923;color:#c9eeff;font-size:14px}
.weather-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;opacity:0;transition:opacity 3s ease}
.splash[data-rain="true"] .weather-rain{opacity:.7}
@media(max-width:600px){.weather-detail{right:-20px;width:210px}}
@media(prefers-reduced-motion:reduce){.facade,.green-facade,.atmosphere,.scene::after,.weather-rain{transition:none}.weather-detail{transition:none}}