.hero-photo {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 24%, #764b8f 0, transparent 24%),
    linear-gradient(135deg, #2b2530 0%, #18151c 55%, #0e0d10 100%);
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#ffffff0b 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0b 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to left, #000, transparent 75%);
}

.terrain-lines {
  position: absolute;
  right: -8vw;
  bottom: -15vw;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  border: 1px solid #c89dea55;
  border-radius: 47% 53% 42% 58%;
  box-shadow: 0 0 0 45px #c89dea12, 0 0 0 90px #c89dea0d, 0 0 0 135px #c89dea09;
  transform: rotate(-12deg);
}

.flight-mark {
  position: absolute;
  right: 7vw;
  top: 23%;
  color: #ffffff12;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 1;
}

.flight-label {
  position: absolute;
  right: 7vw;
  top: calc(23% + clamp(7rem, 20vw, 16rem));
  max-width: 180px;
  color: #c89dea;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: right;
  text-transform: uppercase;
}

.hero-shade {
  background:
    linear-gradient(90deg, #0b0a0de8 0%, #0b0a0d8a 62%, transparent),
    linear-gradient(0deg, #0b0a0dc0, transparent 55%);
}

@media (max-width: 520px) {
  .flight-label { display: none; }
  .terrain-lines { width: 105vw; right: -50vw; bottom: 4vh; }
}