/* Belly Up Cosmic Sky: navy glow, stars and orbital ellipses behind transparent city artwork. */
.hero--night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 24px 38px;
  background:
    radial-gradient(ellipse at 50% 6%, #071b32 0%, transparent 52%),
    radial-gradient(ellipse at 12% 62%, #164c7670, transparent 52%),
    radial-gradient(ellipse at 90% 34%, #77541c35, transparent 48%),
    linear-gradient(180deg, #081a30, #0c2944 56%, var(--color-bg) 100%);
}

.hero--night .hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
}

.hero--night .hero__eyebrow { color: #68cced; }
.hero--night .hero__headline { color: #eaf1f5; }
.hero--night .hero__sub { color: #c7d6df; margin-bottom: 12px; }

.hero__skyline {
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 12px 24px #02122560);
}

.hero__night-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 15%, #ffe8a5 0 1.5px, #f4c76230 3px, transparent 15px),
    radial-gradient(circle at 19% 37%, #fff0b9 0 2px, #e4bb5728 4px, transparent 20px),
    radial-gradient(circle at 32% 9%, #e7eff8 0 1px, transparent 3px),
    radial-gradient(circle at 72% 13%, #ffe9ab 0 2px, #e7be5c30 5px, transparent 22px),
    radial-gradient(circle at 94% 45%, #ffe9ab 0 2px, #e7be5c30 4px, transparent 18px),
    radial-gradient(circle at 6% 49%, #c8e7ef 0 1px, transparent 3px),
    radial-gradient(circle at 24% 64%, #c8e7ef 0 1px, transparent 3px),
    radial-gradient(circle at 80% 59%, #c8e7ef 0 1px, transparent 3px),
    radial-gradient(circle at 58% 33%, #c8e7ef 0 1px, transparent 3px),
    radial-gradient(circle at 43% 42%, #c8e7ef 0 1px, transparent 3px),
    radial-gradient(circle at 90% 9%, #c8e7ef 0 1px, transparent 3px);
}

.hero__night-sky::before {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  right: 8%;
  top: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #fbe6a4 0 13%, #e5c46b 14% 18%, #edce773b 19% 30%, #bfa65421 31% 43%, #e5c46b12 44% 58%, transparent 60%);
  box-shadow: 0 0 70px #e4bf5212;
}

.hero__night-sky span {
  position: absolute;
  width: 1050px;
  height: 390px;
  right: -170px;
  top: 110px;
  border-radius: 50%;
  transform: rotate(-18deg);
  background: repeating-radial-gradient(ellipse at 53% 48%, transparent 0 18px, #7cc7ee29 20px 23px, #e3b23c18 25px 31px, transparent 34px 46px);
  mask-image: radial-gradient(ellipse, transparent 9%, #0009 30%, #000 44%, transparent 69%);
}

.hero__night-sky span + span {
  width: 900px;
  height: 360px;
  right: auto;
  left: -320px;
  top: 200px;
  transform: rotate(22deg);
  opacity: 0.75;
}

.hero--night .search-bar { position: relative; }
.hero--night .search-bar input { background: #0d2336; border-color: #487386; }
.hero--night .search-bar input::placeholder { color: #bfccd4; }

@media (max-width: 640px) {
  .hero--night { padding: 25px 20px 28px; }
  .hero--night .hero__sub { margin-bottom: 16px; }
  .hero__skyline { width: calc(100% + 20px); max-width: none; margin: 0 -10px 22px; }
  .hero__night-sky::before { width: 68px; height: 68px; right: -9px; top: 156px; opacity: 0.75; }
  .hero__night-sky span { width: 680px; height: 280px; right: -300px; top: 150px; opacity: 0.75; }
  .hero__night-sky span + span { left: -520px; top: 230px; }
}