/* ==========================================================================
   SKY ENVIRONMENT — ambient CSS sky wash used behind page-hero bands,
   and as a no-JS fallback behind the homepage hero.
   ========================================================================== */

.sky-environment{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.sky-gradient{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #0B1B33 0%, #1D3F63 38%, #4C86B4 68%, #BFD8EE 100%);
}
.sky-variation{
  position:absolute; inset:0;
  background:radial-gradient(60% 45% at 72% 18%, rgba(255,230,190,0.35), transparent 70%);
  mix-blend-mode:screen;
}
.sun-glow{
  position:absolute; top:8%; right:18%; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,170,0.55), rgba(255,224,170,0) 70%);
  filter:blur(4px);
}
.god-rays{
  position:absolute; top:-10%; right:8%; width:60%; height:120%;
  background:conic-gradient(from 200deg at 60% 0%, rgba(255,240,210,0.14), transparent 18%, rgba(255,240,210,0.09) 30%, transparent 42%, rgba(255,240,210,0.11) 55%, transparent 68%);
  opacity:.8; mix-blend-mode:screen;
}
.haze{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg, transparent, rgba(230,240,250,0.55));
}
.horizon{
  position:absolute; left:0; right:0; bottom:22%; height:1px; background:rgba(255,255,255,0.18);
}
.cloud-layer{ position:absolute; inset:0; }
.cloud-layer .cloud-el{
  position:absolute; border-radius:100px; background:rgba(255,255,255,0.55); filter:blur(6px);
}
.dust-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }

/* Lighter wash used behind the simple sub-page breadcrumb heroes */
.sky-environment--pagehero .sky-gradient{
  background:linear-gradient(180deg, #EAF3FB 0%, #F6FAFD 60%, #FFFFFF 100%);
}
.sky-environment--pagehero .sky-variation{
  background:radial-gradient(50% 40% at 80% 10%, rgba(39,170,226,0.10), transparent 70%);
  mix-blend-mode:normal;
}
.sky-environment--pagehero .cloud-layer .cloud-el{ background:rgba(11,27,51,0.05); filter:blur(10px); }

@media (prefers-reduced-motion: reduce){
  .cloud-layer .cloud-el{ animation:none !important; }
}