@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .wrap, .hero, .section, .auth-page .blank {
    animation: rise .55s cubic-bezier(.22,1,.36,1) both;
  }
  .card, .pack-card, .pay-method, .doc-row {
    animation: rise .5s cubic-bezier(.22,1,.36,1) both;
  }
  .btn, a, .pack-card, .pay-method, .doc-row, .card {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease, opacity .22s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .modal-bg.on { animation: fade .22s ease both; }
  .sbp-sheet { animation: sheet .38s cubic-bezier(.22,1,.36,1) both; }
  .drawer { transition: transform .32s cubic-bezier(.22,1,.36,1); }
  .nav-links a, .drawer a { transition: color .2s ease, background .2s ease, padding .2s ease; }
  .drawer a:hover { padding-left: 22px; color: var(--text); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet {
  from { opacity: 0; transform: translateY(28px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}