/* ============================================================
   The Inner Fretboard — animated player v2 (engine styles)
   Implements the motion spec in docs/research/animation-player-research.md
   - Motion tokens (§6.1)            - Glow as a STATE TOGGLE, not a pulse (§5.1)
   - Two visual channels for roots vs notes (§5.4)
   - Only transform/opacity animate (compositor-cheap) (§5.1)
   - prefers-reduced-motion path (§6.6)
   ============================================================ */
:root{
  /* durations */
  --m-note-on:260ms;     /* note pop / reveal — tuned in the playground            */
  --m-note-off:90ms;     /* faster than on (exit < entrance)                     */
  --m-overlay-draw:340ms;/* draw-on for arrows / dashed connectors / outlines    */
  --m-celebrate:300ms;   /* position/scale completion only, NEVER per note       */
  /* easings */
  --ease-note-on:cubic-bezier(0.05,0.7,0.1,1);   /* M3 emphasized-decelerate     */
  --ease-note-off:cubic-bezier(0.3,0,0.8,0.15);  /* M3 emphasized-accelerate     */
  --ease-overlay:cubic-bezier(0,0,0.3,1);        /* Carbon entrance expressive   */
  --ease-cursor:linear;                          /* playhead only                */
}

/* ---- the board surface ---- */
.fbp-board{background:#1d1712; border-radius:12px; padding:10px}
.fbp-board svg{display:block; width:100%; height:auto}

/* ---- notes -------------------------------------------------
   A note group is shown/hidden via .hide (opacity only -> cheap).
   Roots carry a STEADY ring drawn in the marker (never animates).
   ----------------------------------------------------------- */
.fbp-note{transition:opacity var(--m-note-on) var(--ease-note-on); transform-box:fill-box; transform-origin:center}
.fbp-note.hide{opacity:0}
.fbp-note.dim{opacity:.3}

/* one-shot entrance — scale-from-small, runs once when a note first reveals */
.fbp-note.enter{animation:fbp-enter var(--m-note-on) var(--ease-note-on)}
@keyframes fbp-enter{from{opacity:0; transform:scale(.55)} to{opacity:1; transform:scale(1)}}

/* one-shot POP — transform ONLY (no brightness/filter churn). Subtle 1 -> 1.10 -> 1 */
.fbp-note.pop{animation:fbp-pop var(--m-note-on) var(--ease-note-on)}
@keyframes fbp-pop{0%{transform:scale(1)} 45%{transform:scale(1.10)} 100%{transform:scale(1)}}

/* GLOW = a state toggle held while the note sounds; blur is NOT animated */
.fbp-note .fbp-disc{transition:none}
.fbp-note.lit .fbp-disc{filter:drop-shadow(0 0 9px var(--glow,rgba(236,106,67,.6)))}
/* recall mode: the note's name fades in a beat after its disc (labelDelay) */
.fbp-note .fbp-label{transition:opacity 360ms ease}
.fbp-note.lbl-wait .fbp-label{opacity:0}

/* the steady root ring is just a static <circle> in the marker; no rule needed */

/* ---- overlays (arrows / dashed connectors / outlines / brackets) ---- */
.fbp-ovl{opacity:0; transition:opacity var(--m-overlay-draw) var(--ease-overlay)}
.fbp-ovl.on{opacity:1}
/* draw-on: a single dash the length of the path slides into view */
.fbp-draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.fbp-ovl.on .fbp-draw{stroke-dashoffset:0; transition:stroke-dashoffset var(--m-overlay-draw) var(--ease-overlay)}
/* a genuinely dashed (ghost/suggested) connector */
.fbp-dashed{stroke-dasharray:7 6}
/* marching ants reserved for "suggested" motion only */
.fbp-march{stroke-dasharray:11 8; animation:fbp-march .8s linear infinite}
@keyframes fbp-march{to{stroke-dashoffset:-19}}

/* ---- linear playhead (continuous, time-driven) ---- */
.fbp-cursor{opacity:0}
.fbp-cursor.on{opacity:.85}

/* ============================================================
   prefers-reduced-motion: reduce, don't remove. Snap instead of
   glide; drop scale-pops; keep opacity/colour state changes.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .fbp-note{transition:opacity 1ms}
  .fbp-note.enter,.fbp-note.pop{animation:none}
  .fbp-ovl.on .fbp-draw{transition:none; stroke-dashoffset:0}
  .fbp-march{animation:none}
}
/* in-app override (set on the host) — same effect without OS setting */
.fbp-reduce .fbp-note{transition:opacity 1ms}
.fbp-reduce .fbp-note.enter,.fbp-reduce .fbp-note.pop{animation:none}
.fbp-reduce .fbp-ovl.on .fbp-draw{transition:none; stroke-dashoffset:0}
.fbp-reduce .fbp-march{animation:none}