/* Общий слой анимаций сайта (includes/motion_layer.html).
   Переходы между страницами, шторки (.sheet-overlay) и отклик на нажатие —
   в той же манере, что и главная (static/css/home/motion.css). */

:root {
  --motion-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-open: 0.5s;
  --motion-close: 0.32s;
}

/* ---------------------------------------------------------------------------
   1. Переходы между страницами. Вероятная следующая страница заранее отрисована
   во встроенном окне (site_motion.js); по касанию ссылки она выезжает целиком,
   потом браузер подменяет её настоящей. (Встроенные View Transitions браузера дают
   паузу ~0,3 с перед анимацией из-за Paint Holding в Chrome — поэтому не они.) */
.motion-page-frame {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
  background: #fff5e8;
  will-change: transform;
}
.motion-page-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.motion-page-frame.is-active {
  visibility: visible;
  pointer-events: auto; /* пока идёт переход, нажатия не проходят к старой странице */
}
.motion-page-frame.is-forward {
  box-shadow: -14px 0 34px rgba(35, 31, 32, 0.18);
}
.motion-page-frame.is-back {
  box-shadow: 14px 0 34px rgba(35, 31, 32, 0.18);
}

/* Содержимое новой страницы проявляется (класс ставит site_motion.js до отрисовки,
   только при переходе внутри сайта). */
html.motion-enter-forward body {
  animation: motion-enter-forward 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
html.motion-enter-back body {
  animation: motion-enter-back 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes motion-enter-forward {
  from { opacity: 0.35; transform: translate3d(18px, 0, 0); }
}
@keyframes motion-enter-back {
  from { opacity: 0.35; }
}

/* ---------------------------------------------------------------------------
   2. Шторки на страницах (профиль: заказ; оформление: время, адрес и др.; главная:
   адрес, статус заказа). Выезд 0,5 с с замедлением, уход 0,32 с с разгоном;
   затемнение нарастает и гаснет в такт шторке. */
html .sheet-overlay {
  transition: visibility 0s linear var(--motion-close);
}
html .sheet-overlay.open {
  transition-delay: 0s;
}
html .sheet-overlay::before {
  transition: opacity var(--motion-close) ease;
}
html .sheet-overlay.open::before {
  transition: opacity var(--motion-open) var(--motion-ease-out);
}
html .sheet-overlay > * {
  transition: transform var(--motion-close) var(--motion-ease-in);
}
html .sheet-overlay.open > * {
  transition: transform var(--motion-open) var(--motion-ease-out);
}

/* ---------------------------------------------------------------------------
   3. Отклик на нажатие (телефоны): кнопка чуть «проседает» под пальцем.
   Системная голубая подсветка ссылок Android рисуется поверх листа перехода —
   вместо неё ссылка на мгновение приглушается. */
a[href] {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none), (pointer: coarse) {
  a[href]:active {
    opacity: 0.72;
    transition: opacity 60ms ease-out;
  }
  .pr-btn:active,
  .pr-staff-link:active,
  .pr-order:active,
  .co-payment-btn:active,
  .co-utensils-btn:active,
  .co-time-btn:active,
  .co-address__add-btn:active,
  .login-btn:active,
  .login-check-btn:active,
  .login-call-btn:active,
  .login-alt-btn:active,
  .login-back-btn:active {
    transform: scale(0.97);
    transition: transform 80ms ease-out;
  }
}

/* ---------------------------------------------------------------------------
   4. Тем, кто включил в системе «уменьшить движение», — без анимаций. */
@media (prefers-reduced-motion: reduce) {
  .motion-page-frame {
    display: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}