/* Lirik karaoke (desktop ≥ 1024px).
 *
 * Variabel yang bisa diubah (pasang di .lyrics-viewport atau induknya):
 *   --lyric-size            ukuran huruf baris (30px)
 *   --lyric-weight          ketebalan (700)
 *   --lyric-sung            warna kata yang sudah/sedang dinyanyikan (#fff)
 *   --lyric-dim             warna baris & kata yang belum (rgba(255,255,255,.3))
 *   --lyric-translation     warna terjemahan (rgba(255,255,255,.6))
 *   --lyric-translation-size ukuran terjemahan (20px)
 *   --lyric-inactive-scale  skala baris tidak aktif (.95)
 *   --lyric-far-blur        blur baris jauh, ≥ 3 baris dari yang aktif (1px; 0 = mati)
 *   --lyric-anchor          posisi baris aktif dari atas (35%) — dibaca JS
 *   --lyric-scroll-duration lama geser per baris (1s)
 *   --lyric-spring          kurva pegas saat ganti baris (lewat ±9% lalu mengendap)
 *   --lyric-stagger         jeda berangkat antarbaris (50ms; 0 = semua bersamaan) — dibaca JS
 *   --lyric-scroll-ease     kurva geser jarak jauh / seek (cubic-bezier(.86,0,.2,1))
 *   --lyric-glow            cahaya kata yang sedang dinyanyikan
 *
 * Yang dianimasikan hanya transform, opacity, filter kecil, dan custom property —
 * tidak ada yang memicu layout ulang. */

@property --p { syntax: '<percentage>'; inherits: false; initial-value: -10%; }
/* Tidak diwariskan: mengubah --lyric-y di kontainer hanya menghitung ulang gaya
   baris (yang mengambilnya lewat `inherit`), bukan setiap kata di dalamnya. */
@property --lyric-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --lyric-s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --lyric-delay { syntax: '<time>'; inherits: false; initial-value: 0s; }

.lyrics-viewport {
  --lyric-size: 30px;
  --lyric-weight: 700;
  --lyric-sung: #fff;
  --lyric-dim: rgba(255, 255, 255, .3);
  --lyric-translation: rgba(255, 255, 255, .6);
  --lyric-translation-size: 20px;
  --lyric-inactive-scale: .95;
  --lyric-far-blur: 1px;
  --lyric-anchor: 35%;
  --lyric-scroll-duration: 1s;
  --lyric-spring: cubic-bezier(.34, 1.4, .64, 1); /* browser lama tanpa linear() */
  --lyric-stagger: 50ms;
  --lyric-scroll-ease: cubic-bezier(.86, 0, .2, 1);
  --lyric-glow: drop-shadow(0 0 6px rgba(255, 255, 255, .45));
  position: relative;
  height: 100%;
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent);
  user-select: none;
  -webkit-user-select: none;
}

/* Pegas teredam (dibuat dari rumus pegas, bukan digambar tangan): cepat
   sampai, lewat ±9%, lalu mengendap. */
@supports (transition-timing-function: linear(0, 1)) {
  .lyrics-viewport { --lyric-spring: linear(0, 0.007 1.2%, 0.03 2.5%, 0.072 4%, 0.127 5.5%, 0.185 6.8%, 0.248 8.2%, 0.528 13.7%, 0.649 16.2%, 0.757 18.7%, 0.851 21.2%, 0.923 23.5%, 0.954 24.7%, 0.985 26%, 1.031 28.5%, 1.065 31.2%, 1.08 33%, 1.089 34.8%, 1.094 36.8%, 1.094 38.8%, 1.081 43.8%, 1.018 57.8%, 1.006 61.8%, 0.998 66%, 0.992 70.8%, 0.991 76.5%, 1); }
}

/* Gulir: tiap baris digeser sendiri lewat --lyric-y (diatur engine.js), jadi
   tiap baris bisa berangkat pada waktunya sendiri (--lyric-delay). */
.lyrics-container { --lyric-y: 0px; padding-bottom: 50vh; }

.lyric-line {
  padding: 10px 0;
  font-size: var(--lyric-size);
  font-weight: var(--lyric-weight);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--lyric-dim);
  --lyric-s: var(--lyric-inactive-scale);
  --lyric-y: inherit;
  /* 2D: translate3d membuat setiap baris jadi layer grafis sendiri. */
  transform: translate(0, var(--lyric-y)) scale(var(--lyric-s));
  transform-origin: left center;
  transition: color .3s, filter .3s; /* baris di luar layar: pindah seketika */
  cursor: pointer;
  /* Baris yang jauh dari layar tidak dilukis. Tinggi aslinya diisi JS lewat
     contain-intrinsic-size, jadi posisi gulir tetap persis. */
  content-visibility: auto;
  contain-intrinsic-size: auto 52px;
  overflow-wrap: anywhere;
}
.lyrics-viewport.is-measuring .lyric-line { content-visibility: visible; }
.lyric-line:hover { color: rgba(255, 255, 255, .55); }
/* Hanya baris yang terlihat (.is-near, diatur engine.js) punya layer & transisi gerak. */
.lyric-line.is-near {
  will-change: transform;
  transition: transform var(--lyric-scroll-duration) var(--lyric-spring) var(--lyric-delay, 0ms), color .3s, filter .3s;
}
.lyrics-container.is-glide .lyric-line.is-near { transition: transform .8s var(--lyric-scroll-ease), color .3s, filter .3s; }
.lyrics-container.is-manual .lyric-line.is-near { transition: transform .25s cubic-bezier(.2, .7, .3, 1), color .3s, filter .3s; }
.lyrics-container.is-instant .lyric-line { transition: none !important; }
.lyric-line.is-far { filter: blur(var(--lyric-far-blur)); }
.lyric-line.is-active { --lyric-s: 1; color: var(--lyric-sung); filter: none; }

/* Isi per kata: hanya di baris aktif. */
.lyric-word { display: inline-block; }
.lyric-line.is-active .lyric-word {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--lyric-sung) var(--p), var(--lyric-dim) calc(var(--p) + 10%));
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform .25s ease, filter .25s ease;
}
.lyric-line.is-active .lyric-word.is-done { --p: 110%; }
.lyric-line.is-active .lyric-word.is-singing {
  animation: lyric-fill calc(var(--dur) / var(--rate, 1)) linear forwards;
  transform: translateY(-2px);
  filter: var(--lyric-glow);
}
.lyrics-viewport.is-paused .lyric-word.is-singing { animation-play-state: paused; }
@keyframes lyric-fill { to { --p: 110%; } }

/* Lirik tanpa waktu per kata (waktu kata hanya perkiraan): baris menyala utuh. */
.lyric-line.no-fill.is-active .lyric-word {
  color: var(--lyric-sung); -webkit-text-fill-color: var(--lyric-sung);
  background: none; animation: none; transform: none; filter: none;
}

.lyric-translation {
  font-size: var(--lyric-translation-size);
  font-weight: 500;
  color: var(--lyric-translation);
  margin-top: 4px;
}
.lyric-line:not(.is-active) .lyric-translation { color: inherit; }

/* Baris instrumental: tiga titik yang "bernapas". */
.lyric-line.is-instrumental .lyric-main { display: flex; gap: 10px; padding: 8px 0; }
.lyric-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; opacity: .5; transform: scale(.8); }
.lyric-line.is-instrumental.is-active .lyric-dot { animation: lyric-breathe 1.6s ease-in-out infinite; }
.lyric-line.is-instrumental.is-active .lyric-dot:nth-child(2) { animation-delay: .2s; }
.lyric-line.is-instrumental.is-active .lyric-dot:nth-child(3) { animation-delay: .4s; }
@keyframes lyric-breathe { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.1); } }

/* Mode ringan (dipasang otomatis oleh engine.js bila frame sering tersendat). */
.lyrics-viewport.is-lite { -webkit-mask-image: none; mask-image: none; }
.lyrics-viewport.is-lite .lyric-line.is-far { filter: none; }
.lyrics-viewport.is-lite .lyric-line.is-active .lyric-word.is-singing { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .lyric-line, .lyric-line.is-near, .lyric-line.is-active .lyric-word { transition: none !important; }
  .lyric-line { transform: translate(0, var(--lyric-y)); }
  .lyric-line.is-far { filter: none; }
  .lyric-line.is-active .lyric-word.is-singing { animation: none; --p: 110%; transform: none; filter: none; }
  .lyric-line.is-instrumental.is-active .lyric-dot { animation: none; opacity: 1; transform: none; }
}