/* Overlays (sectie D) — scrim-token, modal-baseline en verschijn-animaties.
 * Motion volgt 11.12: verschijnen 200ms ease-out, panelen 300ms;
 * prefers-reduced-motion wordt door de tokens-laag afgevangen. */

:root {
  /* DSC-063 Scrim: lichte dimlaag, alléén onder modals (native ::backdrop).
     Zijpanelen hebben bewust géén scrim (spec 1.1) — content eronder blijft leesbaar. */
  --overlay-scrim: color-mix(in srgb, var(--color-black) 28%, transparent);
}

/* ---- DSC-059 Modal (op <dialog>) ------------------------------------- */
/* Géén display-utilities op de dialog zelf: die zouden dialog:not([open])
   zichtbaar maken. Layout zit op de binnenwrapper. */
/* Herstel de UA-centrering (margin: auto) die de Tailwind-preflight
   (margin: 0) wegneemt; wint ook van geërfde space-*-marges van wrappers.
   Alleen ≥ sm — op mobiel is de modal schermvullend en houdt de
   max-sm:m-0-utility in _modal.html.erb het laatste woord. */
@media (width >= 40rem) {
  dialog.ds-modal {
    margin: auto;
  }
}
dialog.ds-modal::backdrop {
  background: var(--overlay-scrim);
}
dialog.ds-modal[open] {
  animation: ds-overlay-in 0.2s var(--ease-out-soft);
}
dialog.ds-modal[open]::backdrop {
  animation: ds-fade-in 0.2s ease-out;
}

/* ---- DSC-062 Zijpaneel (slide-over) ----------------------------------- */
/* Slide-in/out 300ms via transform. Visibility flipt bij tonen direct —
   alleen dan landt panel.focus() meteen na openen (DSC-046) — en bij
   verbergen pas ná de slide, via een delay die enkel op de gesloten staat
   staat. Geen JS-reflow nodig. */
.ds-slide-over {
  transition: transform 0.3s var(--ease-out-soft);
}
.ds-slide-over[data-state="closed"] {
  visibility: hidden;
  transition:
    transform 0.3s var(--ease-out-soft),
    visibility 0s 0.3s;
}
.ds-slide-over--links[data-state="closed"] {
  transform: translateX(calc(-100% - 16px));
}
.ds-slide-over--rechts[data-state="closed"] {
  transform: translateX(calc(100% + 16px));
}

/* ---- DSC-061 Dropdown-/overflow-menu ---------------------------------- */
.ds-dropdown-menu:not([hidden]) {
  animation: ds-menu-in 0.15s var(--ease-out-soft);
}

/* ---- DSC-064 Toast ----------------------------------------------------- */
.ds-toast {
  animation: ds-toast-in 0.2s var(--ease-out-soft);
}
.ds-toast--leaving {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 0.15s ease,
    translate 0.15s ease;
}

@keyframes ds-overlay-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes ds-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
@keyframes ds-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes ds-fade-in {
  from {
    opacity: 0;
  }
}