@import url('/music/assets/css/app.css');

/* Lyrics playback with beat rails */
#learner-area{display:flex;flex-direction:column;gap:14px}
.beat-line{position:relative;margin:10px 0}
.rail{position:absolute;top:50%;left:0;right:0;height:2px;background:rgba(255,255,255,0.14)}
.segments{display:flex;align-items:center;gap:4px;position:relative}
.segment{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 6px;border-radius:12px;border:1px solid rgba(0,0,0,0.35);
  transition:transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
  min-height:28px
}
.segment.locked{opacity:0.28;filter:grayscale(1)}
.segment.active{
  transform:translateY(3px) scale(1.08);
  box-shadow:0 10px 16px rgba(0,0,0,0.45)
}
.segment.miss{opacity:0.22}

/* Ghost coach */
.ghost-strum{
  position:absolute;top:-40px;left:0;width:100%;height:30px;
  pointer-events:none;opacity:0.15;transform:translateY(0)
}
.ghost-strum::after{
  content:"";display:block;margin:0 auto;width:60%;height:6px;border-radius:3px;background:#fff
}
.ghost-strum.animate{animation:ghost-fall linear forwards}
@keyframes ghost-fall{
  from{transform:translateY(0);opacity:0.15}
  to{transform:translateY(90px);opacity:0}
}

/* Segment pulse */
.segment.pulse{animation:pulse 140ms ease-out}
@keyframes pulse{
  from{transform:translateY(3px) scale(calc(1.06 + (var(--pulse, 1) * 0.05)))}
  to{transform:translateY(0) scale(1)}
}