/* One quiet motion language for restaurant and both fastfood formats. */
@view-transition { navigation: auto; }
:root {
  --staffi-motion-ease: cubic-bezier(.25, 1, .5, 1);
  --staffi-page-distance: 10px;
}
:root[data-staffi-direction="back"] { --staffi-page-distance: -10px; }
body.staffi-redesign .stage { view-transition-name: staffi-stage; }
body.staffi-redesign .topbar { view-transition-name: staffi-header; }
body.staffi-redesign .controls { view-transition-name: staffi-controls; }
/* The slide used to scale its text on every render, including initial load. */
body.staffi-redesign .slide { animation: none; }
::view-transition { pointer-events: none; }
::view-transition-group(*) { animation: none; }
::view-transition-old(root) { display: none; }
::view-transition-new(root),
::view-transition-old(staffi-header), ::view-transition-new(staffi-header),
::view-transition-old(staffi-controls), ::view-transition-new(staffi-controls) {
  animation: none; mix-blend-mode: normal;
}
::view-transition-old(staffi-header), ::view-transition-old(staffi-controls) { display: none; }
::view-transition-image-pair(staffi-stage) { isolation: isolate; }
::view-transition-old(staffi-stage), ::view-transition-new(staffi-stage) {
  width: 100%; height: 100%; object-fit: none; object-position: left top;
  mix-blend-mode: normal;
}
/* Fade through the white surface instead of superimposing two headings. */
::view-transition-old(staffi-stage) { animation: staffi-page-out 100ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(staffi-stage) { animation: staffi-page-in 200ms var(--staffi-motion-ease) 90ms both; }
:root[data-staffi-entry] body.staffi-redesign .stage { animation: staffi-page-in 260ms var(--staffi-motion-ease) both; }
@keyframes staffi-page-in {
  from { opacity: 0; transform: translateX(var(--staffi-page-distance)); }
  to { opacity: 1; transform: none; }
}
@keyframes staffi-page-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(calc(-1 * var(--staffi-page-distance))); }
}
/* Stable hit areas; only colour and the icon respond to a mouse hover. */
body.staffi-redesign[data-staffi-concept="05"] :is(.nav-button,.back-link,.phone-arrow) {
  transform: none; touch-action: manipulation;
  transition: background-color 180ms var(--staffi-motion-ease), color 180ms var(--staffi-motion-ease), border-color 180ms var(--staffi-motion-ease);
}
body.staffi-redesign[data-staffi-concept="05"] :is(.nav-button,.back-link,.phone-arrow):hover { transform: none; }
body.staffi-redesign .nav-button svg { transition: transform 180ms var(--staffi-motion-ease); }
@media (hover: hover) and (pointer: fine) {
  body.staffi-redesign .nav-button.primary:hover svg { transform: translateX(2px); }
  body.staffi-redesign .nav-button[aria-label="Назад"]:hover svg { transform: translateX(-2px); }
}
body.staffi-redesign :is(.nav-button,.back-link,.phone-arrow):is(:active,:focus-visible) { transition: none; }
body.staffi-redesign .nav-button:is(:active,:focus-visible) svg { transform: none; transition: none; }
body.staffi-redesign[data-staffi-concept="05"] .format-card {
  transform: none; touch-action: manipulation;
  transition: border-color 200ms var(--staffi-motion-ease), background-color 200ms var(--staffi-motion-ease);
}
body.staffi-redesign[data-staffi-concept="05"] .format-card:hover { transform: none; }
body.staffi-redesign .format-card:is(:active,:focus-visible) { transition: none; }
body.staffi-redesign .topics-grid .topic-card,
body.staffi-redesign .topic-card::after,
body.staffi-redesign .topic-card :is(.topic-copy,.topic-icon),
body.staffi-redesign .feature-grid[data-feature-sequence] > .feature-item {
  transition-timing-function: var(--staffi-motion-ease);
}
/* Screens crossfade without zooming their small text. */
body.staffi-redesign .app-slider img {
  transform: none; transition: opacity 220ms var(--staffi-motion-ease);
}
body.staffi-redesign .app-module.is-pulsing { animation: none; }
body.staffi-redesign :is(.kln-checklist-screen,.learning-screen,.phone-screen,.service-phone-screen) {
  transition-timing-function: var(--staffi-motion-ease);
}
body.staffi-redesign .kln-checklist-screen { transform: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  :root[data-staffi-entry] body.staffi-redesign .stage { animation: none !important; }
}