/* ============================================================
   B3BOP.render — sky.css  (time-of-day sky, driven by sky.js)
   Colours come from the brand guide's three-mode system (palette_skies.html):
   Open Sky (day) · Signal Dusk (home) · 2AM Ramen (night), plus dawn + golden hour in between.
   sky.js writes --sky-* variables and data-sky-theme="light|dark" on the element it runs on.
   ============================================================ */
.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top, #0E0A07) 0%, var(--sky-mid, #1C130B) 55%, var(--sky-bottom, #3A2410) 100%);
}
.sky__glow {                                  /* warm light pooling on the horizon */
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 45% at 50% 100%, var(--sky-glow, rgba(196, 84, 26, 0.35)), transparent 72%);
}
.sky__stars {
  position: absolute;
  inset: 0 0 35% 0;
  opacity: var(--sky-stars, 0);
}
.sky__stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #E9E0CF;
  box-shadow: 0 0 4px rgba(233, 224, 207, 0.8);
  animation: skyTwinkle 4s ease-in-out infinite;
}
.sky__orb {                                   /* sun by day, moon by night; sky.js moves it along an arc */
  position: absolute;
  width: clamp(44px, 9vmin, 110px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: var(--sky-orb-opacity, 0);
  left: var(--sky-orb-x, 50%);
  top: var(--sky-orb-y, 50%);
}
.sky__orb--sun {
  background: radial-gradient(circle at 45% 40%, #FFE3B0, #F2B35E 55%, #E08A3C);
  box-shadow: 0 0 60px 20px rgba(242, 179, 94, 0.45), 0 0 160px 60px rgba(224, 138, 60, 0.25);
}
.sky__orb--moon {
  background: radial-gradient(circle at 38% 35%, #F4EEE2, #D9D0BF 60%, #B9AF9C);
  box-shadow: 0 0 40px 10px rgba(233, 224, 207, 0.25), inset -0.6em -0.4em 0 rgba(0, 0, 0, 0.12);
}
@keyframes skyTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- light theme (daytime sky): ink text instead of light text, darker accents for contrast ---- */
[data-sky-theme="light"] {
  --clr-text-bright: #0C1817;
  --clr-text:        #1F3533;
  --clr-text-dim:    #3A504D;
  --clr-cyan:        #0F6F66;               /* teal ink: the bright signal cyan is unreadable on a pale sky */
  --clr-orange:      #A8431A;
  --clr-ochre:       #7A4E14;
  --grad-dark-vignette: radial-gradient(ellipse at center, transparent 55%, rgba(12, 24, 23, 0.18) 100%);
}
[data-sky-theme="light"] .wordmark { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
[data-sky-theme="light"] .prompt { border-bottom-color: rgba(15, 111, 102, 0.35); }
/* soft halo behind text: keeps it readable while the sky passes through mid-tones (dawn, golden hour) */
[data-sky-theme="dark"] :is(.wordmark, .tagline, .soon, .work-line, .links, .ticker, .prompt, .mascot__caption) {
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4);
}
[data-sky-theme="light"] :is(.tagline, .soon, .work-line, .links, .ticker, .prompt, .mascot__caption) {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 0 2px rgba(255, 255, 255, 0.5);
}
[data-sky-theme="dark"][data-sky-contrast="low"] :is(.wordmark, .tagline, .soon, .work-line, .links, .ticker, .prompt, .mascot__caption) {
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.7);
}
[data-sky-theme="light"][data-sky-contrast="low"] :is(.wordmark, .tagline, .soon, .work-line, .links, .ticker, .prompt, .mascot__caption) {
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.85), 0 0 6px rgba(255, 255, 255, 0.75), 0 0 2px rgba(255, 255, 255, 0.7);
}
[data-sky-theme] .wordmark, [data-sky-theme] .tagline, [data-sky-theme] .soon, [data-sky-theme] .work-line a,
[data-sky-theme] .links a, [data-sky-theme] .ticker, [data-sky-theme] .prompt, [data-sky-theme] .mascot__caption {
  transition: color 0.8s ease, border-color 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sky__stars i { animation: none; }
}

/* ---- visitor time control (sky_dial.js): clock button top-right, opens a small panel ---- */
.skydial {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 20;
  font-family: var(--font-body);
  color: #DCEAE6;
}
.skydial__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.75em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(12, 18, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #DCEAE6;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.skydial__toggle:hover, .skydial__toggle[aria-expanded="true"] { border-color: #2FB6A8; background: rgba(12, 18, 18, 0.75); }
.skydial__icon { font-size: 0.95em; color: #F2B35E; }
.skydial.is-preview .skydial__toggle { border-color: rgba(221, 134, 104, 0.7); }   /* clay ring = not your real time */
.skydial__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(300px, calc(100vw - 32px));
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(12, 18, 18, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  text-shadow: none;
}
.skydial__panel[hidden] { display: none; }
.skydial__readout { display: flex; justify-content: space-between; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.skydial__phase { color: #DD8668; }
.skydial__mode { color: #8C9A97; }
.skydial__range { width: 100%; margin: 10px 0; accent-color: #2FB6A8; }
.skydial__modes, .skydial__row { display: flex; flex-wrap: wrap; gap: 6px; }
.skydial__row { margin-top: 8px; }
.skydial__panel button {
  padding: 0.35em 0.65em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #DCEAE6;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
.skydial__panel button:hover { border-color: #2FB6A8; }
.skydial__live[aria-pressed="true"] { border-color: #00E5D1; color: #00E5D1; }
.skydial__live { margin-left: auto; }