/* Shared timing for controls, content changes, a change of view, and deliberate map moves: unhurried, and easing
   out smoothly rather than stopping short. */
:root {
  --motion-ui: 240ms;
  --motion-reader: 380ms;
  --motion-view: 420ms;
  --motion-camera: 750ms;
  --motion-ease: cubic-bezier(0.25, 0.8, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
}

@keyframes page-in { from { opacity: 0.75; } }

@media (prefers-reduced-motion: no-preference) {
  main { animation: page-in var(--motion-ui) var(--motion-ease); }
  :is(button, a, summary, select, input, .mv-check) {
    transition: color var(--motion-ui) var(--motion-ease),
      background-color var(--motion-ui) var(--motion-ease),
      border-color var(--motion-ui) var(--motion-ease),
      opacity var(--motion-ui) var(--motion-ease);
  }

  /* A change of view (app.js: changeView) moves the panel and the player as sheets from where they were to where they
     are now, their contents crossfading; the page's own old picture is not shown, so the chart goes on drawing live
     beneath them. */
  .side { view-transition-name: panel; }
  .time { view-transition-name: player; }
  ::view-transition-old(root) { animation: none; opacity: 0; }
  ::view-transition-new(root) { animation: none; }
  ::view-transition-group(panel), ::view-transition-group(player) { animation-duration: var(--motion-view); animation-timing-function: var(--motion-ease-in-out); }
  :is(::view-transition-old(panel), ::view-transition-new(panel), ::view-transition-old(player), ::view-transition-new(player)) {
    animation-duration: var(--motion-view); animation-timing-function: var(--motion-ease-in-out);
  }
}