/* The same quiet scroll gesture as the Kluczogry invitation. */
.foto-scroll {
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: calc(100% - 32px);
  height: auto;
  min-height: 44px;
  padding: 7px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #eadbc4;
  text-shadow: 0 2px 8px #000;
  font: 14px/1.4 Georgia, serif;
  text-decoration: none;
  text-align: center;
}
.foto-scroll:hover { background: transparent; color: #fff2da; }
.foto-scroll::after { content: none; }
.foto-scroll:focus-visible { outline: 1px solid #eadbc4; outline-offset: 4px; }
.foto-scroll .scroll-cue { display: flex; flex-direction: column; align-items: center; width: 30px; height: 52px; }
.foto-scroll .scroll-mouse { width: 28px; height: 34px; stroke-width: 1.3; }
.foto-scroll .scroll-mouse path { animation: gallery-scroll-wheel 2.8s ease-in-out infinite; }
.foto-scroll .scroll-arrows { width: 19px; height: 18px; stroke-width: 1.4; animation: gallery-scroll-arrows 2.8s ease-in-out infinite; }
.foto-scroll.is-past-entry svg, .foto-scroll.is-past-entry path { animation-play-state: paused; }
@keyframes gallery-scroll-wheel {
  0%, 15% { transform: translateY(0); opacity: .9; }
  55% { transform: translateY(5px); opacity: .15; }
  56% { transform: translateY(0); opacity: 0; }
  85%, 100% { transform: translateY(0); opacity: .9; }
}
@keyframes gallery-scroll-arrows {
  0%, 20%, 100% { transform: translateY(0); opacity: .45; }
  55% { transform: translateY(3px); opacity: .9; }
}
@media (max-width: 760px) { .foto-scroll { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .foto-scroll .scroll-mouse path, .foto-scroll .scroll-arrows { animation: none; }
}