/* Motion, as the design specifies it.
 *
 * Three keyframes and nothing more: a spinner for the confirmation wait, a
 * rise for the create screen, a lift for the toast. Everything else that moves
 * is the canvas, which encodes device state rather than decorating.
 */

@keyframes noc-spin { to { transform: rotate(360deg); } }

@keyframes noc-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes noc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.toast { animation: noc-toast-in 0.28s ease-out; }
.screen--form { animation: noc-rise 0.24s ease-out; }

/* The wait indicator, and the fast mode's own slow turn -- the only two
   places a spin means something. */
.spin { animation: noc-spin 1.1s linear infinite; }
.spin--slow { animation: noc-spin 2s linear infinite; }

/* Reduced motion is honoured in JS as well: the canvas draws one still frame
   and never starts its loop, so no work happens at all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}