.compass-arrow {
  width: 100%;
  aspect-ratio: 2 / 1;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transition: transform 1s ease;
  animation: sway 3s ease-in-out infinite;
  transform-origin: bottom center;
  transform: rotate(var(--deg)); /* Добавлено */
}

@keyframes sway {
    0%   { transform: translateX(-50%) rotate(calc(var(--deg, 0deg) - 2deg)); }
    50%  { transform: translateX(-50%) rotate(calc(var(--deg, 0deg) + 2deg)); }
    100% { transform: translateX(-50%) rotate(calc(var(--deg, 0deg) - 2deg)); }
  }

 
  .compass-arrow::before {
    content: "▾";
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 3vh;
    color: #1f203b;
  }