/* ==========================================================
   MEDHELP — ЕДИНАЯ СИСТЕМА ПЕРЕХОДОВ

   ВПЕРЁД:
   текущая страница → немного влево + плавное исчезновение
   новая страница → приходит справа + плавное появление

   НАЗАД:
   текущая страница → немного вправо + плавное исчезновение
   предыдущая → приходит слева + плавное появление

   Длительность визуального перехода: 600 ms

   ВАЖНО:
   Размеры страниц, изображения, шрифты,
   координаты и расположение элементов НЕ изменяются.
========================================================== */

:root {
  --medhelp-transition-duration: 600ms;
  --medhelp-transition-distance: 20%;

  --medhelp-transition-easing:
    cubic-bezier(0.22, 0.75, 0.25, 1);
}


/* ==========================================================
   ОБЩАЯ ПОДГОТОВКА СТРАНИЦЫ
========================================================== */

body {
  will-change:
    transform,
    opacity;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* ==========================================================
   ВХОД ВПЕРЁД

   Новая страница начинает немного справа.

   ВАЖНО:
   opacity НЕ 0.

   Благодаря этому при загрузке новой страницы
   не появляется полностью пустой белый фон.
========================================================== */

html.medhelp-enter-forward body {
  opacity: 0.18;

  transform:
    translate3d(
      var(--medhelp-transition-distance),
      0,
      0
    );
}


/* ==========================================================
   ВХОД ВПЕРЁД
   Новая страница приезжает на своё место.
========================================================== */

html.medhelp-enter-forward.medhelp-enter-ready body {
  opacity: 1;

  transform:
    translate3d(
      0,
      0,
      0
    );

  transition:
    transform
      var(--medhelp-transition-duration)
      var(--medhelp-transition-easing),

    opacity
      var(--medhelp-transition-duration)
      var(--medhelp-transition-easing);
}


/* ==========================================================
   ВХОД НАЗАД

   Предыдущая страница начинает немного слева.
========================================================== */

html.medhelp-enter-back body {
  opacity: 0.18;

  transform:
    translate3d(
      calc(
        var(--medhelp-transition-distance) * -1
      ),
      0,
      0
    );
}


/* ==========================================================
   ВХОД НАЗАД
   Предыдущая страница приезжает на своё место.
========================================================== */

html.medhelp-enter-back.medhelp-enter-ready body {
  opacity: 1;

  transform:
    translate3d(
      0,
      0,
      0
    );

  transition:
    transform
      var(--medhelp-transition-duration)
      var(--medhelp-transition-easing),

    opacity
      var(--medhelp-transition-duration)
      var(--medhelp-transition-easing);
}


/* ==========================================================
   ВЫХОД ВПЕРЁД

   Текущая страница немного уезжает влево.

   Она НЕ успевает полностью исчезнуть:
   переход на следующий HTML произойдёт раньше.
========================================================== */

body.medhelp-leave-forward {
  opacity: 0.12;

  transform:
    translate3d(
      calc(
        var(--medhelp-transition-distance) * -1
      ),
      0,
      0
    );

  transition:
    transform
      var(--medhelp-transition-duration)
      var(--medhelp-transition-easing),

    opacity
      var(--medhelp-transition-duration)
      var(--medhelp-transition-easing);
}


/* ==========================================================
   ВЫХОД НАЗАД

   Текущая страница немного уезжает вправо.
========================================================== */

body.medhelp-leave-back {
  opacity: 0.12;

  transform:
    translate3d(
      var(--medhelp-transition-distance),
      0,
      0
    );

  transition:
    transform
      var(--medhelp-transition-duration)
      var(--medhelp-transition-easing),

    opacity
      var(--medhelp-transition-duration)
      var(--medhelp-transition-easing);
}


/* ==========================================================
   ЗАЩИТА ОТ ПОВТОРНЫХ НАЖАТИЙ
========================================================== */

body.medhelp-transition-running {
  pointer-events: none;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  html.medhelp-enter-forward body,
  html.medhelp-enter-back body,
  html.medhelp-enter-forward.medhelp-enter-ready body,
  html.medhelp-enter-back.medhelp-enter-ready body,
  body.medhelp-leave-forward,
  body.medhelp-leave-back {

    transition-duration: 1ms;
  }
}