.lyric-viewport{
  margin: 14px 0 18px;
  height: 110px;            
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,176,0,.22);
  background: rgba(0,0,0,.38);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  position: relative;
}

.lyric-viewport::before{
  /* subtle scan + glare, like a physical display */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(circle at 20% 15%, rgba(255,176,0,.10), transparent 55%);
  opacity: .22;
  mix-blend-mode: overlay;
}

.lyric-track{
  display: flex;
  flex-direction: column;
  will-change: transform;
  animation: lyricScroll 16s linear infinite;
}

/* each run is the same height, so scrolling -50% loops perfectly */
.lyric-run{
  padding: 14px 14px 16px;
  display: grid;
  gap: 10px;
  color: rgba(234,238,247,.92);
  font-style: italic;
  letter-spacing: .4px;
}

.lyric-run > div{
  padding-left: 10px;
  border-left: 2px solid rgba(255,176,0,.18);
}

/* Infinite vertical loop */
@keyframes lyricScroll{
  from{ transform: translateY(0); }
  to  { transform: translateY(-50%); }
}

/* Glitch: occasional jitter + flicker (doesn’t break the loop) */
.lyric-track{
  animation:
    lyricScroll 16s linear infinite,
    lyricGlitch 6.5s steps(1, end) infinite;
}

@keyframes lyricGlitch{
  0%, 86%, 100% { filter: none; }
  88% { transform: translateY(var(--lyY, 0)) translateX(-1px); filter: contrast(1.05) saturate(1.05); }
  89% { transform: translateY(var(--lyY, 0)) translateX(2px);  filter: hue-rotate(8deg); }
  90% { transform: translateY(var(--lyY, 0)) translateX(0);    filter: none; }
}

/* Accessibility: don’t animate for reduced motion users */
@media (prefers-reduced-motion: reduce){
  .lyric-track{ animation: none; }
}