/* Micro interactions: one easing curve, transform and opacity only. */
:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-sheet: 320ms;
}
.press {
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
@media (hover: hover) {
  .press:hover { transform: translateY(-1px); }
}
.press:active { transform: scale(0.97); }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes slideup { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes toastin { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }

.rise > * { animation: rise var(--t-sheet) var(--ease) both; }
.rise > *:nth-child(2) { animation-delay: 40ms; }
.rise > *:nth-child(3) { animation-delay: 80ms; }
.rise > *:nth-child(4) { animation-delay: 120ms; }
.rise > *:nth-child(5) { animation-delay: 160ms; }
.rise > *:nth-child(6) { animation-delay: 200ms; }
.shake { animation: shake 260ms var(--ease); }
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 14px;
}
.spinner {
  width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; animation: spin 700ms linear infinite; vertical-align: -0.15em;
}
.check-draw path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 420ms var(--ease) 80ms forwards; }
.btn[data-busy='1'] { pointer-events: none; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}