.icon-animation {
  animation: icon 1.5s infinite alternate ease-in-out;
}
.fade-in {
  animation: fadeIn 0.8s ease-in forwards;
}

@keyframes bounceCurve {
  /* HOLD NA POČETKU */
  0%,
  37.5% {
    offset-distance: 0%;
  }

  /* GLATKO KRETANJE BEZ PAUZE */
  62.5% {
    offset-distance: 100%;
  }

  /* HOLD NA KRAJU */
  62.5%,
  100% {
    offset-distance: 100%;
  }
}

.dot-animation {
  position: relative;
  display: block;
  /*
    Path: curved bounce animation for dot (2.3rem - bigger)
    Dot ratio: 2.3/2.45 = 0.939
    Position adjusted to top left
  */
  offset-path: path("M 20 17 L 20 -60 Q 0 -116 -32 -116");
  offset-distance: 0%;
  animation: bounceCurve 7s ease-in-out infinite alternate;
  will-change: offset-distance;
  offset-anchor: center center;
}

/* Responsive offset paths - adjusted for top left position */
@media (max-width: 1366px) {
  /* Logo=7.5rem (0.682), Dot=1.75rem (tiny bit bigger), moved a bit to the right */
  .dot-animation {
    offset-path: path("M 13 11.59 L 13 -34 Q 0 -76 -24 -76.5");
  }
}

@media (max-width: 1024px) {
  /* Logo=7rem (0.636), Dot=1.7rem (bigger) */
  .dot-animation {
    offset-path: path("M 10.15 10.81 L 10.15 -31.8 Q 1.7 -73 -23 -73");
  }
}

@media (max-width: 500px) {
  /* Logo=5rem (0.455), Dot=1.14rem, moved a tiny bit to the left */
  .dot-animation {
    offset-path: path("M 6.2 7.74 L 6.2 -22.75 Q 1.03 -52 -20 -52");
  }
}


@keyframes icon {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30%);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}