/* Zvislá čiara s gulôčkou, ktorá po nej opakovane kĿze nadol.
   Výšku, rýchlosť a obe farby nastavujú premenné z controls. */

.scroll-indikator {
  position: relative;
  width: 1px;
  height: var(--si-vyska, 110px);
  margin: 0 auto;
  opacity: .5;
  background-image: linear-gradient(
    180deg,
    transparent,
    color-mix(in oklab, var(--si-ciara, var(--c-delft)) 70%, transparent) 42%,
    var(--si-ciara, var(--c-delft)) 100%
  );
}

.scroll-indikator__gulicka {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  margin-top: -3.5px;
  border-radius: 50%;
  background-color: var(--si-farba, var(--c-delft));
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--si-farba, var(--c-delft)) 20%, transparent),
    0 0 16px 4px color-mix(in oklab, var(--si-farba, var(--c-delft)) 45%, transparent);
  animation: si-pad var(--si-cas, 2.6s) cubic-bezier(.55, .06, .35, .98) infinite;
  will-change: transform, opacity;
}

@keyframes si-pad {
  0%   { transform: translateY(0); opacity: 0; }
  14%  { opacity: 1; }
  74%  { opacity: 1; }
  100% { transform: translateY(var(--si-vyska, 110px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indikator__gulicka {
    animation: none;
    opacity: .9;
  }
}