/* ==========================================================
   Musify — Motion Layer v1
   Semua animasi hanya memakai transform + opacity (GPU),
   durasi pendek, easing konsisten, tanpa layout thrashing.
   ========================================================== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --dur-press: 110ms;
  --dur-fast: 180ms;
  --dur: 260ms;
  --dur-page: 380ms;
  --dur-slow: 480ms;
}

/* ---------- Scroll & touch ---------- */
html, body { overscroll-behavior: none; }
#main-area {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
}
button, [onclick], a, input[type="range"] { touch-action: manipulation; }
img { -webkit-user-drag: none; }

/* ---------- Override Tailwind transition (dulu dipaksa 500ms = terasa berat) ---------- */
.transition-all, .transition, .transition-colors, .transition-opacity, .transition-transform {
  transition-duration: var(--dur) !important;
  transition-timing-function: var(--ease-out) !important;
}
/* transition-all tidak lagi menganimasikan layout (width/height/padding) */
.transition-all {
  transition-property: color, background-color, border-color, opacity, transform, box-shadow, fill, stroke !important;
}
/* Respons sentuhan instan: masuk cepat, lepas halus */
button:active, [onclick]:active, .nav-item:active {
  transition-duration: var(--dur-press) !important;
}
[class*="active:scale"]:not([class*="transition"]) {
  transition: transform var(--dur-fast) var(--ease-out);
}
.glass-hover, .btn-chrome, .glass-card, .glass { will-change: auto; }
@media (hover: none) {
  .glass-hover:hover { transform: none; }
  .btn-chrome:hover { transform: none; }
}

/* ---------- Progress bar: diupdate tiap frame lewat rAF, tanpa transition ---------- */
#full-vol-progress { transition: none !important; }
#mini-circle-progress { transition: none !important; }

/* ---------- Keyframes (slideUp & fade-in sebelumnya TIDAK terdefinisi) ---------- */
@keyframes slideUp {
  from { opacity: 0; transform: translate3d(0, 36px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes popIn {
  from { opacity: 0; transform: scale(.94) translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes slideDownOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, 28px, 0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translate3d(-26px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cardUp {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes cardLeft {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* "backwards" (bukan "both"): setelah selesai transform dilepas,
   jadi tidak ada ratusan layer GPU yang menumpuk di memori */
.animate-slide-right { animation: slideInRight var(--dur-page) var(--ease-out) backwards; }
.animate-slide-left  { animation: slideInLeft  var(--dur-page) var(--ease-out) backwards; }
.animate-slide-up    { animation: fadeUp var(--dur-slow) var(--ease-out) backwards; }
.animate-card-up     { animation: cardUp var(--dur-slow) var(--ease-out) backwards; }
.animate-card-left   { animation: cardLeft var(--dur) var(--ease-out) backwards; }
.animate-fade-in     { animation: fadeIn var(--dur) var(--ease-out) backwards; }

/* Stagger otomatis untuk anak-anak list/grid (maks. 12 item agar tetap cepat) */
.animate-card-up:nth-child(1)  { animation-delay: 0ms; }
.animate-card-up:nth-child(2)  { animation-delay: 30ms; }
.animate-card-up:nth-child(3)  { animation-delay: 60ms; }
.animate-card-up:nth-child(4)  { animation-delay: 90ms; }
.animate-card-up:nth-child(5)  { animation-delay: 120ms; }
.animate-card-up:nth-child(6)  { animation-delay: 150ms; }
.animate-card-up:nth-child(7)  { animation-delay: 175ms; }
.animate-card-up:nth-child(8)  { animation-delay: 200ms; }
.animate-card-up:nth-child(9)  { animation-delay: 220ms; }
.animate-card-up:nth-child(10) { animation-delay: 240ms; }
.animate-card-up:nth-child(n+11) { animation-delay: 255ms; }

/* Overlay / sheet / modal yang ditambahkan lewat motion.js */
.nm-overlay-in { animation: fadeIn var(--dur) var(--ease-out) backwards; }
.nm-overlay-out { animation: fadeOut 200ms var(--ease-std) forwards; pointer-events: none; }
.nm-sheet-in { animation: slideUp 360ms var(--ease-out) backwards; }
.nm-pop-in { animation: popIn 320ms var(--ease-spring) backwards; }
.nm-modal-out { animation: slideDownOut 240ms var(--ease-std) forwards; pointer-events: none; }

/* Toast */
#global-app-toast { transition-duration: 320ms !important; transition-timing-function: var(--ease-spring) !important; }


/* ---------- Player: ganti blur berat dengan versi ringan ---------- */
/* Gradient radial sudah lembut, filter blur(34px) + animasi = repaint tiap frame */
.player-bg-glow { filter: none !important; will-change: transform, opacity; animation-duration: 14s; }
.player-bg-blur-img { filter: blur(18px) brightness(.65) contrast(1.1); -webkit-filter: blur(18px) brightness(.65) contrast(1.1); }
#lyrics-overlay .player-bg-blur-img {
  filter: blur(36px) brightness(.18) contrast(1.2) saturate(110%) !important;
  -webkit-filter: blur(36px) brightness(.18) contrast(1.2) saturate(110%) !important;
}
.backdrop-blur-2xl, .backdrop-blur-xl {
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
}
.backdrop-blur-md, .backdrop-blur-sm {
  -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
}
.tab-hidden .player-bg-glow, .tab-hidden [class*="animate-eq-"], .tab-hidden .animate-pulse { animation-play-state: paused !important; }

/* Panel pemutar: geser mulus dengan easing "iOS-like" */
#full-player { transition: transform 380ms var(--ease-out) !important; backface-visibility: hidden; }
#lyrics-overlay { transition: transform 350ms var(--ease-out) !important; backface-visibility: hidden; }
#mini-player { transition: transform 360ms var(--ease-out) !important; }

/* Cover berdenyut halus saat lagu bermain/jeda */
#full-cover { transition: transform 420ms var(--ease-spring), box-shadow 420ms var(--ease-out) !important; }

/* ---------- Lirik: transisi lebih panjang & lembut ---------- */
.lyric-line {
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out), color 520ms var(--ease-out);
}
.lyric-line.active-lyric { transform: scale(1.05) translate3d(4px, 0, 0); }
.lyric-line.past-lyric { transform: scale(.97) translate3d(0, 0, 0); }
.inline-lyric-line { transition: opacity 420ms var(--ease-out), color 420ms var(--ease-out); }
#lyrics-scroll-container, #full-inline-lyrics-scroll { overscroll-behavior: contain; scroll-behavior: auto; }

/* ---------- Nav bawah ---------- */
.nav-item { transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out) !important; }
.nav-item i, .nav-item svg { transition: transform var(--dur) var(--ease-spring) !important; }
.nav-item.scale-105 svg, .nav-item.scale-105 i { transform: translate3d(0, -1px, 0) scale(1.12); }

/* ---------- Gambar: muncul dengan fade setelah termuat ---------- */
img.nm-img { opacity: 0; transition: opacity 380ms var(--ease-out); }
img.nm-img.nm-loaded { opacity: 1; }

/* ---------- Aksesibilitas ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* ---------- Equalizer bars: animasi height (memicu layout) -> scaleY (GPU) ---------- */
[class*="animate-eq-"] { height: 26px !important; transform-origin: 50% 100%; will-change: transform; }
@keyframes eqBounce1 { 0%, 100% { transform: scaleY(.115); } 50% { transform: scaleY(.77); } }
@keyframes eqBounce2 { 0%, 100% { transform: scaleY(.69); }  50% { transform: scaleY(.155); } }
@keyframes eqBounce3 { 0%, 100% { transform: scaleY(.19); }  50% { transform: scaleY(.92); } }
@keyframes eqBounce4 { 0%, 100% { transform: scaleY(.85); }  50% { transform: scaleY(.23); } }
@keyframes eqBounce5 { 0%, 100% { transform: scaleY(.155); } 50% { transform: scaleY(.615); } }
@keyframes eqBounce6 { 0%, 100% { transform: scaleY(1); }    50% { transform: scaleY(.31); } }

/* ==========================================================
   Motion Layer v2 — Navbar baru, lirik halus, responsif
   ========================================================== */
:root { --dock-h: 62px; --dock-gap: 12px; --accent: #ff7a1a; }

/* ---------- Navbar: dock kaca dengan pil indikator yang bergeser ---------- */
.nm-dock-wrap {
  position: fixed; left: 0; right: 0; z-index: 50; pointer-events: none; box-sizing: border-box;
  bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; padding: 0 12px;
  animation: dockIn 620ms var(--ease-out) 250ms backwards;
}
@keyframes dockIn { from { opacity: 0; transform: translate3d(0, 40px, 0) scale(.96); } to { opacity: 1; transform: none; } }
.nm-dock {
  --pill-x: 0px; --pill-w: 0px;
  pointer-events: auto; position: relative; isolation: isolate;
  display: flex; align-items: stretch; gap: 2px;
  box-sizing: border-box; width: min(100%, 460px); height: var(--dock-h); contain: layout paint; padding: 6px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(40,43,56,.82), rgba(24,26,36,.9));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.06) inset;
}
.nm-dock-pill {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0;
  width: var(--pill-w); transform: translate3d(var(--pill-x), 0, 0);
  border-radius: 20px; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.1));
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 22px rgba(255,122,26,.18);
  transition: transform 520ms var(--ease-spring), width 520ms var(--ease-spring), opacity 240ms var(--ease-out);
  will-change: transform, width;
}
.nm-dock-pill.ready { opacity: 1; }
.nm-dock-pill.no-anim { transition: none !important; }
.nm-dock-pill.stretch { animation: pillStretch 520ms var(--ease-out); }
@keyframes pillStretch { 0% { scale: 1 1; } 40% { scale: 1.1 .94; } 100% { scale: 1 1; } }

.nm-nav-item {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; border-radius: 20px; color: rgba(255,255,255,.5);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; outline: none;
  transition: color 260ms var(--ease-out), transform 180ms var(--ease-out) !important;
  overflow: hidden;
}
.nm-nav-item:active { transform: scale(.88); transition-duration: 90ms !important; }
.nm-nav-item:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset; }
@media (hover: hover) { .nm-nav-item:not(.is-active):hover { color: rgba(255,255,255,.85); } }
.nm-nav-ico { display: grid; place-items: center; transition: transform 420ms var(--ease-spring); }
.nm-nav-ico svg, .nm-nav-ico i { width: 21px; height: 21px; stroke-width: 2; }
.nm-nav-label {
  font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: .01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: transform 360ms var(--ease-out), opacity 260ms var(--ease-out);
}
.nm-nav-item.is-active { color: #fff; }
.nm-nav-item.is-active .nm-nav-ico { transform: translate3d(0, -1px, 0) scale(1.14); }
.nm-nav-item.is-active .nm-nav-ico svg { filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }
.nm-nav-item.is-active .nm-nav-label { font-weight: 800; }
.nm-nav-item.pop .nm-nav-ico { animation: navIconPop 560ms var(--ease-spring); }
@keyframes navIconPop {
  0% { transform: scale(.7) translate3d(0, 5px, 0); } 55% { transform: scale(1.3) translate3d(0, -5px, 0); }
  100% { transform: translate3d(0, -1px, 0) scale(1.14); }
}
#nav-liked.is-active svg { fill: #ff4d6d; stroke: #ff4d6d; filter: drop-shadow(0 0 8px rgba(255,77,109,.55)); }
#nav-liked.pop .nm-nav-ico { animation-name: navHeart; }
@keyframes navHeart { 0% { transform: scale(.7); } 30% { transform: scale(1.38); } 55% { transform: scale(.96); } 75% { transform: scale(1.22); } 100% { transform: translate3d(0, -1px, 0) scale(1.14); } }
/* riak sentuhan */
.nm-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.28);
  transform: scale(0); animation: nmRipple 560ms var(--ease-out) forwards; }
@keyframes nmRipple { to { transform: scale(1); opacity: 0; } }

/* Layar kecil & lebar */
@media (max-width: 360px) { .nm-nav-label { font-size: 9px; } .nm-dock { padding: 5px; } .nm-nav-ico svg { width: 19px; height: 19px; } }
@media (min-width: 640px) { .nm-dock { height: 66px; } .nm-nav-label { font-size: 11px; } }
@media (max-height: 430px) and (orientation: landscape) { .nm-nav-label { display: none; } :root { --dock-h: 48px; --dock-gap: 6px; } }

/* Mini player selalu pas di atas dock */
#mini-player { bottom: calc(var(--dock-h) + var(--dock-gap) + 12px + env(safe-area-inset-bottom, 0px)) !important; }
#main-area { padding-bottom: calc(var(--dock-h) + 110px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- Lirik: fokus baris aktif, baris jauh meredup ---------- */
.lyric-line { transform-origin: left center; backface-visibility: hidden; transition: opacity 420ms var(--ease-out), transform 460ms var(--ease-out), color 380ms var(--ease-out), filter 420ms var(--ease-out), text-shadow 420ms var(--ease-out) !important; }
.lyric-line.active-lyric { text-shadow: 0 0 28px rgba(255,255,255,.28); }
@media (hover: hover) { .lyric-line:not(.active-lyric):hover { opacity: .75 !important; } }
.lyric-line:active { transform: scale(.98); }
.inline-lyric-line { transform-origin: left center; transition: opacity 360ms var(--ease-out), color 320ms var(--ease-out), transform 420ms var(--ease-out) !important; }
.inline-lyric-line.active-lyric { transform: scale(1.04) translate3d(2px, 0, 0); }
#lyrics-scroll-container, #full-inline-lyrics-scroll {
  scroll-behavior: auto !important;
}

/* ---------- Animasi masuk umum (full animasi) ---------- */
.nm-reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
.nm-reveal.nm-in { opacity: 1; transform: none; transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); transition-delay: var(--d, 0ms); }
#full-cover.is-playing, #full-cover { will-change: transform; }
.nm-card-hover { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
@media (hover: hover) { .nm-card-hover:hover { transform: translate3d(0, -4px, 0); } }
.nm-card-hover:active { transform: scale(.97); }
button:not(.nm-nav-item):active, [onclick]:not(.nm-nav-item):active { transform: scale(.96); }

/* Responsif: cegah overflow horizontal & teks pecah */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas { max-width: 100%; }
.truncate, .line-clamp-1, .line-clamp-2 { min-width: 0; }
@media (min-width: 1024px) { .nm-dock { max-width: 520px; } #main-area { scroll-padding-bottom: 140px; } }

@media (prefers-reduced-motion: reduce) {
  .nm-dock-pill, .nm-nav-ico, .nm-dock-wrap { transition-duration: 1ms !important; animation: none !important; }
  .nm-reveal { opacity: 1; transform: none; }
}

/* ==========================================================
   Motion Layer v3 — Motion graphics (desain saja, tata letak tetap)
   ========================================================== */

/* Dock turun saat keyboard terbuka, tidak pernah menutupi input / modal */
.nm-dock-wrap { transition: transform 360ms var(--ease-out), opacity 260ms var(--ease-out); }
body.kb-open .nm-dock-wrap { transform: translate3d(0, 140%, 0); opacity: 0; pointer-events: none; }
body.kb-open #mini-player { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }

/* Bingkai cahaya dock: statis, hanya opacity yang beranimasi (compositor, tanpa repaint) */
.nm-dock::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,122,26,.95), rgba(255,64,129,.9) 50%, rgba(88,101,242,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 600ms var(--ease-out);
}
body.is-playing .nm-dock::before { animation: ringPulse 3.2s ease-in-out infinite; }
@keyframes ringPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Latar aurora bergerak (hanya transform + opacity) */
.app-bg::before, .app-bg::after {
  content: ''; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  opacity: .35; will-change: transform; contain: strict;
}
.app-bg::before { left: -35vmax; top: -45vmax; background: radial-gradient(circle, rgba(255,122,26,.55), transparent 62%); animation: auroraA 26s ease-in-out infinite alternate; }
.app-bg::after  { right: -40vmax; bottom: -50vmax; background: radial-gradient(circle, rgba(88,101,242,.55), transparent 62%); animation: auroraB 32s ease-in-out infinite alternate; }
body.is-playing .app-bg::before, body.is-playing .app-bg::after { opacity: .5; }
@keyframes auroraA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(22vmax,16vmax,0) scale(1.18); } }
@keyframes auroraB { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-20vmax,-14vmax,0) scale(.92); } }
.tab-hidden .app-bg::before, .tab-hidden .app-bg::after, .tab-hidden .nm-dock::before { animation-play-state: paused !important; }

/* Cover mengambang halus saat lagu bermain; berdenyut saat memuat */
body.is-playing #full-cover { animation: coverFloat 7s ease-in-out infinite; }
body.is-playing #mini-cover { animation: coverBeat 2.4s ease-in-out infinite; }
body.is-loading #mini-cover, body.is-loading #full-cover { animation: coverLoad 1.1s ease-in-out infinite; }
@keyframes coverFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes coverBeat  { 0%,100% { scale: 1; } 50% { scale: 1.045; } }
@keyframes coverLoad  { 0%,100% { opacity: 1; scale: 1; } 50% { opacity: .6; scale: .97; } }

/* Progress: kilau yang bergerak */
#full-progress { position: relative; overflow: hidden; }
#full-progress::after {
  content: ''; position: absolute; inset: 0; transform: translate3d(-100%,0,0);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
body.is-playing #full-progress::after { animation: shine 2.2s ease-in-out infinite; }
@keyframes shine { to { transform: translate3d(100%,0,0); } }

/* Gambar: placeholder lembut, lalu fade masuk (opacity/transform saja) */
img.nm-img { opacity: 1 !important; transition: none; background: rgba(255,255,255,.07); }
img.nm-img.nm-loaded { animation: imgIn 420ms var(--ease-out); background: none; }
@keyframes imgIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* Kartu: kilau menyapu hanya di perangkat dengan mouse (HP tidak membayar biayanya) */
@media (hover: hover) and (pointer: fine) {
  .glass-card, .glass-hover { position: relative; overflow: hidden; }
  .glass-card::after, .glass-hover::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translate3d(-120%,0,0) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
  .glass-card:hover::after, .glass-hover:hover::after { opacity: 1; transform: translate3d(120%,0,0) skewX(-18deg); transition: transform 780ms var(--ease-out), opacity 120ms; }
}

/* Teks krom berkilau (judul header) */

@keyframes nmRot { to { transform: rotate(360deg); } }

/* Tombol kontrol: pegas saat ditekan; tombol utama play berdenyut halus */
[onclick]:active { transition: transform 90ms var(--ease-out) !important; }
#btn-play, #mini-play, #full-play { transition: transform 260ms var(--ease-spring) !important; }
body.is-playing #full-play { animation: playPulse 2.6s ease-in-out infinite; }
@keyframes playPulse { 0%,100% { scale: 1; } 50% { scale: 1.05; } }

/* Riak generik untuk tombol bergaya */
.nm-ripple-host { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .app-bg::before, .app-bg::after, .nm-dock::before, .chrome-text, img.nm-img,
  body.is-playing #full-cover, body.is-playing #mini-cover, body.is-playing #full-play { animation: none !important; }
}

/* ==========================================================
   Motion Layer v4 — Lirik gaya Spotify + motion graphics penuh
   ========================================================== */

/* ---------- Latar overlay lirik: warna dari cover, bergerak pelan ---------- */
#lyrics-overlay {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--lc1, #3b4268) 82%, #000) 0%,
      color-mix(in srgb, var(--lc2, #232742) 55%, #000) 55%,
      color-mix(in srgb, var(--lc3, #15172a) 38%, #000) 100%) !important;
  transition: background 900ms var(--ease-out), transform 350ms var(--ease-out) !important;
}
#lyrics-overlay::before, #lyrics-overlay::after {
  content: ''; position: absolute; z-index: 0; width: 90vmax; height: 90vmax; border-radius: 50%;
  pointer-events: none; will-change: transform; opacity: .5; contain: strict;
}
#lyrics-overlay::before { left: -45vmax; top: -60vmax; background: radial-gradient(circle, color-mix(in srgb, var(--lc2, #6a73c9) 90%, #fff 10%), transparent 62%); animation: lyricBlobA 18s ease-in-out infinite alternate; }
#lyrics-overlay::after  { right: -55vmax; bottom: -70vmax; background: radial-gradient(circle, color-mix(in srgb, var(--lc3, #c96ab0) 90%, #fff 10%), transparent 62%); animation: lyricBlobB 23s ease-in-out infinite alternate; }
@keyframes lyricBlobA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(28vmax,20vmax,0) scale(1.25); } }
@keyframes lyricBlobB { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-26vmax,-22vmax,0) scale(.9); } }
#lyrics-overlay .player-bg-blur-img { opacity: .22 !important; mix-blend-mode: soft-light; }
#lyrics-overlay .player-bg-vignette {
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%) !important;
}
#lyrics-overlay .player-bg-glow { opacity: 0 !important; }

/* ---------- Baris lirik ---------- */
#lyrics-content .lyric-line, #full-inline-lyrics-content .inline-lyric-line {
  --o: .5; --b: 0; --sc: .97; --p: 0%;
  opacity: var(--o) !important; filter: blur(calc(var(--b) * 1px));
  transform: scale(var(--sc)) translate3d(0,0,0) !important; transform-origin: left center;
  color: #fff !important; text-shadow: none !important;
  font-size: clamp(1.55rem, 6.4vw, 2.5rem); font-weight: 800; line-height: 1.18; letter-spacing: -.028em;
  padding: .32em 0; margin: 0;
  transition: opacity 520ms var(--ease-out), filter 520ms var(--ease-out), transform 620ms var(--ease-spring) !important;
  -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere;
}
@media (min-width: 768px) { #lyrics-content .lyric-line { font-size: clamp(2rem, 3.1vw, 3rem); } }
#full-inline-lyrics-content .inline-lyric-line { font-size: clamp(1rem, 4.4vw, 1.3rem); padding: .28em 0; }

/* baris aktif: isi putih mengalir dari kiri ke kanan sesuai durasi baris */
#lyrics-content .lyric-line.active-lyric, #full-inline-lyrics-content .inline-lyric-line.active-lyric {
  --o: 1; --b: 0; --sc: 1.0;
  color: transparent !important;
  background-image: linear-gradient(90deg, #fff 0, #fff var(--p), rgba(255,255,255,.42) calc(var(--p) + 6%), rgba(255,255,255,.42) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lineHit 620ms var(--ease-spring);
}
@keyframes lineHit { 0% { transform: scale(.94) translate3d(-10px,0,0); } 100% { transform: scale(1) translate3d(0,0,0); } }
#lyrics-content .lyric-line .lyric-translation, #full-inline-lyrics-content .inline-lyric-line .lyric-translation { font-weight: 600; letter-spacing: 0; }
/* lirik tanpa timestamp (plain): tampil penuh, tanpa efek fokus */
#lyrics-content .lyric-line:not([data-time]), #full-inline-lyrics-content .inline-lyric-line:not([data-time]) { --o: .9; --b: 0; --sc: 1; }

/* masuk bertahap saat lirik dirender */
#lyrics-content .lyric-line { animation: lyricIn 800ms var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 14) * 55ms); }
@keyframes lyricIn { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.96); filter: blur(8px); } }
#lyrics-content .lyric-line.active-lyric { animation-delay: 0ms; }

/* jeda instrumental: tiga titik berdenyut */
.lyric-gap { display: inline-flex; gap: .28em; align-items: center; min-height: 1.18em; }
.lyric-gap i { width: .42em; height: .42em; border-radius: 50%; background: #fff; display: block; opacity: .5; transform: scale(.7); }
.active-lyric .lyric-gap i { -webkit-text-fill-color: initial; animation: gapDot 1.2s ease-in-out infinite; }
.active-lyric .lyric-gap i:nth-child(2) { animation-delay: .16s; } .active-lyric .lyric-gap i:nth-child(3) { animation-delay: .32s; }
@keyframes gapDot { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@media (hover: hover) { #lyrics-content .lyric-line[data-time]:not(.active-lyric):hover { --o: .9; --b: 0; } }

/* ---------- Pergantian tampilan: tiap view menampilkan isinya bertahap ---------- */
#main-area > div[id^="view-"]:not([style*="display: none"]) > * { animation: fadeUp 600ms var(--ease-out) backwards; }
#main-area > div[id^="view-"] > *:nth-child(2) { animation-delay: 60ms; }
#main-area > div[id^="view-"] > *:nth-child(3) { animation-delay: 120ms; }
#main-area > div[id^="view-"] > *:nth-child(4) { animation-delay: 180ms; }
#main-area > div[id^="view-"] > *:nth-child(5) { animation-delay: 240ms; }
#main-area > div[id^="view-"] > *:nth-child(n+6) { animation-delay: 300ms; }

/* ---------- Mini player: masuk melenting, cover berputar halus saat bermain ---------- */
#mini-player:not(.hidden) { animation: miniIn 620ms var(--ease-spring) backwards; }
@keyframes miniIn { from { opacity: 0; translate: 0 40px; scale: .94; } }
#mini-player-inner { transition: background 800ms var(--ease-out), transform 200ms var(--ease-out); }
.mini-beat-bar { transform-origin: 50% 100%; }
body.is-playing .mini-beat-bar { animation: eqBounce3 900ms ease-in-out infinite; }
body.is-playing .mini-beat-bar:nth-child(2n) { animation-name: eqBounce1; animation-duration: 760ms; }
body.is-playing .mini-beat-bar:nth-child(3n) { animation-name: eqBounce4; animation-duration: 1040ms; }

/* ---------- Efek hati saat Like ---------- */
.nm-heart { position: fixed; z-index: 9999; pointer-events: none; font-size: 18px; will-change: transform, opacity; animation: heartFly 900ms var(--ease-out) forwards; }
@keyframes heartFly { from { opacity: 1; transform: translate3d(0,0,0) scale(.6); } to { opacity: 0; transform: translate3d(var(--hx), var(--hy), 0) scale(1.4) rotate(var(--hr)); } }

/* ---------- Parallax header saat scroll (di-drive JS lewat --sy) ---------- */
.nm-parallax { transform: translate3d(0, calc(var(--sy, 0) * .25px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  #lyrics-overlay::before, #lyrics-overlay::after, #lyrics-content .lyric-line, #lyrics-content .lyric-line.active-lyric,
  #main-area > div[id^="view-"] > *, #mini-player:not(.hidden), .mini-beat-bar { animation: none !important; }
}


/* ==========================================================
   Motion Layer v5 — Performa: semua gerak di compositor (transform/opacity)
   ========================================================== */
/* Progress bar: scaleX (GPU) menggantikan width (memicu layout tiap frame) */
#full-progress {
  width: 100% !important; transform: scaleX(var(--pg, 0)); transform-origin: left center;
  transition: none !important; will-change: transform; backface-visibility: hidden;
}

/* Tampilan baru: stagger hanya saat berpindah tab (class .nm-enter dipasang JS, bukan tiap render ulang) */
#main-area > div[id^="view-"] > * { animation: none; }
#main-area > div.nm-enter > * { animation: fadeUp 520ms var(--ease-out) backwards; }
#main-area > div.nm-enter > *:nth-child(2) { animation-delay: 50ms; }
#main-area > div.nm-enter > *:nth-child(3) { animation-delay: 100ms; }
#main-area > div.nm-enter > *:nth-child(4) { animation-delay: 150ms; }
#main-area > div.nm-enter > *:nth-child(n+5) { animation-delay: 200ms; }

/* Hentikan animasi dekoratif selama scroll agar thread utama fokus ke scroll */
html.is-scrolling .app-bg::before, html.is-scrolling .app-bg::after,
html.is-scrolling .nm-dock::before, html.is-scrolling body.is-playing #mini-cover { animation-play-state: paused !important; }

/* Isolasi layer: perubahan di satu panel tidak memicu repaint panel lain */
#mini-player, #full-player, #lyrics-overlay, #nav-container { contain: layout style; }
#lyrics-content, #full-inline-lyrics-content { contain: layout style; }
.lyric-line, .inline-lyric-line { backface-visibility: hidden; }

/* Mode ringan (otomatis aktif di perangkat yang kesulitan 60fps / hemat daya) */
html.perf-lite .app-bg::before, html.perf-lite .app-bg::after,
html.perf-lite #lyrics-overlay::before, html.perf-lite #lyrics-overlay::after { display: none; }
html.perf-lite .nm-dock::before { animation: none !important; }
html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.perf-lite .nm-dock { background: rgba(26,28,38,.97); }
html.perf-lite #lyrics-content .lyric-line, html.perf-lite #full-inline-lyrics-content .inline-lyric-line { filter: none !important; }
html.perf-lite body.is-playing #full-cover, html.perf-lite body.is-playing #mini-cover, html.perf-lite body.is-playing #full-play,
html.perf-lite .player-bg-glow { animation: none !important; }
html.perf-lite .nm-dock { box-shadow: 0 8px 20px rgba(0,0,0,.5); }