.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--c-nuit-profond);
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}
.loader--parti {
  opacity: 0;
  pointer-events: none;
}
#loader-van {
  display: block;
  width: min(900px, 92vw);
  height: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 16%,
    #000 84%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 16%,
    #000 84%,
    transparent
  );
}
@keyframes van-trajet {
  from {
    translate: -1300px 0;
  }
  to {
    translate: 0 0;
  }
}
@keyframes van-roues {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 1952.4deg;
  }
}
@keyframes van-suspension {
  0% {
    rotate: 0deg;
    translate: 0 0;
    animation-timing-function: ease-out;
  }
  14% {
    rotate: -0.7deg;
    translate: 0 0.3px;
    animation-timing-function: ease-in-out;
  }
  36% {
    rotate: 0deg;
    translate: 0 0;
    animation-timing-function: ease-in;
  }
  62% {
    rotate: 1.5deg;
    translate: 0 1.1px;
    animation-timing-function: ease-in-out;
  }
  78% {
    rotate: -0.55deg;
    translate: 0 -0.8px;
    animation-timing-function: ease-in-out;
  }
  90% {
    rotate: 0.2deg;
    translate: 0 0.25px;
    animation-timing-function: ease-out;
  }
  100% {
    rotate: 0deg;
    translate: 0 0;
  }
}
@keyframes van-ralenti {
  50% {
    translate: 0 0.45px;
  }
}
@keyframes van-vapeur {
  0% {
    opacity: 0;
    translate: 0 0;
    scale: 0.35;
  }
  20% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    translate: -120px -80px;
    scale: 1.8;
  }
}
#Sol {
  fill: none;
  stroke: var(--c-cyan);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  opacity: 0.35;
}
#Vehicule {
  will-change: translate;
  animation: van-trajet 1.6s cubic-bezier(0.5, 0, 0.2, 1) both;
}
#grad-vapeur stop {
  stop-color: var(--c-cyan);
}
#grad-reflet stop {
  stop-color: var(--c-cyan-fort);
}
#grad-vapeur stop:last-child,
#grad-reflet stop:last-child {
  stop-opacity: 0;
}
#Ombre-véhicule path {
  fill: url(#grad-reflet);
  opacity: 0.55;
}
#Roue-droite,
#Roue-gauche {
  transform-box: fill-box;
  transform-origin: center;
  will-change: rotate;
  animation: van-roues 1.6s cubic-bezier(0.5, 0, 0.2, 1) both;
}
#Caisse {
  transform-box: fill-box;
  transform-origin: 15% 100%;
  animation:
    van-suspension 2.1s linear both,
    van-ralenti 0.16s ease-in-out 2.1s infinite;
}
#Vapeur circle {
  fill: url(#grad-vapeur);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: van-vapeur 1.2s ease-out infinite;
}
#Vapeur circle:nth-child(1) {
  animation-delay: 1.6s;
}
#Vapeur circle:nth-child(2) {
  animation-delay: 2s;
}
#Vapeur circle:nth-child(3) {
  animation-delay: 2.4s;
}
@media (prefers-reduced-motion: reduce) {
  #loader-van * {
    animation: none !important;
  }
}