.window-view{position:absolute;inset:0;z-index:1;pointer-events:none;clip-path:url('#window-panes');isolation:isolate}
.window-sky,.window-leaves,.window-stars,.window-rain{position:absolute;inset:0;pointer-events:none}
.window-sky{opacity:0;transition:opacity 1.6s ease}
.sky-nature{opacity:1;background:linear-gradient(165deg,#b4ddea 10%,#dfefda 62%)}
.sky-jazz{background:radial-gradient(ellipse at 88% 12%,#fff4d54d 0%,#fff4d500 28%),linear-gradient(175deg,#b8def2 0%,#d4ebf7 42%,#edf5ef 75%)}
.sky-rain{background:linear-gradient(160deg,#81989f 8%,#bbcdd0 45%,#d7ddcd 70%)}
.sky-lofi{background:linear-gradient(165deg,#162638 8%,#233d52 40%,#496370 80%)}
[data-weather=jazz] .sky-jazz,[data-weather=rain] .sky-rain,[data-weather=lofi] .sky-lofi{opacity:1}
.window-leaves{transition:filter 1.6s ease;--sway:0.5deg;--wind-duration:9s;transform-origin:78% 47%;animation:window-breeze var(--wind-duration) ease-in-out infinite alternate}
.window-leaves img{display:block;width:100%;height:100%;filter:url('#window-foliage')}
[data-weather=nature] .window-leaves{--sway:1.25deg;--wind-duration:6s}
[data-weather=rain] .window-leaves{--sway:.8deg;--wind-duration:7s;filter:saturate(.65) brightness(.83)}
[data-weather=lofi] .window-leaves{--sway:.35deg;--wind-duration:12s;filter:saturate(.55) brightness(.42)}
.window-stars,.window-rain{opacity:0;transition:opacity 1.6s ease}
[data-weather=rain] .window-rain,[data-weather=lofi] .window-stars{opacity:1}
.window-stars i{position:absolute;display:block;width:var(--size);height:var(--size);border-radius:50%;background:#fff5d6;box-shadow:0 0 4px #fff4d177;animation:window-twinkle var(--period) ease-in-out infinite;animation-delay:var(--delay)}
.window-rain i{position:absolute;display:block;width:1px;height:var(--length);background:#edf6f1;opacity:.45;transform:rotate(12deg);animation:window-drizzle var(--period) linear infinite;animation-delay:var(--delay)}
.window-stars i,.window-rain i{animation-play-state:paused}
[data-weather=rain] .window-rain i,[data-weather=lofi] .window-stars i{animation-play-state:running}
.window-view.is-sleeping *{animation-play-state:paused!important}
@keyframes window-breeze{0%{transform:rotate(calc(-1 * var(--sway)))}50%{transform:rotate(calc(.25 * var(--sway)))}100%{transform:rotate(var(--sway))}}
@keyframes window-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.9;transform:scale(1)}}
@keyframes window-drizzle{0%{translate:5px -18px;opacity:0}15%{opacity:.4}85%{opacity:.4}100%{translate:-12px 75px;opacity:0}}
@media(prefers-reduced-motion:reduce){.window-view *{animation:none!important;transition:none!important}.window-stars i{opacity:.65}.window-rain i{opacity:.3}}

[data-weather=jazz] .window-leaves{--sway:.3deg;--wind-duration:11s}
[data-weather=jazz] .window-leaves img{filter:url('#jazz-foliage')}

/* Six audio environments share the original hand-drawn window frame. */
[data-weather=snow] .sky-rain{opacity:1;background:linear-gradient(155deg,#aebfc9,#e6edf0 65%)}
[data-weather=snow] .window-leaves{filter:saturate(.35) brightness(1.15);--sway:.3deg;--wind-duration:13s}
[data-weather=sun] .sky-jazz,[data-weather=birds] .sky-jazz{opacity:1}
[data-weather=sun] .window-leaves{--sway:.35deg;--wind-duration:11s}
.window-snow,.window-birds{position:absolute;inset:0;opacity:0;transition:opacity 1.6s;pointer-events:none}
.window-snow i{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#fffdf8;box-shadow:0 0 2px #ffffff66;animation:window-snowfall var(--period) linear infinite;animation-delay:var(--delay);animation-play-state:paused}
[data-weather=snow] .window-snow,[data-weather=birds] .window-birds{opacity:1}
[data-weather=snow] .window-snow i,[data-weather=birds] .window-bird{animation-play-state:running}
.window-sun{position:absolute;left:68%;top:9%;width:4%;aspect-ratio:1;border:1.5px solid #d4ad61;border-radius:47% 51% 48% 52%;background:#ffe6a2;box-shadow:0 0 18px 10px #ffedb34d;opacity:0;transition:opacity 1.6s;animation:window-sunshine 8s ease-in-out infinite;animation-play-state:paused}
[data-weather=sun] .window-sun{opacity:1;animation-play-state:running}
.window-bird{position:absolute;left:60%;top:var(--height);width:2.4%;animation:window-bird-flight var(--period) linear infinite;animation-delay:var(--delay);animation-play-state:paused}
.window-bird svg{display:block;width:100%;animation:window-wingbeat 1.1s ease-in-out infinite alternate}
@keyframes window-snowfall{0%{translate:-8px -35px;opacity:0}12%,80%{opacity:.85}100%{translate:14px 85px;opacity:0}}
@keyframes window-sunshine{50%{box-shadow:0 0 24px 15px #ffedb355;transform:scale(1.035)}}
@keyframes window-bird-flight{0%{translate:0 8px;opacity:0}5%{opacity:1}50%{left:97%;translate:0 -12px;opacity:1}51%,100%{left:97%;translate:0 -12px;opacity:0}}
@keyframes window-wingbeat{to{transform:scaleY(.55)}}
@media(prefers-reduced-motion:reduce){.window-view *{animation:none!important;transition:none!important}.window-snow i{opacity:.75}.window-bird:nth-child(1){left:70%}.window-bird:nth-child(2){left:74%}.window-bird:nth-child(3){left:78%}}

.window-bird svg{animation-play-state:paused}
[data-weather=birds] .window-bird svg{animation-play-state:running}

/* Each sound gets a distinct view, all clipped behind the original window frame. */
.window-landscape{position:absolute;left:62%;top:5%;width:33%;height:42%;opacity:0;transition:opacity 1.4s ease;overflow:hidden}
[data-weather=birds] .landscape-forest,[data-weather=nature] .landscape-mountains,[data-weather=sun] .landscape-sea{opacity:1}
.window-leaves{transition:filter 1.6s ease,opacity 1.4s ease}
[data-weather=sun] .window-leaves{opacity:0}
[data-weather=birds] .window-leaves{opacity:0}
.forest-near{transform-origin:50% 100%;animation:forest-sway 10s ease-in-out infinite alternate;animation-play-state:paused}
[data-weather=birds] .forest-near{animation-play-state:running}
.sea-swell{animation:sea-roll 7s ease-in-out infinite alternate;animation-play-state:paused}
.sea-swell-back{animation-duration:11s;animation-delay:-3s}
[data-weather=sun] .sea-swell{animation-play-state:running}
@keyframes forest-sway{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
@keyframes sea-roll{from{transform:translate(-10px,2px)}to{transform:translate(10px,-3px)}}
@media(prefers-reduced-motion:reduce){.window-landscape,.window-leaves{transition:none}.forest-near,.sea-swell{animation:none}}