/* Exacte groentinten uit het ontwerp. ACSS gebruikt voor tinten van statuskleuren
   één vaste chroma; :root:root wint van de ACSS-tokens, ongeacht de laadvolgorde. */
:root:root {
  --success-dark: #2E8F63;
  --success-semi-dark: #2E9A68;
  --success-light: #7BD3A8;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}

@keyframes pulse-ring-ok {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); }
}



@keyframes logo-hover {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

/* Reduced motion: alleen dekking, geen beweging. Gebruikt waar de volgorde het verhaal vertelt. */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ACSS option-reduce-motion staat uit; reduced motion regelt elk component zelf. */
@media (prefers-reduced-motion: reduce) {
  html,
  html:focus-within {
    scroll-behavior: auto;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes dot-blink {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

@keyframes sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes marquee {
  to { transform: translateX(calc(-50% - 4px)); }
}

/* Tekstselectie: effen lichtrood met inkt, leesbaar op lichte en donkere secties */
::selection {
  background: var(--primary-light);
  color: var(--base-dark);
}

/* Scrollbalk van de pagina */
html {
  scrollbar-color: var(--neutral-semi-light) var(--accent-ultra-light);
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background: var(--accent-ultra-light);
  }

  ::-webkit-scrollbar-thumb {
    border: 3px solid var(--accent-ultra-light);
    border-radius: 999px;
    background: var(--neutral-semi-light);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
  }
}