/* Only the progressive enhancement uses these rules; the standalone SVG stays static. */
.ian-home-preview .ian-home-scene-active { display: block; width: 100%; height: auto; border-radius: 8px; }
.ian-home-scene-credit { padding: 5px 3px 0; color: #64748b; font-size: 11px; line-height: 1.5; text-align: right; }
.ian-home-scene-credit[hidden] { display: none; }
.ian-home-scene-credit a { color: #416789; text-decoration: underline; }
.ian-home-scene-credit a:focus-visible { outline: 2px solid #0465ae; outline-offset: 2px; }
.ian-home-scene-active {
    --scene-top: #d6edff;
    --scene-bottom: #f6fbff;
    --scene-wall: #ffffff;
    --scene-outline: #0465ae;
    --scene-window: #c7e1f5;
    --scene-label: #172033;
    --scene-caption: #64748b;
    --scene-cloud: #ffffff;
    --scene-sun-opacity: 1;
    --scene-sun-x: 0px;
    --scene-sun-y: 0px;
    --scene-moon-opacity: 0;
    --scene-moon-x: 0px;
    --scene-moon-y: 0px;
    --scene-stars-opacity: 0;
    --scene-clear-sky: 1;
    --scene-cloud-opacity: .28;
    --scene-cloud-far-duration: 54s;
    --scene-cloud-near-duration: 42s;
    --scene-cloud-far-start-x: -57px;
    --scene-cloud-far-end-x: 57px;
    --scene-cloud-far-start-y: 0px;
    --scene-cloud-far-end-y: 0px;
    --scene-cloud-near-start-x: -1px;
    --scene-cloud-near-end-x: 141px;
    --scene-cloud-near-start-y: 0px;
    --scene-cloud-near-end-y: 0px;
    --scene-rain-start-x: -3px;
    --scene-rain-end-x: 3px;
    --scene-rain-tilt: 3deg;
    --scene-snow-start-x: -4.6px;
    --scene-snow-middle-x: 4.5px;
    --scene-snow-end-x: 4.6px;
    --scene-gust-x: 0px;
    --scene-gust-y: 0px;
    --scene-gust-duration: 15s;
    --scene-gust-play-state: paused;
    --scene-cloud-gust-y: 0px;
    --scene-cloud-gust-play-state: paused;
    --scene-roof-snow-opacity: 0;
    --scene-roof-snow-width: 0px;
}
.ian-home-scene-active[data-phase="dawn"] {
    --scene-top: #b7cfe8;
    --scene-bottom: #f8e5d6;
    --scene-wall: #edf3fa;
    --scene-outline: #54789a;
    --scene-window: #b5cadd;
    --scene-sun-opacity: .75;
    --scene-sun-x: -188px;
    --scene-sun-y: 59px;
}
.ian-home-scene-active[data-phase="afternoon"] {
    --scene-top: #dbeaf6;
    --scene-bottom: #fff0d8;
    --scene-wall: #fffaf0;
    --scene-window: #d5dfdf;
    --scene-sun-x: 25px;
    --scene-sun-y: 25px;
}
.ian-home-scene-active[data-phase="dusk"] {
    --scene-top: #667c9c;
    --scene-bottom: #e3b6a0;
    --scene-wall: #e8eaf1;
    --scene-outline: #456687;
    --scene-window: #8fa3b9;
    --scene-label: #25354d;
    --scene-caption: #40506a;
    --scene-cloud: #d8dce7;
    --scene-sun-opacity: .45;
    --scene-sun-x: 39px;
    --scene-sun-y: 88px;
}
.ian-home-scene-active[data-phase="night"] {
    --scene-top: #14263f;
    --scene-bottom: #385777;
    --scene-wall: #dce6f0;
    --scene-outline: #aac9e2;
    --scene-window: #58738e;
    --scene-label: #f1f6ff;
    --scene-caption: #c4d6e9;
    --scene-cloud: #788fa9;
    --scene-sun-opacity: 0;
    --scene-moon-opacity: .9;
    --scene-stars-opacity: .8;
}
.ian-home-scene-active #ian-scene-sky-top { stop-color: var(--scene-top); }
.ian-home-scene-active #ian-scene-sky-bottom { stop-color: var(--scene-bottom); }
.ian-home-scene-active #ian-scene-building { fill: var(--scene-wall); stroke: var(--scene-outline); }
.ian-home-scene-active #ian-scene-door { fill: var(--scene-outline); }
.ian-home-scene-active .ian-scene-window { fill: var(--scene-window); transition: fill 3s ease; }
.ian-home-scene-active .ian-scene-window.is-lit { fill: #ffd480; }
.ian-home-scene-active #ian-scene-label { fill: var(--scene-label); }
.ian-home-scene-active #ian-scene-caption { fill: var(--scene-caption); }
.ian-home-scene-active #ian-scene-clouds { fill: var(--scene-cloud); opacity: var(--scene-cloud-opacity); }
.ian-home-scene-active #ian-scene-roof-snow {
    opacity: var(--scene-roof-snow-opacity);
    stroke-width: var(--scene-roof-snow-width);
    transition: opacity 4s ease;
}
.ian-home-scene-active #ian-scene-sky-top,
.ian-home-scene-active #ian-scene-sky-bottom { transition: stop-color 5s ease; }
.ian-home-scene-active #ian-scene-building,
.ian-home-scene-active #ian-scene-door,
.ian-home-scene-active #ian-scene-label,
.ian-home-scene-active #ian-scene-caption { transition: fill 5s ease, stroke 5s ease; }
.ian-home-scene-active #ian-scene-sun,
.ian-home-scene-active #ian-scene-moon,
.ian-home-scene-active #ian-scene-stars,
.ian-home-scene-active #ian-scene-clouds,
.ian-home-scene-active #ian-scene-rain,
.ian-home-scene-active #ian-scene-snow,
.ian-home-scene-active #ian-scene-fog { transition: opacity 4s ease, transform 5s ease; }
.ian-home-scene-active #ian-scene-sun { opacity: calc(var(--scene-sun-opacity) * var(--scene-clear-sky)); transform: translate(var(--scene-sun-x), var(--scene-sun-y)); }
.ian-home-scene-active #ian-scene-moon { opacity: calc(var(--scene-moon-opacity) * var(--scene-clear-sky)); transform: translate(var(--scene-moon-x), var(--scene-moon-y)); }
.ian-home-scene-active #ian-scene-stars { opacity: calc(var(--scene-stars-opacity) * var(--scene-clear-sky)); }
.ian-home-scene-active[data-phase="night"] #ian-scene-star { animation: ian-scene-twinkle 17s ease-in-out infinite; }
.ian-home-scene-active #ian-scene-cloud-far { animation: ian-scene-cloud-far var(--scene-cloud-far-duration) linear -29s infinite; }
.ian-home-scene-active #ian-scene-cloud-near { animation: ian-scene-cloud-near var(--scene-cloud-near-duration) linear -35.2s infinite; }
/* A single slow gust moves the existing groups; particles retain their downward fall. */
.ian-home-scene-active #ian-scene-clouds,
.ian-home-scene-active[data-weather="rain"] #ian-scene-rain,
.ian-home-scene-active[data-weather="storm"] #ian-scene-rain,
.ian-home-scene-active[data-weather="snow"] #ian-scene-snow {
    animation: ian-scene-gust var(--scene-gust-duration) ease-in-out -3s infinite;
    animation-play-state: var(--scene-gust-play-state);
}
.ian-home-scene-active #ian-scene-clouds {
    --scene-gust-y: var(--scene-cloud-gust-y);
    animation-play-state: var(--scene-cloud-gust-play-state);
}
.ian-home-scene-active[data-weather="clear"] #ian-scene-clouds {
    opacity: 0;
    visibility: hidden;
    transition: none;
    animation-play-state: paused;
}
.ian-home-scene-active[data-weather="clear"] #ian-scene-clouds * { animation-play-state: paused; }
.ian-home-scene-active[data-weather="cloudy"] { --scene-clear-sky: .32; }
.ian-home-scene-active[data-weather="rain"],
.ian-home-scene-active[data-weather="snow"],
.ian-home-scene-active[data-weather="storm"],
.ian-home-scene-active[data-weather="fog"] { --scene-clear-sky: 0; }
.ian-home-scene-active[data-weather="rain"] #ian-scene-rain,
.ian-home-scene-active[data-weather="storm"] #ian-scene-rain { opacity: .7; }
.ian-home-scene-active[data-weather="rain"] .ian-scene-drop,
.ian-home-scene-active[data-weather="storm"] .ian-scene-drop {
    transform-box: fill-box;
    transform-origin: center;
    animation: ian-scene-rain 1.8s linear infinite;
}
.ian-home-scene-active[data-weather="snow"] #ian-scene-snow { opacity: .9; }
.ian-home-scene-active[data-weather="snow"] .ian-scene-flake { animation: ian-scene-snow 12s linear infinite; }
.ian-home-scene-active[data-weather="fog"] #ian-scene-fog { opacity: .65; }
.ian-home-scene-active[data-weather="storm"] #ian-scene-lightning { opacity: .45; animation: ian-scene-lightning 23s ease-in-out infinite; }
.ian-home-scene-active[data-intensity="heavy"] .ian-scene-heavy { opacity: .85; }
.ian-home-scene-active.is-paused *, .ian-home-scene-active.is-paused { animation-play-state: paused !important; }
@keyframes ian-scene-cloud-far {
    0% { transform: translate(var(--scene-cloud-far-start-x), var(--scene-cloud-far-start-y)); opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { transform: translate(var(--scene-cloud-far-end-x), var(--scene-cloud-far-end-y)); opacity: 0; }
}
@keyframes ian-scene-cloud-near {
    0% { transform: translate(var(--scene-cloud-near-start-x), var(--scene-cloud-near-start-y)); opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { transform: translate(var(--scene-cloud-near-end-x), var(--scene-cloud-near-end-y)); opacity: 0; }
}
@keyframes ian-scene-gust {
    0%, 30%, 100% { transform: translate(0, 0); }
    58%, 66% { transform: translate(var(--scene-gust-x), var(--scene-gust-y)); }
}
@keyframes ian-scene-twinkle { 0%, 75%, 100% { opacity: .65; } 86% { opacity: 1; } }
/* Particles fall independently. The wrap back to the top is fully transparent. */
@keyframes ian-scene-rain {
    0% { transform: translate(var(--scene-rain-start-x), -45px) skewX(var(--scene-rain-tilt)); opacity: 0; }
    8%, 85% { opacity: 1; }
    100% { transform: translate(var(--scene-rain-end-x), 65px) skewX(var(--scene-rain-tilt)); opacity: 0; }
}
@keyframes ian-scene-snow {
    0% { transform: translate(var(--scene-snow-start-x), -35px); opacity: 0; }
    10%, 85% { opacity: 1; }
    50% { transform: translate(var(--scene-snow-middle-x), 10px); }
    100% { transform: translate(var(--scene-snow-end-x), 55px); opacity: 0; }
}
/* One gradual brightening, rather than rapid lightning flashes. */
@keyframes ian-scene-lightning { 0%, 82%, 100% { opacity: 0; } 90%, 93% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
    .ian-home-scene-active, .ian-home-scene-active * { animation: none !important; transition: none !important; }
}