/* ============================================================
   LEDURA home: the sky
   One fixed backdrop for the whole page. Night until the seal,
   then dawn. js/fx-sky.js writes --dawn (0 night, 1 morning) on
   <html>; without JS the night simply stays behind the dark
   sections and the dawn sections carry their own ground.
   ============================================================ */
:root {
  --dawn: 0;
  --sky-midnight: #0B0E17;   /* the splash art's navy, not black */
  --sky-deep:     #131525;
  --sky-horizon:  #C9936B;   /* first light, warm rose gold */
}

.sky-night, .sky-dawn, .sky-sun { position: absolute; inset: 0; }

.sky-night {
  background:
    radial-gradient(120% 80% at 70% 0%, var(--sky-deep), transparent 60%),
    linear-gradient(180deg, var(--sky-midnight), var(--night-bg));
}
/* Sunrise in three layers, staggered along --dawn so it reads as light
   arriving rather than a colour swap: the horizon warms first (0 to .45),
   the sun climbs (0 to 1), and the day rises up the sky last (.2 to 1). */
.sky-night::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: clamp(0, var(--dawn) * 2.2, 1);
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--sky-horizon) 70%, transparent),
    color-mix(in srgb, var(--sky-horizon) 30%, transparent) 45%,
    transparent 85%);
}
/* The day climbs from the horizon: a soft mask edge rises with --dawn,
   so the zenith keeps its night blue a moment longer than the ground. */
.sky-dawn {
  --edge: calc(var(--dawn) * 170% - 55%);
  opacity: clamp(0, (var(--dawn) - .2) / .4, 1);
  -webkit-mask-image: linear-gradient(0deg, var(--ink) var(--edge), transparent calc(var(--edge) + 55%));
  mask-image: linear-gradient(0deg, var(--ink) var(--edge), transparent calc(var(--edge) + 55%));
  background:
    radial-gradient(160% 70% at 50% 115%, color-mix(in srgb, var(--gold-soft) 55%, transparent), transparent 60%),
    linear-gradient(180deg, var(--champagne) 0%, var(--bg) 55%);
}
/* The sun: a soft warm glow that rises from below the fold, peaks while
   the seal breaks and keeps climbing out of the top as it dissolves, so
   the morning after it is an even sky with nothing parked behind content. */
.sky-sun {
  inset: auto 0 -30svh 0;
  height: 90svh;
  opacity: clamp(0, min(var(--dawn) * 2, (1 - var(--dawn)) * 3), 1);
  transform: translateY(calc(45svh - var(--dawn) * 80svh));
  background: radial-gradient(50% 50% at 50% 60%, color-mix(in srgb, var(--sky-horizon) 55%, transparent), transparent 70%);
  pointer-events: none;
}

/* Dawn sections keep a readable ground even without JS. */
[data-skin="dawn"] { background: color-mix(in srgb, var(--bg) calc((1 - var(--dawn)) * 100%), transparent); }
html.has-sky [data-skin="dawn"] { background: transparent; }

/* Phones: the day simply fades in; no full-screen mask repaint per frame. */
@media (max-width: 767px) {
  .sky-dawn { -webkit-mask-image: none; mask-image: none; opacity: clamp(0, (var(--dawn) - .25) / .5, 1); }
}