.elevation-section{padding:90px 6% 45px}.elevation-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin:0 2% 35px}.elevation-heading>p{max-width:340px;font-size:12px;color:var(--muted)}.elevation-scene{isolation:isolate;position:relative;height:660px;overflow:hidden;background:#aac8d0;border:1px solid #b8c1ad}.facade-image{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block;transition:filter 2s}.facade-night,.facade-glow,.weather-stars,.weather-rain,.weather-mist,.weather-lightning{position:absolute;inset:0;pointer-events:none;transition:opacity 2s;opacity:0}.facade-night{background:linear-gradient(#091b49b8,#0c20384d 50%,#061c2b9c);mix-blend-mode:multiply}.facade-glow{background:radial-gradient(ellipse at 50% 77%,#ffc56c55,transparent 28%),radial-gradient(ellipse at 28% 70%,#ffbd5c33,transparent 15%),radial-gradient(ellipse at 73% 70%,#ffbd5c33,transparent 15%);mix-blend-mode:screen}.weather-sun,.weather-moon{position:absolute;top:8%;right:15%;width:55px;height:55px;border-radius:50%;pointer-events:none;transition:opacity 2s}.weather-sun{background:#fff6cd;box-shadow:0 0 65px 28px #ffe7a580;opacity:.75}.weather-moon{background:#fff9df;box-shadow:0 0 30px #edf5e949;opacity:0;width:32px;height:32px}.weather-stars{background-image:radial-gradient(1px 1px at 12% 7%,#fff 90%,transparent),radial-gradient(1px 1px at 58% 12%,#fff 90%,transparent),radial-gradient(1px 1px at 44% 5%,#fff 90%,transparent),radial-gradient(1px 1px at 75% 15%,#fff 90%,transparent),radial-gradient(1px 1px at 92% 9%,#fff 90%,transparent)}[data-light=night] .facade-image{filter:brightness(.46) saturate(.7) contrast(1.05)}[data-light=night] .facade-night,[data-light=night] .facade-glow,[data-light=night] .weather-moon,[data-light=night] .weather-stars{opacity:1}[data-light=night] .weather-sun{opacity:0}.weather-cloud{position:absolute;top:4%;left:-25%;width:46%;height:100px;border-radius:50%;background:#edf1ed;filter:blur(25px);opacity:0;pointer-events:none;animation:cloud-drift 55s linear infinite;transition:opacity 2s}.cloud-two{top:12%;width:30%;animation-duration:80s;animation-delay:-32s;filter:blur(30px)}[data-weather=cloudy] .weather-cloud,[data-weather=rain] .weather-cloud,[data-weather=storm] .weather-cloud{opacity:.55}[data-weather=rain] .weather-sun,[data-weather=storm] .weather-sun,[data-weather=cloudy] .weather-sun,[data-weather=mist] .weather-sun{opacity:.12}[data-weather=storm] .weather-moon,[data-weather=rain] .weather-moon,[data-weather=cloudy] .weather-stars{opacity:.2}[data-weather=rain] .facade-image,[data-weather=storm] .facade-image{filter:brightness(.8) saturate(.6)}[data-light=night][data-weather=rain] .facade-image,[data-light=night][data-weather=storm] .facade-image{filter:brightness(.37) saturate(.55)}.weather-rain{inset:-100px -50px;background-image:repeating-linear-gradient(105deg,transparent 0 37px,#edf6ff94 38px,#edf6ff94 39px,transparent 40px 81px);background-size:93px 85px;mask-image:repeating-linear-gradient(0deg,#000 0 15px,transparent 18px 85px);animation:rain-fall .65s linear infinite;transform:rotate(6deg)}[data-weather=rain] .weather-rain{opacity:.38}[data-weather=storm] .weather-rain{opacity:.7;animation-duration:.4s}.weather-mist{background:linear-gradient(0deg,#e5eceabf,transparent 65%);filter:blur(9px);animation:mist-drift 15s ease-in-out infinite}[data-weather=mist] .weather-mist{opacity:1}.weather-lightning{background:#e4f0ff;transition:none;animation:lightning 13s infinite}[data-weather=storm] .weather-lightning{display:block}.elevation-scene:not([data-weather=storm]) .weather-lightning{display:none}.scene-breeze{position:absolute;inset:0;overflow:hidden;pointer-events:none}.scene-breeze i{position:absolute;left:-30%;top:40%;width:45%;height:65px;border-top:1px solid #f4f5dd80;border-radius:50%;animation:scene-wind var(--wind-duration,13s) ease-in-out infinite}.scene-breeze i:nth-child(2){top:70%;animation-delay:-6s}.scene-breeze i:nth-child(3){top:25%;animation-delay:-9s}.weather-card{position:absolute;top:25px;left:25px;width:300px;padding:20px 23px;background:#f8f5eaeF;backdrop-filter:blur(10px);color:var(--ink);border:1px solid #f7f6e9;box-shadow:0 5px 25px #19362b13}.weather-location{font-size:8px;letter-spacing:1.4px}.weather-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#a99b7d;margin-right:5px}.weather-card.fresh .weather-dot{background:#4a8862;box-shadow:0 0 0 3px #6c966321}.weather-primary{display:flex;align-items:center;gap:12px;margin:9px 0}.weather-primary strong{font:36px Georgia,serif;white-space:nowrap}.weather-primary #weather-symbol{font-size:22px}.weather-primary #weather-condition{font-size:11px;line-height:1.5}#weather-wind{font-size:10px}#weather-updated{font-size:8px;color:#78806f;margin-top:7px}.elevation-controls{position:absolute;bottom:48px;left:25px;right:25px;display:flex;justify-content:space-between;gap:15px;align-items:center}.light-controls{display:flex;padding:4px;background:#f6f3e9ed;border:1px solid #c1c9b5;backdrop-filter:blur(8px)}.light-controls button{padding:11px 16px;font-size:10px}.light-controls [aria-pressed=true]{background:var(--ink);color:#f8f3e5}.elevation-controls label{color:#fff;background:#214337dd;padding:8px 10px;display:flex;gap:12px;align-items:center;font-size:9px}.elevation-controls select{width:auto;font-size:10px;margin:0;padding:7px;background:#f6f3e9;border:0}.scene-mode{position:absolute;bottom:15px;left:25px;color:#fff;font-size:9px;letter-spacing:.4px;text-shadow:0 1px 5px #142f2a}.elevation-note{display:flex;justify-content:space-between;gap:20px;margin:14px 0;font-size:8px;color:var(--muted)}.elevation-note a,.elevation-note button{text-decoration:underline;font-size:inherit;padding:0}.elevation-note button:disabled{opacity:.6}@keyframes cloud-drift{to{transform:translateX(350%)}}@keyframes rain-fall{to{background-position:-20px 85px;translate:-8px 45px}}@keyframes mist-drift{50%{transform:translateX(5%);filter:blur(18px)}}@keyframes lightning{0%,90%,92%,94%,100%{opacity:0}90.5%,93%{opacity:.45}}@keyframes scene-wind{0%,100%{transform:translateX(0);opacity:0}30%{opacity:.7}70%{transform:translateX(300%);opacity:0}}@media(max-width:1100px){header{gap:20px}nav{gap:16px}.elevation-scene{height:580px}.elevation-heading>p{max-width:290px}}@media(max-width:800px){.elevation-section{padding:55px 6% 20px}.elevation-heading{display:block;margin-bottom:25px}.elevation-heading>p{margin-top:20px;max-width:500px}.elevation-scene{height:590px}.facade-image{object-fit:cover;object-position:center}.weather-card{left:15px;top:15px;width:250px;padding:14px 17px}.weather-primary strong{font-size:30px}.weather-primary #weather-condition{font-size:10px}.elevation-controls{left:15px;right:15px;bottom:65px;align-items:start;flex-direction:column;gap:10px}.light-controls button{padding:10px 13px}.elevation-controls label{padding:6px 8px}.scene-mode{left:15px;right:15px;bottom:17px;font-size:8px}.elevation-note{flex-direction:column;gap:5px;font-size:8px}.weather-cloud{height:70px}.weather-sun{right:12%;top:8%;width:35px;height:35px}}
.facade-night-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;opacity:0;transition:opacity 2s,filter 2s;pointer-events:none}[data-light=night] .facade-night-image{opacity:1}[data-light=night] .facade-night,[data-light=night] .facade-glow{opacity:0}[data-light=night][data-weather=rain] .facade-night-image,[data-light=night][data-weather=storm] .facade-night-image{filter:brightness(.8) saturate(.85)}.weather-cloud{top:-4%;height:70px;filter:blur(20px)}.cloud-two{top:2%}.elevation-scene{height:auto;aspect-ratio:3/2}.facade-image{height:100%;position:absolute;inset:0}@media(max-width:800px){.elevation-scene{aspect-ratio:auto;height:570px;background:linear-gradient(#b9d3df 0%,#c8dedf 45%,#dddac9 70%,#bcc1b4 100%)}.elevation-scene[data-light=night]{background:linear-gradient(#12243d,#263954 55%,#23362e)}.facade-image,.facade-night-image{top:150px;height:auto;width:100%;object-fit:contain;object-position:center;inset-inline:0}.weather-moon,.weather-sun{top:7%;right:8%;width:25px;height:25px}.weather-cloud{height:50px}.elevation-controls{bottom:64px}.scene-mode{bottom:18px}}

/* Use the supplied facade photograph for both lighting modes. */
.elevation-scene{aspect-ratio:1955/1301}.facade-image{object-position:center center}[data-light=night] .facade-image{filter:brightness(.7) saturate(.85)}[data-light=night] .facade-night{opacity:.2}[data-light=night] .facade-glow{opacity:.25}[data-light=night][data-weather=rain] .facade-image,[data-light=night][data-weather=storm] .facade-image{filter:brightness(.6) saturate(.7)}@media(max-width:800px){.elevation-scene{aspect-ratio:auto}}

/* Quiet photographic atmosphere, preserving the original facade. */
.elevation-scene{--rain-opacity:.14;--rain-speed:1s;--rain-slant:-8px;--ambient:.84;--cloud-opacity:.18}
.facade-image{transition:filter 5s ease;filter:brightness(var(--ambient)) saturate(.95)}
[data-light=night] .facade-image,[data-weather=rain] .facade-image,[data-weather=storm] .facade-image,[data-light=night][data-weather=rain] .facade-image,[data-light=night][data-weather=storm] .facade-image{filter:brightness(var(--ambient)) saturate(.9)}
.facade-night{background:linear-gradient(180deg,#25395045,transparent 65%);mix-blend-mode:multiply}
[data-light=night] .facade-night{opacity:.16}
.facade-glow{background:radial-gradient(ellipse at 50% 80%,#ffc27718,transparent 32%);mix-blend-mode:screen}
[data-light=night] .facade-glow{opacity:.4}
.weather-sun,.weather-moon,.weather-stars,.weather-lightning{display:none!important}
.weather-cloud{top:-12%;height:26%;width:70%;left:-65%;border-radius:45%;background:linear-gradient(180deg,#aabac733,#e4e9e52b,transparent);filter:blur(30px);animation:cloud-drift 115s linear infinite;mask-image:linear-gradient(#000,transparent)}
.cloud-two{top:-7%;width:60%;animation-duration:155s;animation-delay:-80s;filter:blur(34px)}
[data-weather=cloudy] .weather-cloud,[data-weather=rain] .weather-cloud,[data-weather=storm] .weather-cloud{opacity:var(--cloud-opacity)}
.weather-rain{inset:-80px;background-image:linear-gradient(103deg,transparent 48%,#e4edf05c 49%,#e4edf05c 49.5%,transparent 50%),linear-gradient(99deg,transparent 62%,#ecf3f438 62.5%,#ecf3f438 63%,transparent 63.5%);background-size:113px 137px,173px 191px;mask-image:linear-gradient(transparent,#000 18%,#000 85%,transparent);animation:natural-rain var(--rain-speed) linear infinite;transform:none;transition:opacity 4s}
[data-weather=rain] .weather-rain,[data-weather=storm] .weather-rain{opacity:var(--rain-opacity);animation-duration:var(--rain-speed)}
.weather-rain:after{content:'';position:absolute;inset:0;background-image:linear-gradient(102deg,transparent 32%,#e8f1f04a 32.5%,transparent 33%);background-size:211px 163px;animation:natural-rain calc(var(--rain-speed) * 1.4) linear infinite reverse;opacity:.4}
.weather-mist{inset:45% -15% -12%;background:radial-gradient(ellipse at 50% 100%,#e5ecea55,transparent 70%);filter:blur(22px);animation:mist-drift 38s ease-in-out infinite;transition:opacity 5s}
[data-weather=mist] .weather-mist{opacity:.38}
.weather-card{background:#f8f5eae8;box-shadow:0 4px 18px #19362b0c}
@keyframes natural-rain{to{background-position:var(--rain-slant) 137px,calc(var(--rain-slant) * 1.5) 191px}}
@media(prefers-reduced-motion:reduce){.weather-cloud,.weather-rain,.weather-rain:after,.weather-mist{animation:none!important}.facade-image,.facade-night,.facade-glow{transition:none}}
@media(min-width:801px){.elevation-scene{aspect-ratio:auto;height:auto}.elevation-scene>.facade-image{position:relative;inset:auto;width:100%;height:auto;display:block}}
.weather-rain{mask-image:repeating-linear-gradient(to bottom,transparent 0 100px,#000 102px 114px,transparent 116px 137px)}

/* Diffuse sea-breeze wisps and warm light around the existing lamps. */
.scene-breeze{display:block;opacity:var(--breeze-opacity,.18);transition:opacity 4s;mask-image:linear-gradient(transparent 10%,#000 40%,#000 85%,transparent)}
[data-weather=unknown] .scene-breeze{opacity:0}
.scene-breeze i{left:-65%;top:45%;width:62%;height:22px;border:0;border-radius:50%;background:radial-gradient(ellipse at center,#eff5ee90,transparent 70%);filter:blur(7px);animation:mist-breeze var(--wind-duration,13s) ease-in-out infinite;transform:rotate(-4deg)}
.scene-breeze i:nth-child(2){top:72%;width:78%;height:34px;filter:blur(12px);animation-delay:-7s;animation-duration:calc(var(--wind-duration,13s) * 1.4)}
.scene-breeze i:nth-child(3){top:32%;height:14px;width:50%;filter:blur(6px);animation-delay:-4s;animation-duration:calc(var(--wind-duration,13s) * 1.2)}
@keyframes mist-breeze{0%{translate:0 12px;opacity:0}25%{opacity:.65}65%{opacity:.3}100%{translate:280% -18px;opacity:0}}
.facade-glow{background:radial-gradient(ellipse at 50% 77%,#ffd39732,transparent 20%),radial-gradient(ellipse at 69% 78%,#ffcc8026,transparent 13%),radial-gradient(ellipse at 24% 76%,#ffe0a726,transparent 13%);transition:opacity 6s}
[data-light=night] .facade-glow{opacity:.65}
[data-light=day] .facade-glow{opacity:.12}
.weather-rain{inset:0;background:none;mask-image:none;animation:none!important;transform:none}
.weather-rain:after{display:none}
.rain-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(prefers-reduced-motion:reduce){.scene-breeze i{animation:none!important;opacity:.12}.scene-breeze{transition:none}}

/* Light glass lets the facade remain visible behind weather and controls. */
.weather-card{background:rgba(248,245,234,.69);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid #fff9;box-shadow:0 3px 16px #19362b0a}
#weather-updated{color:#445647}
.light-controls{background:rgba(248,245,234,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-color:#fff8}
.light-controls [aria-pressed=true]{background:#244e42d9;color:#fff}
.elevation-controls label{background:rgba(248,245,234,.7);color:#244e42;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid #fff7}
.elevation-controls select{background:#f8f5eab8;color:#244e42}

/* Clearer glass and visible, diffuse breeze. */
.weather-card{background:rgba(248,245,234,.40);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-color:#fff6;color:#153e32;text-shadow:0 1px 2px #fff9}
#weather-updated{color:#244e42}
.light-controls{background:rgba(248,245,234,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-color:#fff6}
.elevation-controls label{background:rgba(248,245,234,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.elevation-controls select{background:#f8f5ea70}
.scene-breeze i{background:radial-gradient(ellipse at center,#f3f7f1cc,transparent 72%);height:28px;filter:blur(6px)}
.scene-breeze i:nth-child(2){height:42px;filter:blur(10px)}
