/* A single clock drives weather, camera, atmosphere, and sound. */
.hero-camera {
  position:absolute; inset:-2%; z-index:0;
  transform-origin:43% 64%;
  transform:translate3d(var(--camera-x,0%),var(--camera-y,0%),0) scale(var(--camera-scale,1.025));
  will-change:transform;
}
.hero .hero-photo {
  inset:0; animation:none; transform:none; transition:none;
  background-position:center center;
}
.hero[data-season] .hero-photo {
  filter:var(--scene-filter,saturate(.86) brightness(1.02));
}
.season-atmosphere {position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.air {position:absolute;inset:0;opacity:0}
.air-spring {background:linear-gradient(135deg,rgba(209,223,199,.14),transparent 50%,rgba(233,171,196,.1))}
.air-summer {background:radial-gradient(ellipse at 82% 23%,rgba(255,241,174,.27),transparent 55%)}
.air-autumn {background:linear-gradient(135deg,rgba(87,50,23,.06),rgba(203,119,33,.11))}
.air-winter {background:linear-gradient(150deg,rgba(138,192,222,.25),rgba(17,31,53,.34))}
.cloud-haze {
  position:absolute;inset:42% -18% -15%;opacity:var(--mist-opacity,.16);
  background:radial-gradient(ellipse at 70% 60%,rgba(225,237,237,.3),transparent 58%);
  transform:translateX(var(--mist-x,0%));filter:blur(22px);
}
.weather-layer {position:absolute;inset:0;opacity:0;--layer-play:paused}
.weather-bit {
  position:absolute;left:var(--x);top:-8%;width:var(--size);height:var(--size);
  animation:seasonal-drift var(--speed) linear var(--delay) infinite;
  animation-play-state:var(--layer-play);
  filter:blur(var(--blur));opacity:0;
}
.weather-bit b {
  display:block;width:100%;height:100%;
  animation:leaf-turn var(--turn-speed,4s) ease-in-out var(--delay) infinite alternate;
  animation-play-state:var(--layer-play);
}
[data-weather="spring"] .weather-bit b {
  border-radius:80% 20% 70% 35%;
  background:linear-gradient(140deg,#ffebed,#e8a3b5);transform:scale(.75,1);
}
[data-weather="summer"] .weather-bit {animation-name:summer-drift}
[data-weather="summer"] .weather-bit b {border-radius:50%;background:#fff3ae;box-shadow:0 0 8px rgba(255,236,142,.3)}
[data-weather="autumn"] .weather-bit b {
  background:linear-gradient(125deg,#f5bd58,#a96821 57%,#68401e);
  clip-path:polygon(50% 0,60% 29%,87% 16%,79% 42%,100% 49%,68% 67%,55% 81%,52% 100%,46% 100%,45% 79%,21% 69%,0 48%,25% 41%,15% 15%,41% 31%);
}
[data-weather="autumn"] .weather-bit:nth-child(3n) b {clip-path:none;border-radius:95% 0 95% 0}
[data-weather="winter"] .weather-bit {animation-name:winter-drift}
[data-weather="winter"] .weather-bit b {border-radius:50%;background:rgba(240,249,255,.82);animation:none}
.hero[data-scene-state="paused"] .weather-bit,
.hero[data-scene-state="paused"] .weather-bit b,
.hero[data-scene-state="paused"] .spark,
.hero[data-scene-state="paused"] .sound-bars i {animation-play-state:paused!important}
.scene-controls {
  position:absolute;z-index:8;right:6vw;top:109px;width:238px;
  padding:13px 16px 12px;border-radius:19px;
  color:#edf0e9;border:1px solid rgba(255,255,255,.18);
  background:rgba(6,13,11,.44);backdrop-filter:blur(18px);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.scene-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.scene-mode {display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.06em;color:#d2d8cf}
.scene-mode>i {height:5px;width:5px;background:var(--lime);border-radius:50%;box-shadow:0 0 9px rgba(186,255,24,.35)}
.scene-pause {width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);border-radius:50%;background:rgba(255,255,255,.04);cursor:pointer;font-size:12px}
.scene-pause:hover {background:rgba(255,255,255,.13)}
.season-track {display:flex;justify-content:space-between;align-items:center;font-size:11px;color:rgba(255,255,255,.36)}
.season-track>span {transition:color 1s;padding:1px 5px}
.season-track .current {color:var(--lime)}
.season-progress {height:1px;background:rgba(255,255,255,.14);margin:8px 0 9px;overflow:hidden}
.season-progress i {display:block;width:100%;height:100%;background:var(--lime);transform:scaleX(var(--season-progress,0));transform-origin:left;opacity:.8}
.season-caption {font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.73);margin:0 0 12px}
.sound-controls {display:flex;align-items:center;gap:8px;padding-top:9px;border-top:1px solid rgba(255,255,255,.12)}
.sound-toggle {display:flex;align-items:center;gap:8px;border:0;background:none;padding:4px 0;font-size:11px;color:#e2e7dd;cursor:pointer;white-space:nowrap}
.sound-bars {display:flex;align-items:center;gap:2px;width:15px;height:13px}
.sound-bars i {width:2px;height:5px;background:currentColor;border-radius:1px}
.sound-bars i:nth-child(2) {height:11px}
.sound-bars i:nth-child(3) {height:7px}
.sound-toggle[aria-pressed="true"] {color:var(--lime)}
.scene-controls[data-audible="true"] .sound-bars i {animation:sound-level .95s ease-in-out infinite alternate}
.scene-controls[data-audible="true"] .sound-bars i:nth-child(2) {animation-delay:-.4s}
.scene-controls[data-audible="true"] .sound-bars i:nth-child(3) {animation-delay:-.7s}
.volume-control {flex:1;min-width:38px;display:flex;align-items:center}
.volume-control[hidden] {display:none}
.volume-control input {width:100%;min-width:0;accent-color:var(--lime);height:16px;cursor:pointer}
.sound-toggle:focus-visible,.scene-pause:focus-visible {outline:2px solid var(--lime);outline-offset:4px}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes seasonal-drift {
  0% {transform:translate3d(0,-8vh,0);opacity:0}
  9% {opacity:var(--opacity,.8)}
  30% {transform:translate3d(calc(var(--wind) * .28),30vh,0)}
  55% {transform:translate3d(calc(var(--wind) * .83),59vh,0)}
  79% {opacity:var(--opacity,.8);transform:translate3d(calc(var(--wind) * .7),83vh,0)}
  100% {transform:translate3d(var(--wind),112vh,0);opacity:0}
}
@keyframes leaf-turn {0%{transform:rotate(-45deg) rotateY(12deg)}50%{transform:rotate(130deg) rotateY(65deg)}100%{transform:rotate(330deg) rotateY(0)}}
@keyframes summer-drift {0%{opacity:0;transform:translate(0,85vh)}20%{opacity:.42}80%{opacity:.28}100%{opacity:0;transform:translate(var(--wind),23vh)}}
@keyframes winter-drift {0%{transform:translate(0,-5vh);opacity:0}12%{opacity:var(--opacity)}50%{transform:translate(calc(var(--wind) * .6),54vh)}85%{opacity:var(--opacity)}100%{transform:translate(var(--wind),112vh);opacity:0}}
@keyframes sound-level {to{transform:scaleY(.35)}}
@media(max-width:900px) {
  .scene-controls {right:16px;top:81px;width:205px;padding:10px 13px;border-radius:16px}
  .scene-heading {margin-bottom:5px}
  .season-caption {margin-bottom:8px}
  .hero .hero-photo {background-position:57% center}
}
@media(prefers-reduced-motion:reduce) {
  .hero-camera {transform:none!important;will-change:auto}
  .weatherfx {display:none}
}