/* Opt-in motion. Without the controller's enabled flag, content stays visible. */
html[data-motion-enabled="true"] [data-motion-reveal] {
  transition: opacity 380ms ease-out, translate 380ms cubic-bezier(.2, .65, .3, 1);
}
html[data-motion-enabled="true"] [data-motion-reveal="pending"] {
  opacity: .01;
  translate: 0 12px;
}
html[data-motion-enabled="true"] [data-reveal="left"][data-motion-reveal="pending"] { translate: -12px 0; }
html[data-motion-enabled="true"] [data-reveal="right"][data-motion-reveal="pending"] { translate: 12px 0; }
html[data-motion-enabled="true"] [data-motion-reveal="shown"],
html[data-motion-enabled="true"] [data-motion-reveal="instant"] { opacity: 1; translate: 0 0; }
html[data-motion-enabled="true"] [data-motion-reveal="instant"] { transition: none; }

html[data-motion-disabled="true"] [data-drift],
html[data-motion-disabled="true"] [data-drift]::before,
html[data-motion-disabled="true"] [data-drift]::after,
html[data-motion-disabled="true"] [data-drift] * {
  animation: none !important;
}
html[data-motion-disabled="true"] [data-motion-reveal] {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
}

/* Interactions remain calm; focus never depends on an animation or a hover. */
:where(a[href], button, input, select, textarea, summary, [role="button"]) {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
:where(a[href], button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--accent, #526d83);
  outline-offset: 4px;
}
@media (hover: hover) {
  :where(a[href], summary):hover { color: var(--accent, #526d83); }
  :where(button, [role="button"]):not(:disabled):hover { border-color: var(--accent, #526d83); }
}
:where(button, [role="button"]):not(:disabled):active { background-color: var(--accent-soft, #d4e0e9); }
:where(a[href], summary):active { background-color: var(--accent-soft, #d4e0e9); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-drift], [data-drift]::before, [data-drift]::after, [data-drift] * { animation: none !important; }
  html[data-motion-enabled="true"] [data-motion-reveal] {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
  :where(a[href], button, input, select, textarea, summary, [role="button"]) { transition: none; }
}
@media print {
  html[data-motion-enabled="true"] [data-motion-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  [data-drift], [data-drift] * { animation: none !important; }
}