/* One timing system for the React app and public pages. No scroll listeners,
   staggered map rows, permanent compositing layers, or animated layout sizes. */
:root {
  --motion-quick: 160ms;
  --motion-panel: 240ms;
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
}

@view-transition { navigation: auto; }
@keyframes okrest-fade-in { from { opacity: 0; } }
@keyframes okrest-fade-out { to { opacity: 0; } }
@keyframes okrest-pop-in { from { opacity: 0; translate: 0 -6px; } }
@keyframes okrest-page-in { from { opacity: 0; translate: 0 8px; } }

@media (prefers-reduced-motion: no-preference) {
  html::view-transition-old(root) { animation: okrest-fade-out 140ms ease-out both; }
  html::view-transition-new(root) { animation: okrest-fade-in 180ms ease-out both; }

  .site-nav :is(.homepoisk__spisok, .homegorod__spisok, .gorod__spisok):not([hidden]) {
    animation: okrest-pop-in var(--motion-quick) var(--motion-ease);
  }
  :is(.panelview.mobile-root-panel, .sheet:not(.sheet--page)) {
    animation: okrest-page-in var(--motion-panel) var(--motion-ease);
    will-change: auto;
  }
  .drawer .drawer__panel, .csheet .csheet__panel, .peek .peek__panel {
    transition: transform var(--motion-panel) var(--motion-ease);
  }
  .drawer { transition: background var(--motion-panel) ease, visibility 0s linear var(--motion-panel); }
  .drawer.drawer--open { transition: background var(--motion-panel) ease; }
  .csheet, .peek { transition: visibility 0s linear var(--motion-panel); }
  .csheet.csheet--open, .peek.peek--open { transition-delay: 0s; }
  .csheet__scrim, .peek__scrim { transition: background var(--motion-panel) ease; }

  :is(.site-nav, .mobile-header) :is(button, a),
  .navitem, .cta, .btn, .mobile-feed-categories a {
    transition: background-color var(--motion-quick) ease, color var(--motion-quick) ease,
      border-color var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
  }
  .cta, .btn, .homeask__go {
    transition: scale var(--motion-quick) var(--motion-ease),
      background-color var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
  }
  :is(.cta, .btn, .homeask__go):active:not(:disabled) { scale: .98; }
}

/* Reduced motion must include existing entrances and the closing phase, not
   merely the new effects. Keep all surfaces visible and immediately usable. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html::view-transition-old(root), html::view-transition-new(root) { animation: none; }
  .site-nav *, .mobile-header *, .drawer, .drawer__panel,
  .csheet, .csheet__panel, .csheet__scrim, .peek, .peek__panel, .peek__scrim,
  .pick, .pick__panel, .panelview, .sheet, .sheet-veil, .cta, .btn {
    animation: none !important;
    transition: none !important;
  }
}