/* The answering horizon, shared by the public face and the app.
   (Replaces aurora.css — the teal blob field every AI site ships. This is not that.)

   One low sun for the whole product: a warm band of first light held at the bottom of the
   page, a single hard 1px rule where sky meets it, and darkness above for the work to sit
   in. On the job page the horizon ANSWERS the run — dim while idle, warmer while agents
   burn tokens, full gold when the report lands — so the page's light source is itself a
   reading of the instrument.

   Markup contract, both shells:
     <div class="horizon" aria-hidden="true"></div>
     <svg class="grain" aria-hidden="true">…feTurbulence…</svg>
   State classes (job page only): .working, .done — toggled by app.js from the event stream.

   Compositor-only: the band animates opacity, nothing else. Grain is a static SVG filter.
   Everything here dies under prefers-reduced-motion except the static light itself. */

.horizon {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 38vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(140% 78% at 50% 112%,
      rgba(242, 163, 60, 0.26) 0%,
      rgba(214, 116, 73, 0.13) 30%,
      rgba(150, 162, 230, 0.055) 55%,
      rgba(0, 0, 0, 0) 74%);
}

/* No hard rule at the horizon's top edge: it sat mid-viewport and struck through any text
   scrolled across it. The sharp line lives in the dawn-line under the header instead. */

/* The slow breath of a banked fire. Opacity only, and slow enough to be felt, not seen. */
.horizon::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 60% at 50% 114%,
    rgba(242, 163, 60, 0.14) 0%,
    rgba(0, 0, 0, 0) 62%);
  animation: horizon-breathe 14s ease-in-out infinite;
}
@keyframes horizon-breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* The horizon answering the work. Brighter while agents run; steady gold when done. */
.horizon.working { filter: saturate(1.15); }
.horizon.working::after { animation-duration: 5s; }
.horizon.done::after {
  animation: none;
  opacity: 1;
  background: radial-gradient(120% 62% at 50% 114%,
    rgba(242, 163, 60, 0.22) 0%,
    rgba(0, 0, 0, 0) 64%);
}

/* Machined grain over everything: one inline feTurbulence, nearly invisible, exactly
   enough that large dark panels read as material instead of vector fill. */
.grain {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  .horizon::after { animation: none; opacity: 0.6; }
}