@media (prefers-reduced-motion: no-preference) {
  [data-panel-motion] { --panel-progress: 0; }
  [data-panel-motion][open] { --panel-progress: 1; }

  [data-panel-motion="details"] > summary + *,
  [data-panel-motion="inline"] > summary + *,
  dialog[data-panel-motion="dialog"] {
    opacity: clamp(0, var(--panel-progress), 1);
    translate: 0 calc((1 - var(--panel-progress)) * -.35rem);
  }
  .site-sounds[data-panel-motion="details"] > summary + *,
  dialog[data-panel-motion="dialog"] {
    translate: 0 calc((1 - var(--panel-progress)) * .35rem);
  }
  details[data-panel-motion]:not([open]) > summary + *,
  dialog[data-panel-motion]:not([open]),
  dialog[data-panel-motion]:not([open])::backdrop {
    pointer-events: none;
    interactivity: inert;
  }

  @supports selector(details::details-content) {
    [data-panel-motion]::details-content {
      transition: content-visibility 180ms allow-discrete;
    }

    @supports (interpolate-size: allow-keywords) {
      [data-panel-motion="inline"]::details-content {
        interpolate-size: allow-keywords;
        block-size: 0;
        overflow: clip;
        transition: block-size 180ms ease, content-visibility 180ms allow-discrete;
      }
      [data-panel-motion="inline"][open]::details-content { block-size: auto; }
      [data-panel-motion="inline"][open]:not([data-panel-moving])::details-content { overflow: visible; }
    }
  }

  @supports (transition-behavior: allow-discrete) and (overlay: auto) {
    dialog[data-panel-motion="dialog"] {
      transition: display 180ms allow-discrete, overlay 180ms allow-discrete;
    }
    dialog[data-panel-motion="dialog"]::backdrop {
      opacity: 0;
      transition: opacity 180ms ease, display 180ms allow-discrete, overlay 180ms allow-discrete;
    }
    dialog[data-panel-motion="dialog"][open]::backdrop { opacity: 1; }
    @starting-style {
      dialog[data-panel-motion="dialog"][open]::backdrop { opacity: 0; }
    }
  }
}