.flight {
  margin: 0 var(--gutter) clamp(1.1rem, 3vw, 3rem);
  scroll-margin-top: 78px;
  --flight-progress: 0;
  --flight-bob: 0%;
  --flight-top: clamp(70px, calc(50svh - 24vw), 180px);
}

.flight__hold {
  border: 1px solid var(--poster-blue);
  background: var(--ink);
}

.flight__frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 2;
  overflow: hidden;
  background: #33104b;
}

.flight__frame > :not(.flight__skyline) {
  position: absolute;
  pointer-events: none;
}

.flight__skyline { display: block; height: 100%; }
.flight__skyline img { width: 100%; height: 100%; object-fit: cover; }

.flight__night {
  inset: 0;
  background: linear-gradient(180deg, #06103a 0%, #202b99 46%, #251660 66%, transparent 86%);
  mix-blend-mode: multiply;
  opacity: calc(.89 * var(--flight-progress));
}

.flight__sun-sky {
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 95% 66%, 91% 67%, 84% 70%, 77% 70%, 74% 68%, 66% 66%, 61% 68%, 52% 71%, 43% 69%, 39% 70%, 35% 71%, 31% 73%, 27% 72%, 23% 70%, 16% 68%, 10% 70%, 5% 68%, 0 69%);
}

.flight__sun {
  position: absolute;
  top: 54%;
  left: 31.8%;
  width: 14.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff49bd 3%, #ff4797 54%, #ff956b 81%, #ffe264 100%);
  mask-image: linear-gradient(#000 72%, #0007 98%);
  transform: translate3d(-50%, calc(-12% + var(--flight-progress) * 110%), 0);
  opacity: calc(1 - var(--flight-progress) * .65);
}

.flight__river {
  inset: 0;
  clip-path: polygon(26% 89%, 35% 89%, 47% 90%, 58% 92%, 66% 91%, 70% 92%, 79% 91%, 89% 90%, 96% 89%, 94% 93%, 100% 96%, 100% 100%, 29% 100%, 34% 95%);
  mix-blend-mode: screen;
  opacity: .38;
}

.flight__river::before,
.flight__river::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
}

.flight__river::before {
  width: 152%;
  height: 100%;
  background: repeating-linear-gradient(92deg, transparent 0 6%, #f6f53d60 6.8% 7.2%, transparent 8% 12%, #ff36a654 13% 14%, transparent 15% 19%);
  transform: translate3d(calc(-31.47% * var(--flight-progress)), 0, 0);
}

.flight__river::after {
  width: 124%;
  height: 125%;
  background: repeating-linear-gradient(175deg, transparent 0 5px, #90faff7a 6px 7px, transparent 8px 13px);
  transform: translate3d(calc(-19.35% * var(--flight-progress)), calc(-14.4% * var(--flight-progress)), 0);
}

.flight__beam {
  bottom: 13%;
  width: 34%;
  height: 106%;
  clip-path: polygon(15% 0, 85% 0, 51% 100%, 49% 100%);
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  opacity: calc(.09 + var(--flight-progress) * .53);
}

.flight__beam--left {
  left: 1%;
  background: linear-gradient(0deg, #6feeff, #6feeff4d 66%, transparent);
  transform: rotate(calc(22deg - var(--flight-progress) * 57deg));
}

.flight__beam--right {
  right: 1%;
  background: linear-gradient(0deg, #f6f53d, #ff8bee70 70%, transparent);
  transform: rotate(calc(-29deg + var(--flight-progress) * 62deg));
}

.flight__bee {
  top: 1.8%;
  left: 50%;
  width: 39%;
  height: auto;
  transform: translate3d(calc(-50% + var(--flight-progress) * 53%), calc(var(--flight-bob) - var(--flight-progress) * 2%), 0);
}

.flight__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  min-height: 40px;
  padding: .5rem .8rem .35rem;
  border-top: 1px solid var(--poster-blue);
  color: var(--poster-blue);
  font: 600 clamp(.9rem, 1.65vw, 1.28rem)/1 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.flight__cue { display: none; color: var(--paper); text-align: end; }

.flight__bee img { width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .flight[data-flight-ready]::after {
    content: "";
    display: block;
    height: clamp(210px, 64svh, 580px);
  }
  .flight[data-flight-ready] .flight__hold { position: sticky; top: var(--flight-top); }
  .flight[data-flight-ready] .flight__cue { display: inline; }
}

@media (max-width: 600px) {
  .flight { --flight-top: clamp(64px, calc(50svh - 26vw - 20px), 225px); }
  .flight[data-flight-ready]::after { height: clamp(150px, 42svh, 330px); }
}

@media (prefers-reduced-motion: reduce) {
  .flight__beam { opacity: .16; }
}