/* The two nested transforms have separate jobs: retreat in depth, then a single banking arc. */
.mvcc-hero .delorean {
  --flight-duration: 5.2s;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1; /* Behind the campaign logo (2), above the tunnel. */
  width: min(820px, 80vw, calc(76svh * 1.36884));
  aspect-ratio: 1195 / 873;
  transform: translate(-50%, -50%);
  pointer-events: none;
  visibility: hidden;
  border-radius: 0;
}

.mvcc-hero .delorean__flight {
  width: 100%;
  height: 100%;
  transform-origin: center;
  opacity: 0;
}

.mvcc-hero .delorean__car {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 120%; /* A low pivot gives the left/right bank a small arc. */
  border-radius: 0;
  filter: drop-shadow(0 0 14px #35b7ff22);
}

.mvcc-hero .delorean.is-flying { visibility: visible; }
.mvcc-hero .delorean.is-flying .delorean__flight {
  animation: delorean-depth-flight var(--flight-duration) linear both;
}
.mvcc-hero .delorean.is-flying .delorean__car {
  animation: delorean-loose-bank var(--flight-duration) cubic-bezier(.45, 0, .55, 1) 1 both;
}
.mvcc-hero .delorean.is-flight-paused * { animation-play-state: paused !important; }

@keyframes delorean-depth-flight {
  0%   { transform: scale(2.4);  filter: blur(15px) brightness(.23); opacity: 0; }
  4%   { transform: scale(2.25); filter: blur(12px) brightness(.28); opacity: 1; }
  20%  { transform: scale(1.65); filter: blur(6px) brightness(.5); opacity: 1; }
  40%  { transform: scale(1.05); filter: blur(1.5px) brightness(.8); opacity: 1; }
  65%  { transform: scale(.56); filter: blur(0) brightness(.95); opacity: 1; }
  82%  { transform: scale(.32); filter: blur(0) brightness(.9); opacity: .6; }
  100% { transform: scale(.12); filter: blur(.7px) brightness(.65); opacity: 0; }
}

@keyframes delorean-loose-bank {
  0%   { transform: perspective(850px) rotateZ(0deg) rotateY(0deg); }
  24%  { transform: perspective(850px) rotateZ(-4deg) rotateY(-1.2deg); }
  62%  { transform: perspective(850px) rotateZ(3.25deg) rotateY(1deg); }
  100% { transform: perspective(850px) rotateZ(0deg) rotateY(0deg); }
}

@media (max-width: 700px) {
  .mvcc-hero .delorean { width: min(90vw, calc(70svh * 1.36884)); }
}
@media (prefers-reduced-motion: reduce) {
  .mvcc-hero .delorean { display: none !important; }
  .delorean * { animation: none !important; }
}
.mvcc-hero.mvcc-hero--reduced .delorean { display: none !important; }