/* Geometry remains in the existing layout. Only the image and atmosphere change. */
html[data-time-of-day] .world,html[data-time-of-day] .reveal-art{background-image:var(--scene-image)}
.day-accents{position:absolute;inset:0;pointer-events:none}
.sun-rays,.day-cloud,.distant-bird,.night-star,.firefly{display:none}
html[data-time-of-day="morning"] .sun-rays,html[data-time-of-day="afternoon"] .sun-rays{display:block;position:absolute;inset:0;background:linear-gradient(118deg,transparent 30%,#fff4c71a 35%,transparent 40%,#fff5d216 47%,transparent 52%);clip-path:polygon(0 0,66% 0,100% 100%,24% 100%);mix-blend-mode:screen;transform-origin:20% 0;animation:sunlight-shift 22s ease-in-out infinite}
html[data-time-of-day="morning"] .day-cloud,html[data-time-of-day="afternoon"] .day-cloud{display:block;position:absolute;left:20%;top:10%;width:36%;height:19%;border-radius:50%;background:radial-gradient(ellipse,#ffffff13,transparent 70%);filter:blur(12px);animation:cloud-pass 65s ease-in-out infinite}
html[data-time-of-day="morning"] .distant-bird,html[data-time-of-day="afternoon"] .distant-bird{display:block;position:absolute;left:7%;top:var(--bird-y);width:17px;height:10px;color:#273c49;opacity:0;animation:bird-crossing 54s linear var(--bird-delay) infinite}
.distant-bird svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:bird-wings 1.1s ease-in-out infinite;transform-origin:center}
html[data-time-of-day="morning"] .ground-spark,html[data-time-of-day="afternoon"] .ground-spark,html[data-time-of-day="morning"] .spark,html[data-time-of-day="afternoon"] .spark,html[data-time-of-day="morning"] .window-glow,html[data-time-of-day="afternoon"] .window-glow,html[data-time-of-day="morning"] .floor-glow,html[data-time-of-day="afternoon"] .floor-glow,html[data-time-of-day="morning"] .ground-haze,html[data-time-of-day="afternoon"] .ground-haze{display:none}
html[data-time-of-day="night"] .ground-spark,html[data-time-of-day="night"] .spark{display:none}
html[data-time-of-day="night"] .night-star{display:block;position:absolute;width:2px;height:2px;background:#e0ecff;border-radius:50%;box-shadow:0 0 5px #d5e6ff99;animation:star-twinkle var(--twinkle) ease-in-out var(--delay) infinite}
html[data-time-of-day="night"] .firefly{display:block;position:absolute;width:3px;height:3px;background:#f5df96;border-radius:50%;box-shadow:0 0 9px 2px #f1dc6577;animation:firefly-float 12s ease-in-out var(--delay) infinite}
html[data-time-of-day="night"] .window-glow{background:radial-gradient(ellipse,#ffbb4b26,transparent 70%);animation-duration:10s}
html[data-time-of-day="night"] .floor-glow{opacity:.3;animation:none}
html[data-time-of-day="morning"] .intro,html[data-time-of-day="afternoon"] .intro{text-shadow:0 2px 5px #081b29,0 0 20px #081b2988}
html[data-time-of-day="morning"] .intro h1 em,html[data-time-of-day="afternoon"] .intro h1 em{color:#fff1d5}
html[data-time-of-day="morning"] .world:before,html[data-time-of-day="afternoon"] .world:before{background:linear-gradient(90deg,#07172588,transparent 75%),linear-gradient(#06172550,transparent 46%,#07172570)}
html[data-time-of-day="morning"] .footer,html[data-time-of-day="afternoon"] .footer,html[data-time-of-day="morning"] .hint,html[data-time-of-day="afternoon"] .hint{color:#fff3dc;text-shadow:0 1px 4px #071725,0 0 9px #071725}
html[data-time-of-day="morning"] .pill,html[data-time-of-day="afternoon"] .pill{background:#132a33db}
@keyframes sunlight-shift{0%,100%{opacity:.45;transform:rotate(-2deg) translateX(-1%)}50%{opacity:.8;transform:rotate(2deg) translateX(1%)}}
@keyframes cloud-pass{0%,100%{transform:translateX(-8%);opacity:.3}50%{transform:translateX(12%);opacity:.8}}
@keyframes bird-crossing{0%{opacity:0;left:7%;transform:translateY(0)}2%{opacity:.65}22%{opacity:.65}25%{opacity:0;left:60%;transform:translateY(-25px)}100%{opacity:0;left:60%;transform:translateY(-25px)}}
@keyframes bird-wings{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes star-twinkle{0%,100%{opacity:.25}50%{opacity:.75}}
@keyframes firefly-float{0%,100%{opacity:0;transform:translate(0,8px)}30%{opacity:.75}60%{opacity:.45;transform:translate(17px,-24px)}80%{opacity:0;transform:translate(-7px,-34px)}}
.scene-paused .atmosphere *,.scene-paused .spark{animation-play-state:paused!important}
/* The mobile crop shows roughly the right half of the original image. */
@media(max-width:600px){
  .firefly{left:var(--mobile-left)!important;top:var(--mobile-top)!important}
  html[data-time-of-day="night"] .firefly{width:4px;height:4px;box-shadow:0 0 8px 3px #f1dc6588;animation-name:mobile-firefly}
  .night-star{left:var(--mobile-left)!important}
  html[data-time-of-day="morning"] .distant-bird,html[data-time-of-day="afternoon"] .distant-bird{width:13px;animation-name:mobile-birds;animation-duration:32s;animation-delay:calc(var(--bird-delay) - 12s)}
  html[data-time-of-day="morning"] .day-cloud,html[data-time-of-day="afternoon"] .day-cloud{left:50%;width:12%;filter:blur(5px)}
  html[data-time-of-day="morning"] .sun-rays,html[data-time-of-day="afternoon"] .sun-rays{clip-path:none;background:linear-gradient(118deg,transparent 49%,#fff4c72a 54%,transparent 59%,#fff5d224 66%,transparent 72%)}
  .wind-leaf{left:var(--mobile-left)!important;top:var(--mobile-top)!important;width:15px;height:15px;animation-name:mobile-leaf}
  .wind-leaf:nth-of-type(n+7){display:none}
  html[data-time-of-day="evening"] .ground-spark{left:var(--mobile-left)!important;top:var(--mobile-top)!important;animation-name:mobile-dusk-spark}
  html[data-time-of-day="evening"] .ground-spark:nth-of-type(n+10){display:none}
}
@keyframes mobile-firefly{0%,100%{opacity:.15;transform:translate(0,4px)}30%{opacity:.95;transform:translate(5px,-8px)}60%{opacity:.5;transform:translate(10px,-22px)}80%{opacity:.2;transform:translate(-3px,-12px)}}
@keyframes mobile-birds{0%{opacity:0;left:50%;transform:translateY(0)}3%{opacity:.7}30%{opacity:.7}35%{opacity:0;left:61%;transform:translateY(-12px)}100%{opacity:0;left:61%;transform:translateY(-12px)}}
@keyframes mobile-leaf{0%{opacity:0;transform:translate(-4px,-8px) rotate(-15deg)}15%,65%{opacity:.6}100%{opacity:0;transform:translate(18px,90px) rotate(20deg)}}
@keyframes mobile-dusk-spark{0%{opacity:0;transform:translate(0,8px) scale(.6)}20%,50%{opacity:.8}100%{opacity:0;transform:translate(8px,-65px) scale(.4)}}
@media(prefers-reduced-motion:reduce){.day-accents *{animation:none!important}.distant-bird,.firefly{display:none!important}.sun-rays{opacity:.4}.night-star{opacity:.4}}
