/* Day/night switch: the sun sets on the left, the moon keeps the right gutter. */

.sky {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
}

/* Moon and stars live in the side gutters only, never over the content. */
.sky .night {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc((100vw - 1080px) / 2);
  opacity: 0;
}

.sky .night.left {
  left: 0;
}

.sky .night.right {
  right: 0;
}

/* Constellations keep their shape: a box sized to the gutter, stars placed
   in it by percent. Dipper up top on the left, Orion low on the right. */
.sky .const {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sky .dipper {
  top: 78px;
  width: min(80%, 150px);
  aspect-ratio: 2 / 1;
}

.sky .orion {
  bottom: 64px;
  width: min(66%, 118px);
  aspect-ratio: 1 / 1.35;
}

:root[data-theme="dark"] .sky .night {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky .night {
    opacity: 1;
  }
}

@media (max-width: 1239px) {
  .sky .night {
    display: none;
  }
}

/* Slopinary's night moon, rendered once from its shader (moon.webp). */
.sky .moon {
  position: absolute;
  top: 110px;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  border-radius: 50%;
  background: url("/moon.webp") center / contain no-repeat;
  box-shadow: 0 0 22px 2px rgba(230, 228, 220, 0.08);
}

/* Size, brightness and twinkle timing are set per star by sky.js. */
.sky .star {
  position: absolute;
  width: 1px;
  height: 1px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  animation: sky-twinkle 6s ease-in-out infinite alternate;
}

@keyframes sky-twinkle {
  to {
    opacity: var(--tw, 0.15);
  }
}

/* Transient pieces, created only while switching. */

/* Jef's sun (the baob / Slopinary shader, molten setting-sun colours),
   rendered once to sun.webp: a 96px disc inside its own corona and halo. */
.sky .sun {
  position: absolute;
  left: 3vw;
  top: 34vh;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  background: url("/sun.webp") center / contain no-repeat;
}

.sky .dusk,
.sky .dawn {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.sky .dusk {
  background: radial-gradient(
      120vmax 70vmax at 0% 100%,
      rgba(255, 128, 64, 0.22),
      rgba(255, 128, 64, 0) 60%
    ),
    linear-gradient(to top, rgba(120, 60, 140, 0.12), transparent 55%);
}

.sky .dawn {
  background: radial-gradient(
    110vmax 70vmax at -6vw 112vh,
    rgba(255, 190, 110, 0.4),
    rgba(255, 170, 90, 0.12) 38%,
    rgba(255, 170, 90, 0) 62%
  );
}

/* While the palette swaps, fade colours instead of snapping. The colour
   tokens are registered as real colours so the ONE transition on the root
   carries every element with it: no per-element transitions to run. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #09090b; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #4b4b4f; }
@property --muted-bg { syntax: "<color>"; inherits: true; initial-value: #fafafa; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #e4e4e7; }
@property --line-soft { syntax: "<color>"; inherits: true; initial-value: #f4f4f5; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #f4f4f5; }
@property --primary { syntax: "<color>"; inherits: true; initial-value: #1a73e8; }
@property --primary-fg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }

:root.theme-anim {
  transition: --bg 1.1s ease, --fg 1.1s ease, --muted 1.1s ease,
    --muted-bg 1.1s ease, --line 1.1s ease, --line-soft 1.1s ease,
    --accent 1.1s ease, --primary 1.1s ease, --primary-fg 1.1s ease;
}

/* The header's backdrop blur would be recomputed every frame while the sun
   passes behind it; drop it for the few seconds the sky is moving. */
:root.sky-busy header {
  backdrop-filter: none;
}

.sky .sun,
.sky .dusk,
.sky .dawn,
.sky .moon {
  will-change: transform, opacity;
}