/**
 * Микро-анимации и «живость» интерфейса.
 *
 * Дополняет моушен-движок из static/js/motion.js: там — появление секций и
 * параллакс, здесь — то, что достаточно отдать браузеру (наведение, Кен Бёрнс,
 * плавность точек навигации).
 *
 * ВАЖНО: движок каждый кадр пишет inline translate / scale / opacity / filter
 * на селекторы из LAYERS. Вешать на них transition этих же свойств нельзя —
 * переход будет тянуться за каждым кадром и смажет движение. Поэтому у кнопок
 * ниже transition перечислен поимённо: он перебивает transition: all 0.6s
 * из main.css, под который иначе попали бы opacity и translate.
 *
 * @package dabox
 */

/* --------------------------------------------------------------------------
 * Главная: медленный наезд на фон активного слайда
 * ----------------------------------------------------------------------- */

/*
 * Базовый масштаб — запас под вертикальный параллакс: движок сдвигает картинку
 * до 40px, и без запаса из-под неё показался бы край секции.
 */
.main .main__img {
  transform: scale(1.12);
  transform-origin: 50% 50%;
}

.main .swiper-slide-active .main__img {
  animation: gm-kenburns 16s ease-out both;
}

@keyframes gm-kenburns {
  from {
    transform: scale(1.12);
  }

  to {
    transform: scale(1.22);
  }
}

/* --------------------------------------------------------------------------
 * Кнопки
 * ----------------------------------------------------------------------- */

.standart-btn,
.header__btn,
.contacts__btn,
.cont__thanks-btn,
.contact__not-found-btn,
.error-link {
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.standart-btn,
.header__btn,
.contact__not-found-btn,
.error-link {
  position: relative;
  overflow: hidden;
}

/* Блик, пробегающий по кнопке при наведении. */
.standart-btn::after,
.header__btn::after,
.contact__not-found-btn::after,
.error-link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  translate: 0 0;
  transition: translate 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.standart-btn:hover::after,
.header__btn:hover::after,
.contact__not-found-btn:hover::after,
.error-link:hover::after {
  translate: 300% 0;
}

.standart-btn:hover,
.header__btn:hover,
.contact__not-found-btn:hover,
.error-link:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 1.5rem -0.375rem rgba(255, 92, 0, 0.45);
}

.contacts__btn:hover,
.cont__thanks-btn:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(0, 0, 0, 0.22);
}

.standart-btn:active,
.header__btn:active,
.contacts__btn:active,
.cont__thanks-btn:active,
.contact__not-found-btn:active,
.error-link:active {
  transform: translateY(0);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
 * Контакты: карточки категорий и списки
 * ----------------------------------------------------------------------- */

/*
 * Сама карточка занята движком (translate / scale / opacity), поэтому наведение
 * работает через тень на карточке и масштаб внутренней картинки.
 */
.contact__block {
  transition: box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.contact__block:hover {
  box-shadow: 0 1.5rem 3rem -0.75rem rgba(0, 0, 0, 0.32);
}

.contact__img {
  transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.contact__block:hover .contact__img {
  scale: 1.08;
}

/*
 * scale делает картинку контекстом наложения, и она — как более поздний в
 * разметке элемент — начинает перекрывать цену. Поднимаем цену явно.
 */
.contact__price {
  z-index: 2;
  transition: background-color 0.35s ease;
}

.contact__block:hover .contact__price {
  background: rgba(0, 0, 0, 0.45);
}

.contact__var,
.contact__blockk {
  transition:
    background-color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.contact__var:hover,
.contact__blockk:not(.active):hover {
  transform: translateX(0.1875rem);
  background-color: #efefef;
}

.contact__input-wr {
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.contact__input-wr:focus-within {
  background-color: #f0f0f0;
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 92, 0, 0.45);
}

/* --------------------------------------------------------------------------
 * Как работает
 * ----------------------------------------------------------------------- */

.simply__tab:not(.active):hover {
  color: rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
 * Цель: карусель замирает под курсором
 * ----------------------------------------------------------------------- */

.goal__blocks:hover .goal__blocks-track {
  animation-play-state: paused;
}

.goal__block {
  transition: scale 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.goal__block:hover {
  scale: 1.04;
}

/* --------------------------------------------------------------------------
 * Вопросы
 * ----------------------------------------------------------------------- */

.why__block {
  transition:
    box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.4s ease;
}

.why__block:hover {
  box-shadow: 0 0.75rem 1.75rem -0.625rem rgba(0, 0, 0, 0.16);
}

.why__block.active {
  box-shadow: 0 1rem 2.25rem -0.75rem rgba(0, 0, 0, 0.18);
}

.why__block-top svg {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
 * Меню и ссылки подвала: подчёркивание, выезжающее слева
 * ----------------------------------------------------------------------- */

.header__menu li a,
.footer__nav-link,
.footer__social {
  position: relative;
  transition: color 0.25s ease;
}

.header__menu li a::after,
.footer__nav-link::after,
.footer__social::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.125rem;
  height: 0.0625rem;
  background: currentColor;
  opacity: 0.6;
  scale: 0 1;
  transform-origin: left center;
  transition: scale 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header__menu li a:hover::after,
.footer__nav-link:hover::after,
.footer__social:hover::after {
  scale: 1 1;
}

/* --------------------------------------------------------------------------
 * Точки навигации fullPage
 * ----------------------------------------------------------------------- */

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  transition:
    height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.3s ease;
}

/* --------------------------------------------------------------------------
 * Уважаем системную настройку «меньше движения»
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .main .swiper-slide-active .main__img {
    animation: none;
  }

  .standart-btn::after,
  .header__btn::after,
  .contact__not-found-btn::after,
  .error-link::after,
  .header__menu li a::after,
  .footer__nav-link::after,
  .footer__social::after {
    display: none;
  }

  .contact__block,
  .contact__img,
  .goal__block,
  .why__block,
  .standart-btn,
  .header__btn,
  .contacts__btn,
  .cont__thanks-btn,
  .contact__not-found-btn,
  .error-link {
    transition: none;
  }
}