/* All four seasons share a single fixed camera. A short dissolve changes the
   foliage and light without making the landscape jump between viewpoints. */
.landscapes{animation:season-breathe 24s ease-in-out infinite alternate;transform:scale(1.025);transform-origin:58% 56%}
.landscape{animation:none;transform:none;z-index:0;transition:opacity .95s cubic-bezier(.45,0,.25,1);background-position:center;will-change:opacity}
.landscape.outgoing{opacity:1;z-index:1;transition:none}
.landscape.active{opacity:1;z-index:2}
.landscape.spring{background-image:url('assets/forest-spring.jpg');filter:saturate(.78) brightness(.98)}
.landscape.summer{background-image:url('assets/forest-summer.jpg');filter:saturate(.88) brightness(.98)}
.landscape.autumn{background-image:url('assets/forest-autumn-aligned.jpg');filter:saturate(.62) brightness(.94)}
.landscape.winter{background-image:url('assets/forest-winter-aligned.jpg');filter:saturate(.72) brightness(.98)}
#weather,#clouds{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#weather{z-index:2}
#clouds{z-index:7;contain:strict;opacity:.8}
.hero{--season-progress:0%}
.seasons button{position:relative;padding-bottom:11px}
.seasons button::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);opacity:.8}
.seasons button.active::after{width:var(--season-progress)}
.motion-off #clouds,.motion-off #weather{visibility:hidden}
.motion-off .landscape{transition:none}
.carousel.wheel-active .work-card{transition-duration:.5s}
@keyframes season-breathe{from{transform:scale(1.025)}to{transform:scale(1.055)}}
@media(max-width:760px){.landscape{background-position:60% center}.landscapes{transform-origin:60% 55%}}
@media(prefers-reduced-motion:reduce){.landscapes{animation:none}.landscape{transition:none}#clouds,#weather{display:none}}

/* Touch devices use a transparent 2D mist renderer with a softer opacity. */
#clouds[hidden]{display:none!important}
@media(hover:none),(pointer:coarse){#clouds{opacity:.45}}