/*
Motion guardrails for the /help/ section.

This section animates via WOW.js + animate.css, neither of which checks the
user's motion preference. Loaded last in <head> so the reduce block wins.
No colours are introduced.
*/

:root {
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #2d2e82;
  outline-offset: 2px;
  border-radius: 2px;
}

.btn {
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: scale(.98);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* animate.css entrance classes start at opacity 0; without this the
     content would never become visible once animation is neutralised. */
  .wow,
  .animated {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}