/* ============================================================================
   LRC STUDIO – Custom Styles
   Ergänzt Tailwind-Utilities um Dinge, die @apply / Keyframes brauchen.
   ============================================================================ */

@keyframes pulse-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.rec-dot {
  animation: pulse-rec 1.5s ease-in-out infinite;
}

/* Karaoke-Zeilen: weicher Übergang beim Zeilenwechsel */
.lyric-line {
  transition: all 0.25s ease-out;
}

/* Wort-Highlight im Word-Mode (aktuell zu taggendes Wort) */
.word-active {
  text-decoration: underline;
  text-decoration-color: #818cf8; /* indigo-400 */
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.word-tagged {
  color: #34d399; /* emerald-400 */
}

.transport-btn {
  background-color: #1e293b; /* slate-800 */
  transition: background-color 0.15s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.transport-btn:hover {
  background-color: #334155; /* slate-700 */
}

.transport-btn-primary {
  background-color: #4f46e5; /* indigo-600 */
  transition: background-color 0.15s ease;
  width: 3rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.transport-btn-primary:hover {
  background-color: #6366f1; /* indigo-500 */
}

.transport-btn:disabled,
.transport-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}