/* Scrim, glass panel motion and .is-open for the menu.
   Per-panel: --overlay-shift, --overlay-origin, --overlay-edge,
   --overlay-highlight, --overlay-shadow. */

[data-menu-backdrop] {
  position: fixed;
  inset: 0;
  background: rgba(var(--off-white-rgb), 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.15);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out);
}

[data-menu-panel] {
  left: 50%;
  overflow: auto;
  border: 1px solid var(--overlay-edge);
  border-radius: clamp(1rem, 2vw, 1.5rem);
  box-shadow:
    inset 0 1px 0 var(--overlay-highlight),
    0 40px 80px -24px var(--overlay-shadow);
  backdrop-filter: blur(28px) saturate(1.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: -50% var(--overlay-shift);
  scale: 0.97;
  transform-origin: var(--overlay-origin);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    translate var(--duration-normal) var(--ease-out),
    scale var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out);
}

[data-menu-backdrop].is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

[data-menu-panel].is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: -50% 0;
  scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-menu-panel] {
    translate: -50% 0;
    scale: 1;
    transition: opacity var(--duration-fast) linear, visibility var(--duration-fast) linear;
  }
}