@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 22px 2px var(--accent-soft); } }
@keyframes noteAppear { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes pageSlideIn { from { opacity: 0; transform: translateY(20px) scale(.99); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes pageSlideOut { from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } to { opacity: 0; transform: translateY(-10px) scale(.99); filter: blur(3px); } }
@keyframes underlineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.page-enter { animation: pageSlideIn .5s cubic-bezier(.16,1,.3,1) both; }
.page-exit { animation: pageSlideOut .16s ease both; }
.stagger > * { animation: slideUp .5s cubic-bezier(.16,1,.3,1) both; }
.stagger > *:nth-child(1) { animation-delay: .03s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .11s; }
.stagger > *:nth-child(4) { animation-delay: .15s; }
.stagger > *:nth-child(5) { animation-delay: .19s; }
.stagger > *:nth-child(6) { animation-delay: .23s; }
.stagger > *:nth-child(7) { animation-delay: .27s; }
.stagger > *:nth-child(8) { animation-delay: .31s; }
.stagger > *:nth-child(n+9) { animation-delay: .35s; }

.card-entrance { animation: scaleIn .35s cubic-bezier(.16,1,.3,1) both; }
.fret-note.is-root { animation: noteAppear .3s cubic-bezier(.16,1,.3,1) both; }
.glow-select { animation: glowPulse 1.8s ease-in-out infinite; }

.nav-desktop a, .nav-desktop button, .bottom-nav button {
  position: relative;
  transition: color .2s ease;
}
.nav-desktop a::after, .bottom-nav button::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.nav-desktop a.active::after { transform: scaleX(1); }

.btn { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, background .18s ease; }
.pill { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease; }
.pill.active { animation: scaleIn .25s cubic-bezier(.16,1,.3,1) both; }
.card { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease; }

.modal-backdrop { animation: fadeIn .2s ease both; }
.modal-panel { animation: scaleIn .25s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .page-enter, .stagger > *, .card-entrance, .fret-note.is-root, .glow-select, .modal-backdrop, .modal-panel, .pill.active {
    animation: none !important;
  }
}