/* Pick Menu: one motion language for the panel, the menu and the public pages.
   Quick and soft, only transform and opacity, and nothing moves for people who ask for less motion.
   120 ms: a press. 220 ms: a card, a list, a tab. 320 ms: a sheet, a dialog, a page. */
:root {
  --m-fast: 120ms;
  --m-base: 220ms;
  --m-slow: 320ms;
  --m-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* A press: the button gives a little under the finger. Low specificity, so a button with its own press keeps it. */
  :where(button, .btn, a.btn, [role="button"], summary):where(:not(:disabled)):active {
    transform: scale(0.97);
    transition: transform var(--m-fast) var(--m-ease);
  }

  /* A sheet leaves the way it came, a little faster than it arrived. The script adds .is-closing and closes it 200 ms later. */
  dialog.sheet.is-closing[open] {
    animation: pm-sheet-out 200ms var(--m-ease) forwards;
  }
  dialog.sheet.is-closing[open]::backdrop {
    animation: pm-fade-out 200ms var(--m-ease) forwards;
  }
  @media (min-width: 1024px) {
    dialog.sheet.is-closing[open] {
      animation-name: pm-drawer-out;
    }
  }

  /* Waiting: grey blocks with a light that passes over them (transform only). */
  .skel {
    position: relative;
    overflow: hidden;
  }
  .skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: pm-shimmer 1.4s var(--m-ease) infinite;
  }
  :root[data-theme="dark"] .skel::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  }
}

.skel {
  display: block;
  border-radius: 14px;
  background: var(--chip, #e6e9f0);
}
.skel-stack {
  display: grid;
  gap: 12px;
}

@keyframes pm-sheet-out {
  to {
    transform: translateY(24px);
    opacity: 0;
  }
}
@keyframes pm-drawer-out {
  to {
    transform: translateX(24px);
    opacity: 0;
  }
}
@keyframes pm-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes pm-shimmer {
  to {
    transform: translateX(100%);
  }
}