/* Basis Jointly Heroes (fase 1).
   ACSS regelt al: text-wrap pretty op body en balance op koppen, :focus-visible
   (focus-color, focus-width 3px, focus-offset 2px, per achtergrond via bg-*-focus-color),
   prefers-reduced-motion (option-reduce-motion) en color-scheme: light only (geen dark mode). Hier alleen wat ACSS niet dekt. */

:where(body) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tekstafbreking: labels en korte regels zonder los woord op de laatste regel */
:where(summary, label, legend, figcaption, dt, th, button, [class*="btn--"]) {
  text-wrap: balance;
}

/* Focus in Windows-modus voor hoog contrast: systeemkleur in plaats van merkrood */
@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }
}

/* Animaties (keyframes zijn globaal; gebruik per component, met animation: none bij reduced motion) */
@keyframes rise-in {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes message-in {
  from { opacity: 0; translate: 0 8px; scale: 0.97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes pulse-ring {
  0% { scale: 0.6; opacity: 0.5; }
  100% { scale: 1.8; opacity: 0; }
}

@keyframes marquee {
  to { translate: -50% 0; }
}