/*
 * Плавність і мікровзаємодії головної сторінки.
 * Підключено лише в index.html. Появу блоків при скролі, прогрес прокрутки
 * та підсвітку карток hero керує js/motion.js.
 */

body {
  --m-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* hero прихований до старту анімації в js/motion.js; якщо скрипт не завантажився, з'являється сам */
.m-pending .intro-box h1,
.m-pending .intro-box .how-it-works-preview,
.m-pending .intro-box .t-bigger,
.m-pending .intro-box .action-block {
  opacity: 0;
  animation: m-failsafe .6s ease 3s forwards;
}

@keyframes m-failsafe {
  to {
    opacity: 1;
  }
}

/* прогрес прокрутки у кольорах модулів */
.m-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--yellow), var(--light-green) 35%, var(--light-blue) 65%, var(--darkorange));
}

/* кнопки: жовта пляма на hover наростає, а не з'являється стрибком */
.btn:not(.disabled) {
  transition: color .25s ease;
}

.btn:not(.disabled):before {
  content: '';
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  padding-top: 90%;
  border-radius: 50%;
  background: var(--yellow);
  z-index: -5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(.2);
  transition: transform .5s var(--m-ease-out), opacity .25s ease;
}

.btn:not(.disabled):hover:before,
a:not(.disabled):hover .btn:not(.disabled):before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

a.btn:not(.disabled):active:before,
a.btn.btn-black:not(.disabled):active:before,
button.btn:not(.disabled):active:before,
a:not(.disabled):active .btn:not(.disabled):before {
  left: 5%;
  right: 5%;
  padding-top: 90%;
  transform: translateY(-50%) scale(1.07);
  transition-duration: .15s;
}

.bg-yellow .btn:not(.disabled):before {
  background: var(--light-green);
}

.animation-arrow {
  transition: transform .35s var(--m-ease-out);
}

button:hover .animation-arrow,
a:hover .animation-arrow {
  transform: translateX(.3em);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid black;
  outline-offset: 3px;
}

/* картки hero: м'яке світло слідує за курсором */
.intro-box .preview-item .m-spot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(220px circle at var(--m-x, 50%) var(--m-y, 50%), rgba(255, 255, 255, .55), transparent 70%);
}

.intro-box .preview-item:hover .m-spot {
  opacity: 1;
}

.intro-box .preview-item .preview-item-text .hover-text {
  transition: opacity .3s var(--m-ease-out), transform .3s var(--m-ease-out);
}

/* таби інструментів: підкреслення виростає, а не перемикається */
.slider-nav-item {
  position: relative;
  border-bottom: 2px solid transparent;
  transition: opacity .25s ease;
}

.slider-nav-item.slick-current {
  border-bottom-color: transparent;
}

.slider-nav-item:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: black;
  transform: scaleX(0);
  transition: transform .45s var(--m-ease-out);
}

.slider-nav-item.slick-current:after {
  transform: scaleX(1);
}

/* картки партнерів */
.partner-list .block-item {
  transition: transform .35s var(--m-ease-out), box-shadow .35s var(--m-ease-out), color .25s ease;
}

.partner-list .block-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .2);
}

@media (prefers-reduced-motion: reduce) {
  .btn:not(.disabled):before,
  .animation-arrow,
  .intro-box .preview-item .m-spot,
  .slider-nav-item:after,
  .partner-list .block-item {
    transition: none;
  }

  .partner-list .block-item:hover {
    transform: none;
  }
}