/* Small movements that show what is happening. Everything here is off for people who ask for less motion. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .public .page { animation: rise var(--t-med) var(--ease) both; }

  .public :where(.page) .btn, .public .chip span, .public .chip-button, .public .choice, .public .problem-card, .public .problem-card__tile,
  .public .form input, .public .form select, .public .form textarea, .public .fold__summary::after {
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .public .btn--primary:hover, .public .btn--light:hover { transform: translateY(-1px); }
  .public :where(.page) .btn:active { transform: translateY(0); }
  .public .problem-card:hover { transform: translateY(-2px); }
  .public .problem-card:hover .problem-card__tile { transform: scale(1.05); }
}