/* Overlay motion: spatial entrances, short exits, immediate row feedback. */
@keyframes mb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mb-fade-out { to { opacity: 0; } }
@keyframes mb-modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mb-modal-out { to { opacity: 0; transform: scale(.98); } }
@keyframes mb-pop-in { from { opacity: 0; transform: translateY(var(--pop-offset, -5px)) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mb-pop-out { to { opacity: 0; transform: scale(.98); } }
@keyframes mb-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mb-sheet-out { to { opacity: 0; transform: translateY(20px); } }

.app-page :is(.modal-bg, .lightbox, .qs-bg, .event-modal-root, .warning-modal-root, .standalone-modal-root):not(.anim-out) {
  animation: mb-fade-in var(--dur-modal-in) var(--ease-out);
}
.app-page :is(.modal-bg, .qs-bg, .event-modal-root, .warning-modal-root, .standalone-modal-root):not(.anim-out) :is(.modal, .qs-panel, .ev-modal-card),
.app-page :is(.warning-modal-root, .standalone-modal-root):not(.anim-out) > div:first-child,
.app-page .lightbox:not(.anim-out) .lightbox-img {
  animation: mb-modal-in var(--dur-modal-in) var(--ease-out);
}
.app-page :is(.modal-bg, .lightbox, .qs-bg, .event-modal-root, .warning-modal-root, .standalone-modal-root).anim-out {
  animation: mb-fade-out var(--overlay-exit, var(--dur-modal-out)) var(--ease-exit) forwards;
}
.app-page :is(.modal-bg, .qs-bg, .event-modal-root, .warning-modal-root, .standalone-modal-root).anim-out :is(.modal, .qs-panel, .ev-modal-card),
.app-page :is(.warning-modal-root, .standalone-modal-root).anim-out > div:first-child,
.app-page .lightbox.anim-out .lightbox-img {
  animation: mb-modal-out var(--overlay-exit, var(--dur-modal-out)) var(--ease-exit) forwards;
}
.app-page :is(.floating-menu, .ac-pop, .search-drop, .format-toolbar, .sp-emoji-panel) {
  transform-origin: top right;
}
.app-page :is(.ac-pop, .format-toolbar, .sp-emoji-panel) { transform-origin: bottom left; --pop-offset: 5px; }
.app-page :is(.floating-menu, .ac-pop, .search-drop, .format-toolbar, .sp-emoji-panel):not(.anim-out):not([hidden]) {
  animation: mb-pop-in var(--dur-pop-in) var(--ease-out);
}
.app-page :is(.floating-menu, .ac-pop, .search-drop, .format-toolbar, .sp-emoji-panel).anim-out {
  animation: mb-pop-out var(--overlay-exit, var(--dur-pop-out)) var(--ease-exit) forwards;
  pointer-events: none;
}
.app-page :is(.ac-item, .qs-item, .search-drop-row, .search-drop-all) {
  transition: background-color var(--dur-hover) var(--ease-standard), color var(--dur-hover) var(--ease-standard);
}
.app-page .pp-badge-chip::after { transform: none; transition: opacity 80ms var(--ease-standard); }
.app-page .pp-badge-chip:hover::after { transition-duration: 100ms; transition-delay: 400ms; }
.app-page .pp-badge-chip:focus-visible::after { transition-duration: 100ms; transition-delay: 0ms; }
.app-page .pp-badges.tips-warm .pp-badge-chip::after { transition-delay: 0ms; }

@media (max-width: 800px) {
  .app-page .floating-menu:not(.anim-out):not([hidden]) { animation: mb-sheet-in var(--dur-sheet-in) var(--ease-out); }
  .app-page .floating-menu.anim-out { animation: mb-sheet-out var(--overlay-exit, var(--dur-sheet-out)) var(--ease-exit) forwards; }
}

/* Native customizable selects keep their keyboard and top-layer behavior. */
@supports (appearance: base-select) {
  @media (min-width: 801px) {
    .app-page #settingsModalRoot .settings-panel select::picker(select) {
      opacity: 0; transform: translateY(-5px) scale(.98); transform-origin: top left;
      transition: opacity var(--dur-pop-out) var(--ease-exit), transform var(--dur-pop-out) var(--ease-exit), display var(--dur-pop-out) allow-discrete, overlay var(--dur-pop-out) allow-discrete;
    }
    .app-page #settingsModalRoot .settings-panel select:open::picker(select) {
      opacity: 1; transform: none; transition-duration: var(--dur-pop-in);
    }
    @starting-style {
      .app-page #settingsModalRoot .settings-panel select:open::picker(select) { opacity: 0; transform: translateY(-5px) scale(.96); }
    }
  }
}

/* Existing global reduced-motion rules use !important. Preserve that contract. */
body.app-page.reduce-motion :is(.modal, .modal-bg, .lightbox, .lightbox-img, .qs-bg, .qs-panel, .event-modal-root, .ev-modal-card, .warning-modal-root, .standalone-modal-root, .floating-menu, .ac-pop, .search-drop, .format-toolbar, .sp-emoji-panel, .mob-sheet-scrim),
body.app-page.reduce-motion :is(.warning-modal-root, .standalone-modal-root) > div:first-child {
  animation: none !important;
}
body.app-page.reduce-motion #settingsModalRoot .settings-panel select::picker(select),
body.app-page.reduce-motion #settingsModalRoot .settings-panel select:open::picker(select) { transform: none; transition-duration: 0ms; }
@media (prefers-reduced-motion: reduce) {
  .app-page :is(.modal, .modal-bg, .lightbox, .lightbox-img, .qs-bg, .qs-panel, .event-modal-root, .ev-modal-card, .warning-modal-root, .standalone-modal-root, .floating-menu, .ac-pop, .search-drop, .format-toolbar, .sp-emoji-panel, .mob-sheet-scrim),
  .app-page :is(.warning-modal-root, .standalone-modal-root) > div:first-child { animation: none !important; }
  .app-page #settingsModalRoot .settings-panel select::picker(select),
  .app-page #settingsModalRoot .settings-panel select:open::picker(select) { transform: none; transition-duration: 0ms; }
}

.app-page .mob-sheet-scrim:not(.anim-out) { animation: mb-fade-in var(--dur-sheet-in) var(--ease-out); }
.app-page .mob-sheet-scrim.anim-out { animation: mb-fade-out var(--overlay-exit, var(--dur-sheet-out)) var(--ease-exit) forwards; }