/* ─── FretVision — Fretboard Animations ─────────────────────────────────── */

/* ── Note pop-in (staggered by fret/string position) ─────────────────── */
@keyframes notePopIn {
  from { transform: scale(0) translateY(4px); opacity: 0; }
  to   { transform: scale(1) translateY(0);   opacity: 1; }
}

.note-circle {
  transform-origin: center;
  animation: notePopIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--fret-index, 0) * 12ms);
}

/* ── Root pulse glow ──────────────────────────────────────────────────── */
@keyframes rootGlow {
  0%,100% { filter: drop-shadow(0 0 0px #06b6d4); }
  50%      { filter: drop-shadow(0 0 8px #06b6d4); }
}

.note-circle--root {
  animation:
    notePopIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    rootGlow  2s ease-in-out 0.3s infinite;
}

/* ── Fading out old notes ─────────────────────────────────────────────── */
@keyframes notePopOut {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0); opacity: 0; }
}

.note-circle.fading {
  animation: notePopOut 0.12s ease-in both;
}

/* ── Random button spin ───────────────────────────────────────────────── */
@keyframes spinOnce {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Fretboard SVG base ───────────────────────────────────────────────── */
.fretboard-svg text {
  user-select: none;
  -webkit-user-select: none;
}