/* ==========================================================================
   AEROPLANE TRANSITION (Above Contact Form Section)
   Enters from the extreme left, flies through to the right, and covers the
   full screen (wingspan touches through the ENTIRE height of the screen with zero gap).
   Slides automatically to the right if the user stops near or interacts with the contact form.
   ========================================================================== */

.airplane-contact-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  overflow: hidden;
  z-index: 25;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  user-select: none;
}

.airplane-contact-track {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center; /* Robust Flexbox vertical centering */
  justify-content: flex-start;
  pointer-events: none;
  will-change: transform;
}

/* Wingspan touches through the ENTIRE height of the screen with zero space in between */
.airplane-contact-img {
  display: block;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  width: auto;
  max-width: none;
  object-fit: contain;
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
  filter: drop-shadow(0 35px 70px rgba(0, 0, 0, 0.52));
  will-change: transform;
}

/* Enhanced shadow and ambient glow in dark mode */
[data-mode="dark"] .airplane-contact-img {
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.88))
          drop-shadow(0 0 55px var(--accent-glow, rgba(142, 68, 173, 0.35)));
}

/* ── MOBILE RESPONSIVENESS (< 850px) ───────────────────────────── */
@media (max-width: 849px) {
  .airplane-contact-img {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
}