/*
 * Motion (POS-UX2, spec 1.2): functional only, and only on the two properties a browser can move without laying the
 * page out again — transform and opacity. A press answers the finger in 80 ms, an item added pulses once, a sheet
 * rises, a finished sale's slip tears off. Every duration and easing is a token (tokens.css); this file holds no
 * time of its own.
 *
 * A person who asked their system for less motion gets none: every movement below becomes an opacity fade of at
 * most 80 ms (`prefers-reduced-motion`), the last block of the file so that it wins.
 */

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slide-in {
  from {
    transform: translateY(-0.5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes sheet-in {
  from {
    transform: translateY(1.25rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes tear {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-1.5rem);
    opacity: 0;
  }
}

@keyframes slip-in {
  from {
    transform: translateY(0.75rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* a press, on pointerdown */
.btn:active,
.key:active,
.item:active,
.cat:active,
.method:active,
.quick:active,
.reason:active,
.mgr:active,
.icon-btn:active {
  transform: scale(0.97);
  transition: transform var(--m-press) linear;
}

/* an item lands on the slip */
.line--new {
  animation: slide-in var(--m-quick) var(--ease-out);
}
.line--new .line__main {
  animation: pulse var(--m-quick) var(--ease-out);
}

/* a sheet rises over its scrim */
.sheet {
  animation: sheet-in var(--m-sheet-in) var(--ease-out);
}
.sheet-backdrop {
  animation: fade var(--m-sheet-in) var(--ease-out);
}

/* the slip of a finished sale tears off, and a fresh one is laid in its place */
.cart--tear {
  animation: tear var(--m-tear) var(--ease-out) forwards;
}
.cart--fresh {
  animation: slip-in var(--m-tear) var(--ease-out);
}

/* a PIN digit lands */
.pin__dot {
  transition: transform var(--m-quick) var(--ease-out);
}
.pin__dot--on {
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-name: fade;
    animation-duration: var(--m-press);
    animation-iteration-count: 1;
    transition-duration: var(--m-press);
  }
  .btn:active,
  .key:active,
  .item:active,
  .cat:active,
  .method:active,
  .quick:active,
  .reason:active,
  .mgr:active,
  .icon-btn:active,
  .pin__dot--on {
    transform: none;
  }
}