/* ============================================================
   sky.css — the lit backdrop.

   One fixed layer behind everything:
     two sky gradients that cross-fade
     a sun and a moon that travel across the horizon on theme change
     a temple-line horizon in two depths
     a directional light wash anchored to whichever luminary is up

   PERF: nothing here animates forever. The celestial transition is
   one-shot, driven by [data-theme], and only transform / opacity /
   fill are animated. The sun's glow is a painted radial-gradient,
   not a box-shadow or filter, so moving it never re-rasterises.
   ============================================================ */

.sky{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
  background:var(--bg-0);
}

/* ---------- sky gradients: literal colours so they interpolate ---------- */
.sky .grad{
  position:absolute; inset:0;
  /* the sky changes colour a beat after the sun starts to fall, which is
     the order it happens in outside a window */
  transition:opacity calc(var(--celestial) * .8) var(--ease-sky) calc(var(--celestial) * .2);
}
.sky .grad.day{
  opacity:1;
  background:linear-gradient(180deg,
    #c6dbe6 0%, #ddE3dc 22%, #f0e3c6 54%, #fbe9c9 78%, #e8d9c0 100%);
}
.sky .grad.night{
  opacity:0;
  background:linear-gradient(180deg,
    #06060e 0%, #0d0b16 26%, #191019 52%, #2a1d10 80%, #120d08 100%);
}
html[data-theme='lamplight'] .sky .grad.day{ opacity:0; }
html[data-theme='lamplight'] .sky .grad.night{ opacity:1; }

/* ---------- stars: static, revealed by opacity only ---------- */
.sky .stars{
  position:absolute; inset:0 0 34% 0;
  opacity:0;
  /* stars last of all — nothing is visible until the sky has darkened */
  transition:opacity calc(var(--celestial) * .55) var(--ease-sky) calc(var(--celestial) * .45);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 23% 42%, #fdf6e3 50%, transparent),
    radial-gradient(1.8px 1.8px at 34% 12%, #fff 50%, transparent),
    radial-gradient(1.1px 1.1px at 41% 58%, #e8f0ff 50%, transparent),
    radial-gradient(1.5px 1.5px at 52% 26%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 61% 8%,  #fdf6e3 50%, transparent),
    radial-gradient(1.7px 1.7px at 68% 48%, #fff 50%, transparent),
    radial-gradient(1.1px 1.1px at 74% 20%, #e8f0ff 50%, transparent),
    radial-gradient(1.4px 1.4px at 83% 36%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 89% 14%, #fdf6e3 50%, transparent),
    radial-gradient(1.6px 1.6px at 95% 52%, #fff 50%, transparent),
    radial-gradient(1.1px 1.1px at 07% 62%, #e8f0ff 50%, transparent),
    radial-gradient(1.3px 1.3px at 47% 70%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 29% 76%, #fdf6e3 50%, transparent);
}
html[data-theme='lamplight'] .sky .stars{ opacity:.85; }

/* ---------- luminaries ---------- */
.sky .luminary{
  position:absolute; border-radius:50%;
  will-change:transform;
  transition:transform var(--celestial) var(--ease-sky),
             opacity   var(--celestial) var(--ease-sky);
}
.sky .sun{
  width:min(46vw,420px); aspect-ratio:1;
  left:19%; top:-13%;
  background:radial-gradient(circle,
    #fff7e0 0 6.5%, #ffe0a0 11%, #ffc46e 16%,
    rgba(255,176,72,.40) 27%, rgba(255,176,72,.14) 42%, rgba(255,176,72,0) 62%);
}
.sky .moon{
  width:min(34vw,300px); aspect-ratio:1;
  right:12%; top:-9%;
  background:radial-gradient(circle at 44% 42%,
    #fffdf4 0 6%, #efe9d7 10.5%, #ded8c4 14.5%,
    rgba(228,226,208,.26) 26%, rgba(228,226,208,.08) 42%, rgba(228,226,208,0) 60%);
  /* at rest in daylight the moon is BELOW the horizon — switching theme
     brings it up, rather than dropping it in from above */
  transform:translate3d(6vw,104vh,0) scale(.78);
  opacity:0;
  transition-timing-function:var(--ease-rise);
}
.sky .sun{ transition-timing-function:var(--ease-set); }

/* sunset / moonrise — the sun drops left and out, the moon climbs in on
   the other side of the sky, each on its own easing so they are visibly
   two separate bodies rather than one crossfade */
html[data-theme='lamplight'] .sky .sun{
  transform:translate3d(-11vw,106vh,0) scale(.74); opacity:0;
  transition-timing-function:var(--ease-set);
}
html[data-theme='lamplight'] .sky .moon{
  transform:none; opacity:1;
  transition-timing-function:var(--ease-rise);
}

/* ---------- directional light wash ---------- */
.sky .wash{
  position:absolute; inset:0;
  transition:opacity var(--celestial) var(--ease-sky);
}
.sky .wash.day{
  opacity:1;
  background:radial-gradient(54% 46% at 16% 10%, rgba(255,202,118,.40) 0%, rgba(255,202,118,0) 66%);
}
.sky .wash.night{
  opacity:0;
  background:radial-gradient(54% 46% at 84% 10%, rgba(214,222,234,.16) 0%, rgba(214,222,234,0) 62%);
}
html[data-theme='lamplight'] .sky .wash.day{ opacity:0; }
html[data-theme='lamplight'] .sky .wash.night{ opacity:1; }

/* ---------- temple horizon ---------- */
.sky .horizon{
  position:absolute; left:0; right:0; bottom:-46px;
  min-width:1180px;
}
.sky .horizon svg{ width:100%; height:auto; display:block; }
.sky .sil-back{
  fill:var(--silhouette-2);
  transition:fill var(--celestial) var(--ease-sky);
}
.sky .sil-front{
  fill:var(--silhouette);
  transition:fill var(--celestial) var(--ease-sky);
}
.sky .sil-line{
  fill:none; stroke:var(--silhouette); stroke-width:3.4; stroke-linecap:round;
  transition:stroke var(--celestial) var(--ease-sky);
}
.sky .sil-line-2{
  fill:none; stroke:var(--silhouette); stroke-width:2.2; stroke-linecap:round;
  transition:stroke var(--celestial) var(--ease-sky);
}

/* ---------- ground haze, so content sits on something ----------
   Two literal layers cross-faded: a var(--bg-0) gradient would pop
   instantly on theme change instead of travelling with the sun.   */
.sky .ground{
  position:absolute; left:0; right:0; bottom:0; height:34vh;
  transition:opacity var(--celestial) var(--ease-sky);
}
.sky .ground.day{ opacity:1; background:linear-gradient(180deg, transparent 0%, #e8d9c0 78%); }
.sky .ground.night{ opacity:0; background:linear-gradient(180deg, transparent 0%, #120d08 78%); }
html[data-theme='lamplight'] .sky .ground.day{ opacity:0; }
html[data-theme='lamplight'] .sky .ground.night{ opacity:1; }

/* ---------- the room dims with the sun ----------
   theme.js adds this class for exactly the length of the celestial
   transition, so the interface travels with the sky instead of
   snapping. One-shot: the universal selector is never live at rest. */
html.theme-shifting *,
html.theme-shifting *::before,
html.theme-shifting *::after{
  transition: color var(--celestial) var(--ease-sky),
              background-color var(--celestial) var(--ease-sky),
              border-color var(--celestial) var(--ease-sky),
              box-shadow var(--celestial) var(--ease-sky),
              fill var(--celestial) var(--ease-sky),
              stroke var(--celestial) var(--ease-sky) !important;
}

@media (prefers-reduced-motion: reduce){
  .sky *{ transition-duration:.001ms !important; }
  html.theme-shifting *,
  html.theme-shifting *::before,
  html.theme-shifting *::after{ transition-duration:.001ms !important; }
}