/* Night sky: the page's one gradient moment. A navy radial sky with a canvas starfield that twinkles and
   drifts very slowly (js/components/sky.js). Without JS, or before it runs, a static CSS starfield shows.
   <section class="db-sky" data-db="sky" [data-density="low|high|0.6"] [data-glow] [data-still]> ... </section>
   Optional painted ground: <img class="db-sky__band" src="assets/art/night-hills-band.png" alt=""> */
.db-sky{position:relative;isolation:isolate;overflow:hidden;color:var(--db-ink);
  background:radial-gradient(120% 90% at 50% -10%,var(--db-night-top),var(--db-night-bottom) 70%)}
/* CSS fallback stars: three tiled layers of tiny dots at different tile sizes so the repeat never reads */
.db-sky::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.85) 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 41%,rgba(255,255,255,.6) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 34% 77%,rgba(255,255,255,.7) 0 1px,transparent 1.6px),
    radial-gradient(circle at 86% 88%,rgba(255,255,255,.5) 0 .7px,transparent 1.3px),
    radial-gradient(circle at 22% 52%,rgba(255,255,255,.45) 0 .7px,transparent 1.3px),
    radial-gradient(circle at 78% 12%,rgba(255,255,255,.75) 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 48% 8%,rgba(255,255,255,.4) 0 .6px,transparent 1.2px),
    radial-gradient(circle at 91% 60%,rgba(255,255,255,.55) 0 .8px,transparent 1.4px);
  background-size:230px 210px,230px 210px,230px 210px,230px 210px,370px 330px,370px 330px,510px 470px,510px 470px}
.db-sky.is-live::before{opacity:0}
.db-sky__canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
/* a soft moonlit glow, top right */
.db-sky[data-glow]::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-12vmax;top:-16vmax;width:58vmax;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--db-gold-pale) 9%,transparent),color-mix(in srgb,var(--db-gold-pale) 3%,transparent) 55%,transparent)}
.db-sky__band{position:absolute;left:0;right:0;bottom:0;z-index:-1;width:100%;height:auto;max-height:var(--db-sky-band-h,52%);object-fit:cover;object-position:50% 35%;
  pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);mask-image:linear-gradient(to bottom,transparent,#000 22%)}