.didi-motion-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #050100;
}

.didi-motion-cover > .didi-motion-cover__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none;
  transform: none !important;
  transition: filter 420ms ease !important;
  user-select: none;
}

.didi-motion-cover__halo {
  position: absolute;
  z-index: 1;
  top: 14.5%;
  right: -1.5%;
  width: 56%;
  aspect-ratio: 1;
  border: clamp(1px, 0.12vw, 2px) solid rgba(255, 117, 45, 0.34);
  border-radius: 50%;
  box-shadow:
    0 0 clamp(14px, 2vw, 32px) rgba(255, 99, 32, 0.26),
    inset 0 0 clamp(10px, 1.4vw, 24px) rgba(255, 123, 51, 0.14);
  filter: brightness(0.9);
  mix-blend-mode: screen;
  opacity: 0.32;
  pointer-events: none;
  transform: scale(0.992);
}

.didi-motion-cover__halo::before {
  position: absolute;
  inset: 8.5%;
  border: 1px solid rgba(255, 145, 70, 0.2);
  border-radius: inherit;
  box-shadow: 0 0 20px rgba(255, 101, 37, 0.12);
  content: "";
}

.didi-motion-cover__halo::after {
  position: absolute;
  top: 7.5%;
  left: 26%;
  width: 23%;
  height: clamp(5px, 0.6vw, 10px);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff2bd 36%, #ff7a2d 72%, transparent);
  box-shadow:
    0 0 13px rgba(255, 238, 173, 0.92),
    0 0 28px rgba(255, 91, 27, 0.82);
  content: "";
  filter: blur(0.5px);
  opacity: 0.5;
  transform: rotate(-20deg);
}

.didi-motion-cover__arrival-shadow {
  position: absolute;
  z-index: 2;
  right: 3.5%;
  bottom: -1%;
  width: 47%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 93, 25, 0.34), rgba(255, 98, 26, 0.08) 48%, transparent 72%);
  filter: blur(clamp(7px, 1.1vw, 18px));
  opacity: 0.5;
  pointer-events: none;
}

.didi-motion-cover__trail {
  position: absolute;
  z-index: 2;
  right: 28%;
  bottom: 20%;
  width: 30%;
  height: clamp(2px, 0.28vw, 5px);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 96, 31, 0.18) 28%, rgba(255, 178, 87, 0.86));
  box-shadow: 0 0 18px rgba(255, 90, 25, 0.52);
  filter: blur(0.4px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-4deg) scaleX(0.2);
  transform-origin: right center;
}

.didi-motion-cover__vehicle-stage {
  position: absolute;
  z-index: 3;
  right: -1.2%;
  bottom: -2.5%;
  display: block;
  width: 54%;
  aspect-ratio: 1672 / 941;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: 64% 88%;
  will-change: transform, opacity;
}

.didi-motion-cover__vehicle-stage > .didi-motion-cover__vehicle {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none;
  transform: none !important;
  transition: none !important;
  user-select: none;
}

.didi-motion-cover__headlight {
  position: absolute;
  top: 14%;
  left: 58.5%;
  width: 8.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 236, 0.92), rgba(255, 218, 107, 0.4) 36%, transparent 72%);
  box-shadow: 0 0 22px rgba(255, 213, 95, 0.76);
  filter: blur(0.3px);
  mix-blend-mode: screen;
  opacity: 0.16;
}

.didi-motion-cover.is-playing .didi-motion-cover__vehicle-stage {
  animation: didi-vehicle-arrive 3.25s cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

.didi-motion-cover.is-playing .didi-motion-cover__trail {
  animation: didi-arrival-trail 3.25s ease-out both;
}

.didi-motion-cover.is-playing .didi-motion-cover__halo {
  animation: didi-halo-pulse 3.25s ease-in-out both;
}

.didi-motion-cover.is-playing .didi-motion-cover__headlight {
  animation: didi-headlight-flash 3.25s ease-in-out both;
}

.didi-motion-cover.is-playing .didi-motion-cover__arrival-shadow {
  animation: didi-shadow-settle 3.25s ease-out both;
}

.didi-motion-cover.is-playing > .didi-motion-cover__plate {
  animation: didi-plate-breathe 3.25s ease-in-out both;
}

@keyframes didi-vehicle-arrive {
  0% {
    opacity: 0;
    transform: translate3d(122%, 24%, 0) rotate(7deg) scale(0.78);
  }
  11% { opacity: 1; }
  54% {
    opacity: 1;
    transform: translate3d(-4%, -1.4%, 0) rotate(-1deg) scale(1.025);
  }
  68% {
    transform: translate3d(1.8%, 0.8%, 0) rotate(0.45deg) scale(0.992);
  }
  81% {
    transform: translate3d(-0.55%, -0.25%, 0) rotate(-0.12deg) scale(1.004);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes didi-arrival-trail {
  0%, 8% {
    opacity: 0;
    transform: rotate(-4deg) scaleX(0.15);
  }
  24% {
    opacity: 0.85;
    transform: rotate(-4deg) scaleX(1);
  }
  49% {
    opacity: 0.42;
    transform: rotate(-4deg) scaleX(0.55);
  }
  63%, 100% {
    opacity: 0;
    transform: rotate(-4deg) scaleX(0.2);
  }
}

@keyframes didi-halo-pulse {
  0%, 45% {
    filter: brightness(0.86);
    opacity: 0.28;
    transform: scale(0.992);
  }
  57% {
    filter: brightness(2.25);
    opacity: 0.98;
    transform: scale(1.012);
  }
  67% {
    filter: brightness(1.05);
    opacity: 0.4;
    transform: scale(1);
  }
  76% {
    filter: brightness(1.72);
    opacity: 0.76;
  }
  100% {
    filter: brightness(0.98);
    opacity: 0.34;
    transform: scale(1);
  }
}

@keyframes didi-headlight-flash {
  0%, 53% { opacity: 0.1; transform: scale(0.86); }
  61% { opacity: 0.95; transform: scale(1.28); }
  71% { opacity: 0.22; transform: scale(1); }
  79% { opacity: 0.58; }
  100% { opacity: 0.16; transform: scale(1); }
}

@keyframes didi-shadow-settle {
  0%, 26% { opacity: 0; transform: scaleX(0.45); }
  58% { opacity: 0.72; transform: scaleX(1.06); }
  74% { opacity: 0.42; transform: scaleX(0.96); }
  100% { opacity: 0.5; transform: scaleX(1); }
}

@keyframes didi-plate-breathe {
  0%, 45% { filter: brightness(0.96) saturate(0.98); }
  58% { filter: brightness(1.07) saturate(1.08); }
  76% { filter: brightness(1.025) saturate(1.04); }
  100% { filter: none; }
}

@media (max-width: 700px) {
  .didi-motion-cover__vehicle-stage {
    right: -2.5%;
    bottom: -3.5%;
    width: 57%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .didi-motion-cover *,
  .didi-motion-cover *::before,
  .didi-motion-cover *::after {
    animation: none !important;
    transition: none !important;
  }

  .didi-motion-cover__vehicle-stage {
    opacity: 1;
    transform: none;
  }

  .didi-motion-cover__halo { opacity: 0.34; }
  .didi-motion-cover__trail { display: none; }
}