.planeRoute {
  position: fixed;
  top: 20px;
  height: 512px;
  /* left: calc(50% - calc(var(--max-width) * .8)); */
  right: calc(50% + calc(var(--max-width) * .5 + 10px));
  aspect-ratio: 195 / 512;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='195' height='512' viewBox='0 0 195 512'%3E%3Cpath d='m 46.251893,0 c 0,0 76.323047,7.0136997 112.476057,48.09395 36.15302,41.08023 55.23379,105.20546 9.03825,153.2994 -46.19552,48.09392 -156.663087,65.1272 -166.7055876,26.05087 -10.04251,-39.0763 53.2252806,-78.15263 105.4463176,-25.04892 52.22102,53.10373 24.10201,73.14287 21.08925,80.15656 C 87.426163,391.76517 246.09772,378.73973 172.78746,512' stroke-dasharray='5' stroke-width='.5' stroke='%23000' fill='none' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100%;
  pointer-events: none;
  /* z-index: -1; */
}
.planeRoute::before {
  position: absolute;
  content: '';
  height: 40px;
  width: 40px;
  offset-path: path("m 46.251893,0 c 0,0 76.323047,7.0136997 112.476057,48.09395 36.15302,41.08023 55.23379,105.20546 9.03825,153.2994 -46.19552,48.09392 -156.663087,65.1272 -166.7055876,26.05087 -10.04251,-39.0763 53.2252806,-78.15263 105.4463176,-25.04892 52.22102,53.10373 24.10201,73.14287 21.08925,80.15656 C 87.426163,391.76517 246.09772,378.73973 172.78746,512");
  /* background-image: url('../img/plane.svg'); */
  background: url('/assets/img/plane-3.svg') no-repeat center / contain;
  transform: scale(-1.2);
}

.planeRoute--anim {
  --offsetDistance: 0;

  animation: moveOffset 5s infinite alternate ease-in-out;
}
@keyframes moveOffset {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

.planeRoute--scrollable {
  --offsetDistance: 0%;
}
.planeRoute--scrollable::before {
  offset-distance: var(--offsetDistance, 0%);
}
.planeRoute--scrollableAsc:before {
  transform: scale(1.2);
}


.planeRoute_bg {
    position: fixed;
    display: block;
    top: 0px;
    pointer-events: none;
    width: 42%;
    padding-left: 55%;
    padding-right: 5%;
    aspect-ratio: 195 / 512;
    height: 100%;
    opacity: 0.4;
    z-index: 10;
    fill: none;
    stroke: #000;
    stroke-width: 0.5px;
    stroke-dasharray: 4px;

    --z: -300;
    transform: translate3d(var(--x, 0),var(--y, 0),calc(var(--z, 0) * 1px)) scale(calc(1 + var(--z, 0) * -1 / 100));
}