/* The skies (site_scenes.py). Every animation waits for `.play`, which the
   page adds while a scene is on screen, and none run for reduced motion. */
.scene-svg .arm,.scene-svg .sun,.scene-svg .moon{transform-box:view-box}
.scene-svg .sky{opacity:0}
.scene-svg .sky-night{opacity:1}
.scene-svg .stars{opacity:0}
.scene-svg .land-night,.scene-svg .window,.scene-svg .birds{opacity:0}
.scene-svg .star{animation:twinkle 3.4s ease-in-out infinite}
.scene-svg *{animation-play-state:paused}
.scene-svg.play *{animation-play-state:running}
@keyframes twinkle{50%{opacity:.25}}
.bird{animation:fly 14s linear infinite}
@keyframes fly{from{transform:translateX(-40px)}to{transform:translateX(720px)}}

/* Hero: one whole day every 36 seconds — sunrise, day, sunset, night. */
.scene-cycle .arm{animation:arm 36s linear infinite}
@keyframes arm{from{transform:rotate(-96deg)}to{transform:rotate(264deg)}}
.scene-cycle .sky-dawn{animation:c-dawn 36s linear infinite}
.scene-cycle .sky-day{animation:c-day 36s linear infinite}
.scene-cycle .sky-dusk{animation:c-dusk 36s linear infinite}
.scene-cycle .stars{animation:c-stars 36s linear infinite}
.scene-cycle .land-night{animation:c-land 36s linear infinite}
.scene-cycle .window{animation:c-window 36s linear infinite}
.scene-cycle .birds{animation:c-birds 36s linear infinite}
@keyframes c-dawn{0%{opacity:1}11%{opacity:0}90%{opacity:0}100%{opacity:1}}
@keyframes c-day{0%{opacity:0}10%{opacity:1}40%{opacity:1}50%{opacity:0}}
@keyframes c-dusk{0%,37%{opacity:0}49%{opacity:1}61%{opacity:0}100%{opacity:0}}
@keyframes c-stars{0%,52%{opacity:0}62%,88%{opacity:1}97%,100%{opacity:0}}
@keyframes c-land{0%{opacity:.35}9%,45%{opacity:0}60%,90%{opacity:.85}100%{opacity:.35}}
@keyframes c-window{0%,47%{opacity:0}52%,80%{opacity:1}82%,100%{opacity:0}}
@keyframes c-birds{0%,10%{opacity:0}14%,38%{opacity:1}44%,100%{opacity:0}}

/* Wake up: night gives way to a sunrise, once, then holds the morning. */
.scene-sunrise .arm{animation:rise 7s cubic-bezier(.3,.6,.3,1) forwards;transform:translateY(380px)}
@keyframes rise{to{transform:translateY(70px)}}
.scene-sunrise .moon{display:none}
.scene-sunrise .sky-dawn{animation:s-dawn 7s ease forwards}
.scene-sunrise .sky-day{animation:s-day 7s ease forwards}
.scene-sunrise .stars{opacity:1;animation:s-out 3s ease forwards}
.scene-sunrise .land-night{opacity:.85;animation:s-out 5s ease forwards}
.scene-sunrise .window{animation:s-light 7s ease forwards}
.scene-sunrise .birds{animation:s-birds 7s ease forwards}
@keyframes s-dawn{0%{opacity:0}40%{opacity:1}100%{opacity:1}}
@keyframes s-day{0%,60%{opacity:0}100%{opacity:.55}}
@keyframes s-out{to{opacity:0}}
@keyframes s-light{0%,30%{opacity:0}36%,100%{opacity:1}}
@keyframes s-birds{0%,55%{opacity:0}75%,100%{opacity:1}}

/* Sleep: the sun goes down, the sky turns, the stars come out, the moon
   rises — and the window goes dark: lights out. */
.scene-sunset .sun{animation:set 8s cubic-bezier(.5,0,.6,1) forwards}
@keyframes set{to{transform:translateY(470px)}}
.scene-sunset .arm{transform:translateY(80px)}
.scene-sunset .moon{animation:moonrise 9s ease-out forwards}
@keyframes moonrise{0%,40%{transform:translate(-140px,0)}100%{transform:translate(-140px,-700px)}}
.scene-sunset .sky-day{opacity:1;animation:n-day 8s ease forwards}
.scene-sunset .sky-dusk{animation:n-dusk 8s ease forwards}
.scene-sunset .stars{animation:n-stars 9s ease forwards}
.scene-sunset .land-night{animation:n-land 8s ease forwards}
.scene-sunset .window{animation:n-window 10s ease forwards}
@keyframes n-day{0%{opacity:1}40%,100%{opacity:0}}
@keyframes n-dusk{0%{opacity:0}35%{opacity:1}75%,100%{opacity:0}}
@keyframes n-stars{0%,55%{opacity:0}100%{opacity:1}}
@keyframes n-land{0%,30%{opacity:0}85%,100%{opacity:.85}}
@keyframes n-window{0%,40%{opacity:0}48%,82%{opacity:1}90%,100%{opacity:0}}

/* Closing: a starry night that keeps leaning towards dawn and back. */
.scene-dawn .arm{transform:translateY(420px);animation:peek 9s ease-in-out infinite alternate}
@keyframes peek{to{transform:translateY(250px)}}
.scene-dawn .moon{display:none}
.scene-dawn .stars{opacity:1;animation:d-stars 9s ease-in-out infinite alternate}
.scene-dawn .sky-dawn{animation:d-dawn 9s ease-in-out infinite alternate}
.scene-dawn .land-night{opacity:.85;animation:d-land 9s ease-in-out infinite alternate}
@keyframes d-stars{to{opacity:.35}}
@keyframes d-dawn{from{opacity:0}to{opacity:.85}}
@keyframes d-land{to{opacity:.45}}

@media (prefers-reduced-motion:reduce){
  .scene-cycle .sky-day,.scene-sunrise .sky-dawn{opacity:1}
  .scene-sunrise .arm{transform:translateY(70px)}
  .scene-sunset .sky-day,.scene-sunset .sun{opacity:0}
  .scene-sunset .stars,.scene-dawn .stars{opacity:1}
  .scene-sunset .land-night{opacity:.85}
}

/* Clouds and the horizon glow only appear where sky.js drives the scene. */
.scene-svg .clouds,.scene-svg .hglow{opacity:0}
.scene-svg.driven .cloud{animation:drift 120s linear infinite}
@keyframes drift{from{translate:-260px 0}to{translate:2000px 0}}
/* Driven (the hero): one smooth clock in sky.js sets every colour and
   position each frame, so the keyframed version stands down. */
.scene-svg.driven .sky:not(.sky-night){display:none}
.scene-svg.driven .arm,.scene-svg.driven .stars,.scene-svg.driven .land-night,
.scene-svg.driven .window,.scene-svg.driven .birds,.scene-svg.driven .sky{animation:none!important}