/* ========================================================
   APPLE MUSIC 1:1 FLUID WORD-BY-WORD KARAOKE FLOW ENGINE (v9.2)
   High Performance, Zero-Thrashing, Phonetic Flow & 3-Dot Hourglass
   ======================================================== */

.lyric-line .lyric-word {
  display: inline-block;
  white-space: pre-wrap;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff var(--word-progress, 0%),
    rgba(255, 255, 255, 0.35) var(--word-progress, 0%),
    rgba(255, 255, 255, 0.35) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transform-origin: left center;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: background, transform;
  cursor: pointer;
}

.lyric-line.active .lyric-word.singing {
  transform: scale(1.025);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.45);
}

.lyric-line.active .lyric-word.sung {
  background: #ffffff !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
}

.lyric-line:not(.active) .lyric-word {
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
  transform: none !important;
  text-shadow: none !important;
}

/* APPLE MUSIC 3-DOT VOCAL LEAD-IN & HOURGLASS FLOW INDICATOR */
.lyric-interlude-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin: 14px 0 20px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.3s ease;
  user-select: none;
}

.lyric-interlude-dots:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lyric-interlude-dots .interlude-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, box-shadow 0.2s ease;
}

.lyric-interlude-dots.active .interlude-dot {
  background: rgba(255, 255, 255, 0.65);
}

.lyric-interlude-dots.active .interlude-dot.pulsing {
  background: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.95);
  transform: scale(1.4);
}

.lyric-interlude-dots .interlude-hourglass {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
}

.lyric-interlude-dots.active .interlude-hourglass svg {
  color: #10b981;
  animation: hourglassTilt 2s infinite ease-in-out;
}

@keyframes hourglassTilt {
  0% { transform: rotate(0deg); opacity: 0.6; }
  50% { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(180deg); opacity: 0.6; }
}

/* DYNAMIC LYRICS TOOLBAR & INDONESIAN PHONETIC TOGGLE PILL */
.lyrics-dynamic-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px;
  margin-bottom: 12px;
  width: 100%;
}

.btn-lyrics-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}

.btn-lyrics-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-lyrics-pill.active {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
}