/* home.css  home-only hero layers on top of zf.css section 9 (galaxy canvas, horizon ground glow). */
/* galaxy: covers the whole .hero__bg above sky + ground (z 1, screen-blended) but under the fan and all text.
   Mask: soft top edge, fades out below the horizon and ends above the headline (--gal-end, set by home.js). */
.hero__galaxy { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 min(calc(var(--sky-h) - 10px), calc(var(--gal-end, 999px) - 40px)), transparent var(--gal-end, calc(var(--sky-h) + 40px)));
          mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 min(calc(var(--sky-h) - 10px), calc(var(--gal-end, 999px) - 40px)), transparent var(--gal-end, calc(var(--sky-h) + 40px))); }
.zf-intro .hero__galaxy { animation: zfFade 1200ms var(--ease-out) 200ms both; }
/* horizon bridge: the ground's top edge carries the sky's violet and a lime light down into the black, and a wide
   lime glow straddles the curve, so sky and ground flow into each other (alphas measured: headline/paragraph >= 4.5:1) */
.hero__ground { background:
  radial-gradient(1000px 260px at 50% 0, rgba(88, 246, 177, .16), transparent 70%),
  linear-gradient(180deg, rgba(58, 36, 112, .75) 0, rgba(43, 26, 79, .35) 70px, rgba(26, 16, 48, .12) 150px, transparent 240px),
  var(--bg); }
.hero__bg .glow--horizon { --glow-a: .28; z-index: 0; width: min(1400px, 120%); height: 460px; aspect-ratio: auto;
  top: var(--sky-h); left: 50%; translate: -50% -50%; filter: blur(36px);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--glow-rgb) / var(--glow-a)), rgb(var(--glow-rgb) / calc(var(--glow-a) * .35)) 50%, transparent 80%); }
@media (max-width: 575px) {
  .hero__ground { background:
    radial-gradient(420px 140px at 50% 0, rgba(88, 246, 177, .14), transparent 70%),
    linear-gradient(180deg, rgba(58, 36, 112, .7) 0, rgba(43, 26, 79, .25) 50px, transparent 130px),
    var(--bg); }
  .hero__bg .glow--horizon { width: 140%; height: 260px; --glow-a: .24; }
}
/* desktop: the hero composition may be wider than the 1240 container (its core is capped at 3.36 F in zf.css);
   the sky's side glows hang off the fan, not the viewport edges, so on wide screens they frame the galaxy */
@media (min-width: 1101px) {
  .hero__in { max-width: none; }
  .hero__sky { background:
    radial-gradient(calc(var(--fan-w) * .22) 12% at calc(50% - var(--fan-w) * .38) 58%, rgba(88, 246, 177, .3), transparent),
    radial-gradient(calc(var(--fan-w) * .22) 12% at calc(50% + var(--fan-w) * .38) 58%, rgba(88, 246, 177, .3), transparent),
    radial-gradient(calc(var(--fan-w) * .42) 45% at calc(50% - var(--fan-w) * .5) 70%, rgba(173, 150, 241, .55), transparent 70%),
    radial-gradient(calc(var(--fan-w) * .42) 45% at calc(50% + var(--fan-w) * .5) 70%, rgba(173, 150, 241, .55), transparent 70%),
    linear-gradient(180deg, #010102 0%, #1A1030 35%, #2B1A4F 70%, #3A2470 100%); }
}