/* Every menu, popover, tooltip, dialog and sheet moves the one way
 * motion.css describes. Their looks stay in their own sheets; this sheet
 * loads after them, so it is the only place their motion is set.
 * - Menus, popovers and tooltips grow from scale(.98) + fade at their
 *   trigger (--sv-origin: menu.js sets the rail menus' from where they
 *   opened; the rest open on a known side) and shrink back out while
 *   motion.js leave() holds them (.sv-leaving).
 * - Modal dialogs lift 8px over a fading backdrop; side sheets slide 24px
 *   in from their edge; a phone's bottom sheet rises from the bottom. They
 *   are transitions from @starting-style, so any close() (a button, the
 *   backdrop, Escape) plays the exit where the engine keeps a closing
 *   dialog on top (overlay); elsewhere it closes at once. */

/* ---- menus, popovers, tooltips ---- */
:is(.rail-menu, .profile-menu, .billing-card, .people-card, .mention-picker, .effort-pop, .track-panel, .meta-pop) {
  transform-origin: var(--sv-origin, top center);
  animation: sv-pop-in var(--sv-dur-enter) var(--sv-ease-out) both;
}
:is(.rail-menu, .profile-menu, .billing-card, .people-card, .mention-picker, .effort-pop, .track-panel, .meta-pop).sv-leaving {
  animation: sv-pop-out var(--sv-dur-exit) var(--sv-ease-exit) both;
}
/* Where each opens from its trigger. */
:is(.billing-card, .people-card, .meta-pop) { --sv-origin: top right; }
:is(.profile-menu, .track-panel) { --sv-origin: bottom center; }
:is(.effort-pop, .mention-picker) { --sv-origin: bottom left; }
@media (max-width: 760px) {
  .people-card { --sv-origin: top center; }
}
/* On a phone the Subscriptions card is a full-screen sheet: it rises. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 540px) {
  .billing-card { animation-name: sv-sheet-rise; }
  .billing-card.sv-leaving { animation-name: sv-sheet-sink; }
}
@keyframes sv-sheet-rise { from { opacity: 0; translate: 0 16px; } }
@keyframes sv-sheet-sink { to { opacity: 0; translate: 0 16px; } }

/* ---- dialogs and sheets ---- */
dialog:is(.share-dialog, .art-dialog, .md-pv-full, .look-dialog, .a2a-sheet, .aw-drawer) {
  --sv-from: 0 8px;
  opacity: 0;
  translate: var(--sv-from);
  scale: 0.98;
  animation: none;
  transition: opacity var(--sv-dur-exit) var(--sv-ease-exit), translate var(--sv-dur-exit) var(--sv-ease-exit), scale var(--sv-dur-exit) var(--sv-ease-exit), display var(--sv-dur-exit) allow-discrete, overlay var(--sv-dur-exit) allow-discrete;
}
/* The full-size preview fills the window: it fades, it never grows or moves. */
dialog.md-pv-full { --sv-from: 0 0; scale: none; }
/* Sheets slide from their edge and keep their size. */
dialog:is(.look-dialog, .a2a-sheet, .aw-drawer) { --sv-from: 24px 0; scale: none; }
dialog:is(.share-dialog, .art-dialog, .md-pv-full, .look-dialog, .a2a-sheet, .aw-drawer)[open] {
  opacity: 1;
  translate: none;
  scale: none;
  transition-duration: var(--sv-dur-enter);
  transition-timing-function: var(--sv-ease-out);
}
@starting-style {
  dialog:is(.share-dialog, .art-dialog, .md-pv-full, .look-dialog, .a2a-sheet, .aw-drawer)[open] { opacity: 0; translate: var(--sv-from); }
  dialog:is(.share-dialog, .art-dialog)[open] { scale: 0.98; }
}
dialog:is(.share-dialog, .art-dialog, .md-pv-full, .look-dialog, .a2a-sheet, .aw-drawer)::backdrop {
  opacity: 0;
  transition: opacity var(--sv-dur-exit) var(--sv-ease-exit), display var(--sv-dur-exit) allow-discrete, overlay var(--sv-dur-exit) allow-discrete;
}
dialog:is(.share-dialog, .art-dialog, .md-pv-full, .look-dialog, .a2a-sheet, .aw-drawer)[open]::backdrop {
  opacity: 1;
  transition-duration: var(--sv-dur-enter);
  transition-timing-function: var(--sv-ease-out);
}
@starting-style {
  dialog:is(.share-dialog, .art-dialog, .md-pv-full, .look-dialog, .a2a-sheet, .aw-drawer)[open]::backdrop { opacity: 0; }
}

/* A phone: full-screen dialogs rise 24px; the Customize sheet rises from the bottom edge. */
@media (max-width: 640px) {
  dialog:is(.share-dialog, .art-dialog, .aw-drawer) { --sv-from: 0 24px; scale: none; }
  @starting-style { dialog:is(.share-dialog, .art-dialog)[open] { scale: none; } }
}
@media (max-width: 760px) {
  dialog.look-dialog { --sv-from: 0 100%; transition-duration: var(--sv-dur-layout); }
  dialog.look-dialog[open] { transition-duration: var(--sv-dur-base); }
}