/* atmosphere — overlay layers that make the scene rig visible.
   Each one reads directly from the CSS custom properties published by
   js/scene.js on every frame, so debug-panel sliders drive them live. */

/* Register --sun-breath + --sun-breath-scale as animatable numbers so
   @keyframes can interpolate them (default custom-prop type is <string>
   which is non-animatable). Without @property registration, the values
   just snap at 50% instead of tweening — the transform still animates,
   but the opacity boost is lost. Graceful fallback in older browsers. */
@property --sun-breath {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}
@property --sun-breath-scale {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}


/* --- Sun glow: the visible "sun" itself. Anchored at (--sun-x, --sun-y),
   tinted by color temperature, scaled by intensity + activation. Screen
   blend so it brightens whatever is below without hard-overwriting it.
   Disc radius is a real function of --sun-size (angular size in degrees) —
   dusk 3.6° is a huge diffuse blob, midday 1.4° is a tight point. Halo
   scales too but less, since atmospheric halo depends more on haze than
   the sun's disc size. Low elevation flattens the disc horizontally
   (atmospheric refraction). --- */
.sun-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: calc(var(--sun-intensity) * var(--sun-breath, 1));
  transform: scale(var(--sun-breath-scale, 1));
  transform-origin: var(--sun-x) var(--sun-y);
  mix-blend-mode: screen;
  background:
    /* tight bright core — the "sun disc". Ellipse sized in vw so it scales
       with viewport. Width = base * scale * elongation; height = base * scale. */
    radial-gradient(
      ellipse
        calc(3.2vw * var(--sun-scale) * var(--sun-elongation))
        calc(3.2vw * var(--sun-scale))
      at var(--sun-x) var(--sun-y),
      rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.95) 0%,
      rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.72) 34%,
      rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.40) 62%,
      rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.16) 84%,
      transparent 100%),
    /* room-halo — much broader, gets a small elongation boost too. */
    radial-gradient(
      ellipse
        calc(58vw * var(--sun-elongation))
        calc(48vw)
      at var(--sun-x) var(--sun-y),
      rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.32) 0%,
      rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.16) 30%,
      rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.07) 58%,
      transparent 92%);
  transition: opacity 200ms ease;
}

/* --- Haze: soft warm atmospheric wash from the sun corner. Broader than
   the sun glow — this is the "dust in the air catching light" feel. --- */
.haze {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: var(--haze);
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 170% 130% at var(--sun-x) var(--sun-y),
    rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.32),
    rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0) 80%);
}

/* --- God rays: thin beams that RADIATE from the sun. Uses
   repeating-conic-gradient centered at the actual sun coord, so rays
   physically emanate from the light source instead of being parallel
   diagonals. The radial mask fades them out with distance (atmospheric
   attenuation). Blur softens the hard slice edges into believable shafts. --- */
.god-rays {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: var(--god-rays);
  mix-blend-mode: screen;
  background: repeating-conic-gradient(
    from 0deg at var(--sun-x) var(--sun-y),
    rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0)    0deg,
    rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.10) 2.2deg,
    rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0)    5deg);
  -webkit-mask-image: radial-gradient(140% 110% at var(--sun-x) var(--sun-y), #000 4%, transparent 68%);
          mask-image: radial-gradient(140% 110% at var(--sun-x) var(--sun-y), #000 4%, transparent 68%);
  filter: blur(3px);
}

/* --- Bloom: soft halo bleed around the sun disc. Radius scales with disc
   size (bigger sun = bigger bloom), opacity gated on intensity² so it only
   really kicks in when the sun is punching (physical bloom threshold). --- */
.bloom {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: calc(var(--bloom) * var(--sun-intensity) * var(--sun-intensity) * var(--sun-breath, 1));
  transform: scale(var(--sun-breath-scale, 1));
  transform-origin: var(--sun-x) var(--sun-y);
  mix-blend-mode: screen;
  background: radial-gradient(
    ellipse
      calc(9vw * var(--sun-scale) * var(--sun-elongation))
      calc(9vw * var(--sun-scale))
    at var(--sun-x) var(--sun-y),
    rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.55) 0%,
    rgba(var(--sun-r), var(--sun-g), var(--sun-b), 0.20) 45%,
    transparent 100%);
  filter: blur(calc(14px * var(--sun-scale)));
}

/* --- Vignette: darkens the corners, focuses eye on center. Anchored
   toward the sun so the light-facing side gets a shallower falloff
   (film exposure: highlights + bright side, shadows dominate the opposite
   corner). Pure symmetric radial is what makes the base vignette feel CG. --- */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: var(--vignette);
  background:
    /* main vignette anchored off-center toward the sun */
    radial-gradient(ellipse 105% 95% at var(--sun-x) var(--sun-y),
      transparent 30%,
      rgba(6, 12, 10, 0.55) 92%,
      rgba(4, 8, 7, 0.85) 130%),
    /* anti-sun corner darker still */
    radial-gradient(ellipse 90% 80% at calc(100% - var(--sun-x)) calc(100% - var(--sun-y)),
      transparent 40%,
      rgba(3, 6, 4, 0.35) 100%);
}

/* --- Sun breathing: gentle scale + intensity oscillation on the sun disc
   and bloom halo. Simulates slow cloud drift across the sun's face.
   God rays deliberately excluded (their conic gradient is scale-sensitive
   and would jitter). Gated by html.motion-breath from js/motion.js. --- */
@keyframes sunBreath {
  0%   { --sun-breath: 0.955; --sun-breath-scale: 0.985; }
  100% { --sun-breath: 1.040; --sun-breath-scale: 1.015; }
}
html.motion-breath .sun-glow,
html.motion-breath .bloom {
  animation: sunBreath 6.5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  html.motion-breath .sun-glow,
  html.motion-breath .bloom { animation: none; }
}