/* Original atmosphere from index.html; no alternate palette. */
.hero-bg{position:absolute;inset:0;z-index:0;background:
  linear-gradient(180deg,#02060B 0%,#050E17 42%,#07182A 72%,var(--void) 100%)}
/* Organic storm clouds — SVG fractal noise with the blur baked INTO the filter chain.
   (A CSS blur() filter would clip at its own filter region and leave a visible seam.)
   Non-tiled: one cover-sized field, so there are no repeat seams either. */
.hero-clouds{
  position:absolute;inset:0;opacity:.95;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><filter id='ca' x='-10%' y='-10%' width='120%' height='120%'><feTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='6' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0.60 0 0 0 0 0.70 0 0 0 0 0.86 0 0 0 2.7 -1.02'/><feGaussianBlur stdDeviation='7'/></filter><rect width='1600' height='900' filter='url(%23ca)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><filter id='cb' x='-10%' y='-10%' width='120%' height='120%'><feTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' seed='23'/><feColorMatrix type='matrix' values='0 0 0 0 0.74 0 0 0 0 0.80 0 0 0 0 0.92 0 0 0 1.9 -1.15'/><feGaussianBlur stdDeviation='3'/></filter><rect width='1600' height='900' filter='url(%23cb)'/></svg>");
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
  -webkit-mask-image:radial-gradient(48% 60% at 75% 27%,rgba(0,0,0,.06) 0%,rgba(0,0,0,.42) 34%,#000 74%);
  mask-image:radial-gradient(48% 60% at 75% 27%,rgba(0,0,0,.06) 0%,rgba(0,0,0,.42) 34%,#000 74%)}
/* the light breaking through — screen-blended, so it also lights the cloud edges it passes */
.hero-glow{
  position:absolute;inset:0;mix-blend-mode:screen;
  background:
    radial-gradient(14% 18% at 76% 26%,rgba(255,246,228,.80) 0%,rgba(255,214,158,.44) 46%,rgba(255,200,140,0) 100%),
    radial-gradient(54% 66% at 75% 28%,rgba(255,205,148,.36) 0%,rgba(240,163,95,.13) 46%,rgba(240,163,95,0) 78%)}
/* Warm rim light, masked BY the cloud texture — so the light lands on cloud faces and edges
   instead of floating as a clean radial. This is what makes it read as light through cloud. */
.hero-rim{
  position:absolute;inset:0;mix-blend-mode:screen;opacity:.9;
  background:radial-gradient(52% 62% at 75% 27%,rgba(255,224,170,.95) 0%,rgba(255,190,120,.42) 40%,rgba(255,180,110,0) 76%);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><filter id='ca' x='-10%' y='-10%' width='120%' height='120%'><feTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='6' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0.60 0 0 0 0 0.70 0 0 0 0 0.86 0 0 0 2.7 -1.02'/><feGaussianBlur stdDeviation='7'/></filter><rect width='1600' height='900' filter='url(%23ca)'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><filter id='ca' x='-10%' y='-10%' width='120%' height='120%'><feTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='6' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0.60 0 0 0 0 0.70 0 0 0 0 0.86 0 0 0 2.7 -1.02'/><feGaussianBlur stdDeviation='7'/></filter><rect width='1600' height='900' filter='url(%23ca)'/></svg>");
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Rays: the outer element owns the radial fall-off, the inner element owns the beam pattern
   AND is masked by an INVERTED cloud field — so beams only survive in the gaps between cloud
   and get chopped where the cloud is thick. That occlusion is what stops it reading as a starburst. */
.hero-rays{
  position:absolute;inset:0;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(62% 64% at 77% 24%,#000 4%,rgba(0,0,0,.45) 38%,transparent 70%);
  mask-image:radial-gradient(62% 64% at 77% 24%,#000 4%,rgba(0,0,0,.45) 38%,transparent 70%)}
.hero-rays i{
  position:absolute;inset:0;display:block;opacity:.55;
  background:
    repeating-conic-gradient(from 158deg at 77% 24%,
      rgba(255,242,218,0) 0deg 5.0deg,
      rgba(255,242,218,.16) 7.5deg,
      rgba(255,242,218,.26) 9.6deg,
      rgba(255,242,218,.13) 12.0deg,
      rgba(255,242,218,0) 15.5deg 26deg),
    repeating-conic-gradient(from 171deg at 77% 24%,
      rgba(255,238,210,0) 0deg 8.0deg,
      rgba(255,238,210,.10) 11.0deg,
      rgba(255,238,210,.18) 13.8deg,
      rgba(255,238,210,.09) 17.0deg,
      rgba(255,238,210,0) 21.0deg 38deg);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><filter id='cg' x='-10%' y='-10%' width='120%' height='120%'><feTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='6' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.7 -1.02'/><feGaussianBlur stdDeviation='6'/><feComponentTransfer><feFuncA type='table' tableValues='1 0'/></feComponentTransfer></filter><rect width='1600' height='900' filter='url(%23cg)'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><filter id='cg' x='-10%' y='-10%' width='120%' height='120%'><feTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='6' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.7 -1.02'/><feGaussianBlur stdDeviation='6'/><feComponentTransfer><feFuncA type='table' tableValues='1 0'/></feComponentTransfer></filter><rect width='1600' height='900' filter='url(%23cg)'/></svg>");
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero-grain{
  position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.30;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.0075' numOctaves='4' seed='17' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='420' height='420' filter='url(%23n)'/></svg>");
  background-size:420px 420px}
.hero-stars{
  position:absolute;inset:0;opacity:.85;
  background-image:
    radial-gradient(1.9px 1.9px at 6% 11%,rgba(255,255,255,.95),transparent 100%),
    radial-gradient(1.6px 1.6px at 15% 23%,rgba(255,255,255,.8),transparent 100%),
    radial-gradient(2.1px 2.1px at 24% 7%,rgba(255,255,255,.9),transparent 100%),
    radial-gradient(1.5px 1.5px at 36% 18%,rgba(255,255,255,.7),transparent 100%),
    radial-gradient(1.8px 1.8px at 5% 38%,rgba(255,255,255,.75),transparent 100%),
    radial-gradient(1.6px 1.6px at 45% 5%,rgba(255,255,255,.8),transparent 100%),
    radial-gradient(1.7px 1.7px at 58% 12%,rgba(255,255,255,.7),transparent 100%),
    radial-gradient(1.4px 1.4px at 29% 31%,rgba(255,255,255,.6),transparent 100%),
    radial-gradient(1.5px 1.5px at 11% 52%,rgba(255,255,255,.55),transparent 100%),
    radial-gradient(1.3px 1.3px at 40% 43%,rgba(255,255,255,.5),transparent 100%)}
.hero-vignette{position:absolute;inset:0;background:
  radial-gradient(115% 95% at 20% 48%,rgba(2,6,11,.88) 0%,rgba(2,6,11,.54) 36%,rgba(2,6,11,.04) 68%,rgba(2,6,11,.42) 100%),
  linear-gradient(180deg,rgba(2,6,11,.52) 0%,transparent 20%,transparent 60%,rgba(5,10,15,.92) 100%)}