/* The root owns .experience scroll distance, .scene pinning, and white interior. */
.flight-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  pointer-events: none;
  isolation: isolate;
}

.flight-item {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.flight-item[hidden] {
  display: none;
}

.flight-item img {
  display: block;
  width: auto;
  height: auto;
  max-height: 68vh;
  max-height: 68svh;
  max-width: 65vw;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.flight-item--pharmacy img { clip-path: url(#mask-pharmacy); }
.flight-item--courier img { clip-path: url(#mask-courier); }
.flight-item--soft img {
  width: auto;
  height: auto;
  max-width: 62vw;
  max-height: 65vh;
  max-height: 65svh;
  clip-path: url(#mask-soft-handle);
}
.flight-item--tee img { clip-path: url(#bag-outline-moving); }

.flight-layer.is-reduced-motion .flight-item {
  will-change: opacity;
}

@media (max-width: 600px) {
  .flight-item img { max-width: 80vw; }
  .flight-item--soft img { max-width: 80vw; }
}