/* Tilda t1196: подсказка горизонтальной прокрутки (как kumari-phases.tilda.ws) */

.kp-t1196__scroll-icon-wrapper {
  display: none;
  font-size: 0;
  text-align: right;
  color: #a1a1a1;
  mix-blend-mode: lighten;
  box-sizing: border-box;
}

.kp-t1196__scroll-icon-wrapper--show {
  display: block;
}

.tooltip-horizontal-scroll-icon_hand {
  animation: tooltip-horizontal-scroll-icon_anim-scroll-hand 2s infinite;
}

.tooltip-horizontal-scroll-icon_card {
  animation: tooltip-horizontal-scroll-icon_anim-scroll-card 2s infinite;
}

@keyframes tooltip-horizontal-scroll-icon_anim-scroll-hand {
  0% {
    transform: translateX(80px) scale(1);
    opacity: 0;
  }
  10% {
    transform: translateX(80px) scale(1);
    opacity: 1;
  }
  20%,
  60% {
    transform: translateX(175px) scale(0.6);
    opacity: 1;
  }
  80% {
    transform: translateX(5px) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translateX(5px) scale(0.6);
    opacity: 0;
  }
}

@keyframes tooltip-horizontal-scroll-icon_anim-scroll-card {
  0%,
  60% {
    transform: translateX(0);
  }
  80%,
  100% {
    transform: translateX(-240px);
  }
}

@media screen and (max-width: 960px) {
  .kp-t1196__scroll-icon-wrapper--show {
    display: block;
  }
}

@media screen and (min-width: 961px) {
  .kp-t1196__scroll-icon-wrapper--show {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-horizontal-scroll-icon_hand,
  .tooltip-horizontal-scroll-icon_card {
    animation: none;
  }
}