/* Afbeelding-lightbox (DSC-080) — donkerder scrim dan de modal (de foto moet
 * vrijstaan) en een zoom-in fade bij openen. De duur- en easing-tokens vallen
 * onder prefers-reduced-motion terug via de tokens-laag, dus de fade vervalt
 * daar vanzelf. Keyframe ds-fade-in komt uit components/overlay.css. */

/* Directe rgba i.p.v. color-mix(var(--color-black)…): custom properties zijn in
 * ::backdrop niet betrouwbaar beschikbaar (erven niet in oudere engines), waardoor
 * de scrim transparant bleef. */
dialog.ds-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

/* Lightbox-trigger-beelden (afbeelding-widget + inline post-foto's) worden
 * focusbaar gemaakt voor toetsenbord. Onderdruk de globale donkere focus-outline
 * (die bij de ronde hoeken als "zwarte hoekjes" verscheen na een muisklik) en de
 * tap-highlight; toetsenbordfocus toont wél een nette brand-ring. */
[data-lightbox-image] {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
[data-lightbox-image]:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

dialog.ds-lightbox[open] {
  animation: ds-lightbox-in var(--duration-base) var(--ease-out-soft);
}

dialog.ds-lightbox[open]::backdrop {
  animation: ds-fade-in var(--duration-base) ease-out;
}

@keyframes ds-lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}