/*
  La Planque des Affamées — asset livraison animé v2
  Objectif : éviter l'effet "sticker qui glisse".
  Le déplacement, la caisse, les roues, les traînées et la poussière bougent séparément.
*/

.lp-delivery-lane {
  --lp-speed: 7.8s;
  --lp-width: clamp(300px, 43vw, 780px);
  --lp-bottom: 10px;
  --lp-bump: 3.2px;
  --lp-tilt: .5deg;
  --lp-wheel-spin: 290ms;

  position: relative;
  width: 100%;
  height: clamp(175px, 30vw, 380px);
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.lp-delivery-runner {
  position: absolute;
  left: 0;
  bottom: var(--lp-bottom);
  width: var(--lp-width);
  will-change: transform;
  animation: lp-drive var(--lp-speed) linear infinite;
}

/* Ombre de contact : elle vit légèrement indépendamment de la caisse. */
.lp-delivery-runner::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 31%;
  bottom: 1.5%;
  width: 61%;
  height: 5.8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.46) 0 44%, rgba(0,0,0,.16) 62%, transparent 76%);
  filter: blur(4px);
  transform-origin: center;
  animation: lp-shadow 310ms steps(2, end) infinite;
}

.lp-delivery-fx,
.lp-delivery-bump,
.lp-delivery-pitch,
.lp-delivery-wheel-layer {
  position: relative;
  width: 100%;
}

/* Traînées recréées en CSS, donc elles ne paraissent plus collées à l'image. */
.lp-delivery-speedlines {
  position: absolute;
  z-index: -2;
  left: -29%;
  top: 31%;
  width: 65%;
  height: 46%;
  opacity: .72;
  transform-origin: right center;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(245,18,27,.94) 13% 58%, transparent 75%) 0 10% / 100% 6% no-repeat,
    linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.75) 23% 64%, transparent 82%) 0 34% / 92% 4% no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(245,18,27,.92) 10% 70%, transparent 89%) 0 58% / 100% 5% no-repeat,
    linear-gradient(90deg, transparent 0 26%, rgba(255,255,255,.64) 31% 71%, transparent 88%) 0 79% / 86% 3% no-repeat;
  filter: blur(.25px);
  will-change: transform, opacity;
  animation: lp-speedlines 360ms steps(3, end) infinite;
}

/* Poussière dynamique indépendante du dessin d'origine. */
.lp-delivery-dust {
  position: absolute;
  z-index: -1;
  left: -4%;
  bottom: 4%;
  width: 42%;
  height: 31%;
}

.lp-delivery-dust i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  aspect-ratio: 1.65;
  border: 2px solid rgba(255,247,232,.76);
  border-radius: 52% 48% 54% 46%;
  opacity: 0;
  filter: blur(.45px);
  transform-origin: right bottom;
  animation: lp-dust 900ms ease-out infinite;
}

.lp-delivery-dust i:nth-child(2) {
  width: 20%;
  right: 17%;
  bottom: 13%;
  animation-delay: -300ms;
}

.lp-delivery-dust i:nth-child(3) {
  width: 15%;
  right: 33%;
  bottom: 5%;
  animation-delay: -610ms;
}

/* Pavés : mouvement court et irrégulier. */
.lp-delivery-bump {
  will-change: transform;
  transform-origin: 53% 83%;
  animation: lp-cobbles 420ms steps(1, end) infinite;
}

/* Suspension / transfert de masse plus lent. */
.lp-delivery-pitch {
  will-change: transform;
  transform-origin: 58% 82%;
  animation: lp-pitch 1.18s ease-in-out infinite;
}

.lp-delivery-wheel-layer {
  will-change: transform;
}

/* Faux flou de rotation : les vraies roues du dessin restent visibles dessous. */
.lp-delivery-wheel-layer::before,
.lp-delivery-wheel-layer::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: var(--wheel-left);
  top: var(--wheel-top);
  width: var(--wheel-size);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: .46;
  filter: blur(.35px);
  background:
    radial-gradient(circle at center,
      transparent 0 30%,
      rgba(255,255,255,.55) 31% 35%,
      transparent 36% 48%,
      rgba(244,18,28,.34) 49% 55%,
      transparent 56% 100%),
    conic-gradient(from 0deg,
      transparent 0 11deg,
      rgba(255,255,255,.95) 12deg 21deg,
      transparent 22deg 70deg,
      rgba(255,255,255,.78) 71deg 79deg,
      transparent 80deg 144deg,
      rgba(244,18,28,.62) 145deg 154deg,
      transparent 155deg 218deg,
      rgba(255,255,255,.88) 219deg 228deg,
      transparent 229deg 292deg,
      rgba(255,255,255,.72) 293deg 301deg,
      transparent 302deg 360deg);
  will-change: transform, opacity;
  animation: lp-wheel-spin var(--lp-wheel-spin) linear infinite;
}

/* roue arrière caricaturale */
.lp-delivery-wheel-layer::before {
  --wheel-left: 37.7%;
  --wheel-top: 78.2%;
  --wheel-size: 12.6%;
}

/* roue avant */
.lp-delivery-wheel-layer::after {
  --wheel-left: 75.2%;
  --wheel-top: 79.7%;
  --wheel-size: 10.8%;
  opacity: .32;
  animation-duration: calc(var(--lp-wheel-spin) * .92);
}

.lp-delivery-vehicle {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 54% 82%;
  will-change: transform, filter;

  /* On atténue surtout l'ancienne fumée figée à gauche, sans toucher à la voiture. */
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.20) 7%,
    rgba(0,0,0,.58) 15%,
    rgba(0,0,0,.92) 23%,
    #000 29%,
    #000 100%);
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.20) 7%,
    rgba(0,0,0,.58) 15%,
    rgba(0,0,0,.92) 23%,
    #000 29%,
    #000 100%);

  animation:
    lp-engine 145ms steps(2, end) infinite,
    lp-visual-pulse 720ms ease-in-out infinite;
}

@keyframes lp-drive {
  0%   { transform: translate3d(-122%, 0, 0); }
  100% { transform: translate3d(calc(100vw + 122%), 0, 0); }
}

@keyframes lp-cobbles {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  11%  { transform: translate3d(.35px, calc(var(--lp-bump) * -.55), 0) rotate(calc(var(--lp-tilt) * -.42)); }
  23%  { transform: translate3d(-.25px, calc(var(--lp-bump) * .18), 0) rotate(calc(var(--lp-tilt) * .15)); }
  36%  { transform: translate3d(.2px, calc(var(--lp-bump) * -.95), 0) rotate(calc(var(--lp-tilt) * -.74)); }
  48%  { transform: translate3d(-.3px, calc(var(--lp-bump) * .42), 0) rotate(calc(var(--lp-tilt) * .28)); }
  62%  { transform: translate3d(.15px, calc(var(--lp-bump) * -.24), 0) rotate(calc(var(--lp-tilt) * -.18)); }
  76%  { transform: translate3d(-.2px, calc(var(--lp-bump) * .68), 0) rotate(calc(var(--lp-tilt) * .48)); }
  89%  { transform: translate3d(.1px, calc(var(--lp-bump) * -.38), 0) rotate(calc(var(--lp-tilt) * -.24)); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes lp-pitch {
  0%, 100% { transform: rotate(-.08deg) scaleX(1); }
  28%      { transform: rotate(.22deg) scaleX(1.003); }
  61%      { transform: rotate(-.18deg) scaleX(.998); }
  82%      { transform: rotate(.11deg) scaleX(1.001); }
}

@keyframes lp-engine {
  0%   { transform: translate3d(0, 0, 0) skewX(0deg); }
  25%  { transform: translate3d(.45px, -.15px, 0) skewX(-.05deg); }
  50%  { transform: translate3d(-.35px, .12px, 0) skewX(.04deg); }
  75%  { transform: translate3d(.22px, -.08px, 0) skewX(-.03deg); }
  100% { transform: translate3d(0, 0, 0) skewX(0deg); }
}

@keyframes lp-visual-pulse {
  0%, 100% { filter: contrast(1) saturate(1) blur(0); }
  50%      { filter: contrast(1.025) saturate(1.035) blur(.08px); }
}

@keyframes lp-wheel-spin {
  0%   { transform: translate(-50%, -50%) rotate(0turn) scale(1.00); opacity: .34; }
  50%  { transform: translate(-50%, -50%) rotate(.5turn) scale(1.035); opacity: .50; }
  100% { transform: translate(-50%, -50%) rotate(1turn) scale(1.00); opacity: .34; }
}

@keyframes lp-speedlines {
  0%   { transform: translate3d(4%, 0, 0) scaleX(.78); opacity: .30; }
  35%  { transform: translate3d(-1%, 1px, 0) scaleX(1.08); opacity: .78; }
  70%  { transform: translate3d(-5%, -1px, 0) scaleX(.92); opacity: .54; }
  100% { transform: translate3d(4%, 0, 0) scaleX(.78); opacity: .30; }
}

@keyframes lp-dust {
  0% {
    opacity: 0;
    transform: translate3d(18px, 2px, 0) scale(.28) rotate(-4deg);
  }
  18% { opacity: .55; }
  100% {
    opacity: 0;
    transform: translate3d(-74px, -15px, 0) scale(1.55) rotate(7deg);
  }
}

@keyframes lp-shadow {
  0%, 100% { transform: scaleX(.96) scaleY(1); opacity: .76; }
  50%      { transform: scaleX(1.035) scaleY(.72); opacity: .54; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-delivery-runner {
    animation: none;
    transform: translate3d(8vw, 0, 0);
  }

  .lp-delivery-runner::after,
  .lp-delivery-speedlines,
  .lp-delivery-dust i,
  .lp-delivery-bump,
  .lp-delivery-pitch,
  .lp-delivery-wheel-layer::before,
  .lp-delivery-wheel-layer::after,
  .lp-delivery-vehicle {
    animation: none;
  }
}