:host {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Anchor the mobile sheet to the bottom of the viewport. The sheet's own chrome
   (rounded top, slide-up, swipe-to-dismiss, safe-area inset, keyboard-grow) is provided
   by mn-bottom-sheet; the shell only supplies the bottom alignment and the backdrop. */
:host(.mobile-sheet) {
  align-items: flex-end;
}

:host(.is-stacked) {
  transform: scale(0.96) translateY(-1rem);
  filter: brightness(0.9) blur(1px);
  pointer-events: none;
  opacity: 0.8;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(1rem); }
}

@keyframes zoomOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

/* Open animations for the desktop centered dialog — keyed by the same .anim-* host
   classes as the close animations below. The mobile sheet ignores these; its entrance
   and exit are owned by mn-bottom-sheet. */
:host(.anim-slide) .modal-container {
  animation: slideIn 0.2s ease-in-out;
}

:host(.anim-fade) .modal-container {
  animation: fadeIn 0.2s ease-in-out;
}

:host(.anim-zoom) .modal-container {
  animation: zoomIn 0.2s ease-in-out;
}

:host(.closing) .modal-backdrop {
  animation: fadeOut 0.15s ease-in-out forwards;
}

:host(.closing).anim-slide .modal-container {
  animation: slideOut 0.15s ease-in-out forwards;
}

:host(.closing).anim-fade .modal-container {
  animation: fadeOut 0.15s ease-in-out forwards;
}

:host(.closing).anim-zoom .modal-container {
  animation: zoomOut 0.15s ease-in-out forwards;
}

/* =========================
   Reduced motion: collapse every open/close animation to ~instant. Kept at 0.01ms
   (not `none`) so animationend still fires for the event-driven close teardown in the
   shell component. The shell also short-circuits its close wait under reduced motion.
   ========================= */
@media (prefers-reduced-motion: reduce) {
  :host,
  :host .modal-backdrop,
  :host .modal-container {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}