/* Shared keyboard focus and motion preferences. Keep state-changing JS animations local. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 3px;
}

.pause-button { min-height: 40px; padding: 8px 14px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.pause-button:disabled { opacity: 0.55; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal,
  .hero-buddy,
  .world-star,
  .avatar-wave,
  .panel-main,
  .confidence-ring .ring-progress,
  .rhythm-bars i,
  .student-avatar-wrap::before,
  .student-avatar-wrap::after {
    animation: none !important;
  }
  .reveal,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}