/* Homepage flight footage */
.hero-visual {
  overflow: hidden;
  border-radius: 28px 0 0 28px;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #284b3b;
}

.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(40, 75, 59, 0.42), rgba(107, 128, 107, 0.18) 56%, rgba(196, 213, 170, 0.1)),
    linear-gradient(0deg, rgba(40, 75, 59, 0.3), transparent 55%);
}

.hero-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.64) contrast(0.98) brightness(0.88);
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.hero-video-media.is-active {
  opacity: 1;
}

.flight-card {
  animation: none;
  bottom: 269px;
  left: calc(84% - 157px);
  right: auto;
  top: auto;
  width: 196px;
}

.request-card {
  left: calc(84% - 196px);
  right: auto;
}

.flight-card.is-transitioning,
.request-card.is-transitioning {
  animation: flight-card-crossfade 1.8s ease-in-out both;
}

.flight-route > div { display: flex; flex-direction: column; }
.flight-route > div:last-child { align-items: flex-end; }
.flight-route small { margin-top: 2px; font: 500 7px var(--mono); letter-spacing: 0; color: #66716b; white-space: nowrap; }

@keyframes flight-card-crossfade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.plane-art { display: none; }
.hero-visual > :not(.hero-video) { z-index: 2; }
.orbit { z-index: 1 !important; }
.flight-card, .request-card, .airline-code { z-index: 3 !important; }
.hero-actions .button { border-radius: 9px; }
.button-small { border-radius: 9px; }

@media (min-width: 801px) {
  .hero-copy { margin-left: 0; }
  .nav-links {
    background: #e2ebda;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    left: 50%;
    margin-left: 0;
    padding: 10px 17px;
    position: absolute;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
  }
  .nav-links a { color: #183d38; }
}

@media (max-width: 800px) {
  .hero-visual { border-radius: 22px 0 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-media { display: none; }
}

.feature-cream .feature-icon { background: var(--lime); color: var(--ink); }
.feature-sand .feature-icon { background: #40685f; color: #f5f2eb; }