@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

.page.anim > * { animation: riseIn 0.26s cubic-bezier(0.22, 0.9, 0.35, 1) both; }
.page.anim > *:nth-child(2) { animation-delay: 40ms; }
.page.anim > *:nth-child(3) { animation-delay: 80ms; }
.page.anim > *:nth-child(4) { animation-delay: 120ms; }
.page.anim > *:nth-child(n+5) { animation-delay: 160ms; }

.page.anim .key-grid { animation: none; }
.page.anim .key-grid .key-card {
  animation: riseIn 0.3s cubic-bezier(0.22, 0.9, 0.35, 1) both;
  animation-delay: calc(60ms + var(--i, 0) * 35ms);
}

html.theme-anim body,
html.theme-anim body * {
  transition: background-color 0.25s ease, color 0.2s ease, border-color 0.25s ease !important;
}

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

@media (max-width: 640px) {
  .key-hero { padding: 16px; }
  .key-hero h1 { font-size: 20px; }
  .field-row { flex-direction: column; gap: 0; }
}