/* Motion changes only: the resting layout and colours remain unchanged. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes section-arrive {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes panel-arrive {
    from { opacity: .35; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .banner { animation: section-arrive 380ms ease-out; }
  .page-title, .subtitle, .tabs { animation: section-arrive 320ms ease-out; }
  .profile { animation: section-arrive 420ms ease-out; }
  [role="tabpanel"]:not([hidden]) { animation: panel-arrive 240ms ease-out; }
  .champ { transition: transform 160ms ease-out; }
  .portrait img { transition: filter 180ms ease-out; }
  .tabs button, .twitch { transition: transform 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out; }
  .score-record, .popular-row, .match-card { transition: transform 180ms ease-out; }
  tbody tr { transition: background-color 150ms ease-out; }
  progress::-webkit-progress-value { transition: width 550ms ease-out; }
  progress::-moz-progress-bar { transition: width 550ms ease-out; }
  .tabs button:active, .twitch:active { transform: scale(.98); }
  @media (hover: hover) and (pointer: fine) {
    .champ:hover { transform: translateY(-2px); z-index: 5; }
    .score-record:hover { transform: translateY(-2px); }
    .match-card:hover { transform: translateX(2px); }
    .twitch:hover { transform: translateY(-1px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}