/* L03 only. Every spatial layer shares the existing 1671 × 941 scene.
   CLEAR has zero opacity; no existing visual property is overridden. */
#scene {
  --l03-cloud-opacity: 0;
  --l03-haze-opacity: 0;
}
/* Remove CLEAR from the compositing tree entirely. An opacity-zero layer
   can still change Chromium's backdrop-filter surface behind the chatbox. */
#scene:not([data-weather="cloudy"]):not([data-weather="rainy_overcast"]) .l03-clouds,
#scene:not([data-weather="cloudy"]):not([data-weather="rainy_overcast"]) .l03-distance-haze {
  display: none;
}
#scene[data-weather="cloudy"] {
  --l03-cloud-opacity: .88;
  --l03-haze-opacity: .32;
  --l03-ceiling-density: .26;
}
#scene[data-weather="rainy_overcast"] {
  --l03-cloud-opacity: 1;
  --l03-haze-opacity: .78;
  --l03-ceiling-density: .9;
}

.l03-clouds {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: var(--l03-cloud-opacity);
  transition: opacity 1800ms ease;
  --l03-cloud-light: 199, 213, 223;
  --l03-cloud-shadow: 48, 69, 91;
  background:
    linear-gradient(to bottom, transparent 21%, rgba(var(--l03-cloud-shadow), var(--l03-ceiling-density)) 24%, rgba(var(--l03-cloud-shadow), var(--l03-ceiling-density)) 38%, rgba(var(--l03-cloud-shadow), .18) 58%, transparent 72%);
}
/* R1: real alpha cloud density with irregular, multiscale structure.
   Both sky crossfade slots reuse one pre-rasterized canonical-space alpha mask. */
.l03-clouds::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 21%, rgb(var(--l03-cloud-shadow)) 24%, rgb(var(--l03-cloud-light)) 33%, rgb(var(--l03-cloud-light)) 39%, rgb(var(--l03-cloud-shadow)) 51%, transparent 65%);
  -webkit-mask: url('../assets/weather_cloud_structure.png') center / 100% 100% no-repeat;
  mask: url('../assets/weather_cloud_structure.png') center / 100% 100% no-repeat;
}
#scene[data-weather="rainy_overcast"] .l03-clouds::before {
  /* Thick ceiling closes the blue gaps while retaining cloud relief. */
  background: linear-gradient(180deg, transparent 21%, rgb(var(--l03-cloud-shadow)) 24%, rgba(var(--l03-cloud-light), .68) 36%, rgba(var(--l03-cloud-light), .48) 46%, rgb(var(--l03-cloud-shadow)) 56%, transparent 66%);
}
.sky-dawn .l03-clouds {
  --l03-cloud-light: 197, 182, 194;
  --l03-cloud-shadow: 65, 62, 88;
}
.sky-sunset .l03-clouds {
  --l03-cloud-light: 204, 164, 145;
  --l03-cloud-shadow: 68, 52, 74;
}
.sky-night .l03-clouds {
  --l03-cloud-light: 55, 76, 102;
  --l03-cloud-shadow: 5, 12, 24;
}

/* Between city (18) and optical glass (20): a depth-varying extinction
   field, confined to the exact original window mask, behind shell and UI. */
.l03-distance-haze {
  z-index: 19;
  pointer-events: none;
  opacity: var(--l03-haze-opacity);
  transition: opacity 1800ms ease;
  /* Window clipping belongs to the static aperture parent. */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}
/* Use a nested spatial alpha field so the window mask is not replaced. */
.l03-distance-haze::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgb(79, 103, 124);
  transition: background-color var(--time-transition-duration) ease;
  -webkit-mask-image: radial-gradient(ellipse 48% 24% at 50% 58%, #000 12%, rgba(0,0,0,.68) 48%, transparent 100%), linear-gradient(transparent 22%, rgba(0,0,0,.18) 35%, rgba(0,0,0,.48) 55%, transparent 74%);
  mask-image: radial-gradient(ellipse 48% 24% at 50% 58%, #000 12%, rgba(0,0,0,.68) 48%, transparent 100%), linear-gradient(transparent 22%, rgba(0,0,0,.18) 35%, rgba(0,0,0,.48) 55%, transparent 74%);
}
.time-dawn .l03-distance-haze::before { background-color: rgb(100, 91, 114); }
.time-sunset .l03-distance-haze::before { background-color: rgb(115, 80, 84); }
.time-night .l03-distance-haze::before { background-color: rgb(14, 28, 46); }

.dev-button-row--weather { grid-template-columns: .8fr .9fr 1.5fr; gap: 5px; }
.dev-button-row--weather button { padding-inline: 4px; }
@media (prefers-reduced-motion: reduce) {
  .l03-clouds, .l03-distance-haze, .l03-distance-haze::before { transition-duration: 0ms; }
}