/* ==========================================================
   Musify — Aurora Layer v2  (palet selaras: graphite + satu warna aksen dari cover)
   Navbar kapsul, mini player mengambang, home hidup, transisi berurutan.
   Hanya transform/opacity (GPU). Dimuat SETELAH motion.css.
   ========================================================== */
@property --nm-a1 { syntax: '<color>'; inherits: true; initial-value: #8b9dff; }
@property --nm-a2 { syntax: '<color>'; inherits: true; initial-value: #b9a6ff; }
@property --nm-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root {
  --nm-a1: #8b9dff; --nm-a2: #b9a6ff;               /* ditimpa JS mengikuti cover (sudah diredam) */
  --nm-glass-top: rgba(34,36,48,.80); --nm-glass-bot: rgba(15,16,23,.90);
  --nm-line: rgba(255,255,255,.10);
  transition: --nm-a1 1.1s ease, --nm-a2 1.1s ease;
}

/* ---------- Latar aurora: halus, ikut warna lagu ---------- */
.app-bg { background: #08090d !important; }
.app-bg::before, .app-bg::after { content: ""; position: absolute; border-radius: 50%; will-change: transform; pointer-events: none; filter: blur(40px); opacity: .34; }
.app-bg::before { width: 80vmax; height: 80vmax; left: -34vmax; top: -40vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--nm-a1) 55%, transparent), transparent); animation: nmDrift1 26s ease-in-out infinite alternate; }
.app-bg::after  { width: 70vmax; height: 70vmax; right: -32vmax; bottom: -36vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--nm-a2) 50%, transparent), transparent); animation: nmDrift2 30s ease-in-out infinite alternate; }
@keyframes nmDrift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(14vmax,10vmax,0) scale(1.18); } }
@keyframes nmDrift2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-12vmax,-9vmax,0) scale(.95); } }
html.tab-hidden .app-bg::before, html.tab-hidden .app-bg::after { animation-play-state: paused; }

/* ---------- Navbar: kapsul graphite, indikator kaca beku ---------- */
:root { --dock-h: 64px; --dock-gap: 14px; }
.nm-dock-wrap { padding: 0 14px; }
.nm-dock {
  width: min(100%, 440px); padding: 6px; gap: 0; border-radius: 32px; border: 0;
  background: linear-gradient(165deg, var(--nm-glass-top), var(--nm-glass-bot));
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 24px 50px -14px rgba(0,0,0,.8), 0 0 0 1px var(--nm-line) inset, 0 1px 0 rgba(255,255,255,.14) inset;
  transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out);
}
/* tepi cahaya tipis yang berputar (lembut, bukan neon) */
.nm-dock::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 0; pointer-events: none;
  background: conic-gradient(from var(--nm-ang), transparent 0 60%, color-mix(in srgb, var(--nm-a1) 70%, transparent) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: nmSpin 8s linear infinite; opacity: .75;
}
@keyframes nmSpin { to { --nm-ang: 360deg; } }
.nm-dock-wrap.nm-away .nm-dock { transform: translate3d(0,10px,0) scale(.93); opacity: .85; }

.nm-dock-pill {
  top: 6px; bottom: 6px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
  box-shadow: 0 1px 0 rgba(255,255,255,.30) inset, 0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 22px -10px var(--nm-a1);
  transition: transform 560ms var(--ease-spring), width 560ms var(--ease-spring), opacity 240ms var(--ease-out);
}
.nm-dock-pill::after {            /* titik cahaya aksen di bawah ikon aktif */
  content: ""; position: absolute; bottom: 4px; left: 50%; width: 16px; height: 3px; translate: -50% 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--nm-a1), var(--nm-a2)); box-shadow: 0 0 10px var(--nm-a1);
}
.nm-dock-pill::before {           /* kilau sesekali */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%); animation: nmSheen 4.5s ease-in-out 1.2s infinite;
}
@keyframes nmSheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.nm-nav-item { color: rgba(255,255,255,.5); border-radius: 26px; }
.nm-nav-item.is-active { color: #fff; }
.nm-nav-item.is-active .nm-nav-ico { transform: translate3d(0,-3px,0) scale(1.15); }
.nm-nav-item.is-active .nm-nav-label { transform: translate3d(0,-1px,0); font-weight: 800; }
.nm-nav-item.is-active .nm-nav-ico svg { filter: none; }
#nav-liked.is-active svg { fill: #ff5d7a; stroke: #ff5d7a; filter: drop-shadow(0 0 8px rgba(255,93,122,.5)); }
@media (hover: hover) { .nm-nav-item:not(.is-active):hover .nm-nav-ico { transform: translate3d(0,-2px,0) scale(1.1); } }

/* ---------- Mini player: kartu graphite melayang ---------- */
#mini-player { left: 14px !important; right: 14px !important; }
@media (min-width: 640px) { #mini-player { left: auto !important; right: 24px !important; width: 400px; } }
#mini-player::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -15px; height: 15px; z-index: -1; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter: blur(5px);
  animation: nmGround 5.4s ease-in-out infinite;
}
@keyframes nmGround { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.84); opacity: .5; } }

.nm-mp {
  position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; cursor: pointer; isolation: isolate;
  padding: 10px 12px 13px 11px; border-radius: 26px; min-height: 64px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nm-a1) 16%, var(--nm-glass-top)), var(--nm-glass-bot) 75%) !important;
  border: 0 !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 22px 44px -12px rgba(0,0,0,.8), 0 12px 40px -22px var(--nm-a1), 0 0 0 1px var(--nm-line) inset, 0 1px 0 rgba(255,255,255,.14) inset !important;
  animation: nmFloat 5.4s ease-in-out infinite;
  transition: transform 200ms var(--ease-out);
}
body:not(.is-playing) .nm-mp { animation-duration: 8s; }
.nm-mp:active { transform: scale(.98); }
@keyframes nmFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.nm-mp::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%);
  transform: translateX(-130%); animation: nmSheen 6s ease-in-out 1.5s infinite;
}
.nm-mp > * { position: relative; z-index: 1; }

.nm-mp-art { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; }
.nm-mp-art img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.12); position: relative; z-index: 1; }
#mini-cover { animation: nmDisc 12s linear infinite; animation-play-state: paused; }
body.is-playing #mini-cover { animation-play-state: running; }
@keyframes nmDisc { to { transform: rotate(360deg); } }
.nm-mp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; z-index: 2; }
#mini-circle-progress { transition: none !important; stroke: var(--nm-a1) !important; filter: drop-shadow(0 0 3px var(--nm-a1)); }
.nm-mini-cover-glow { position: absolute; inset: -5px; border-radius: 50%; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--nm-a1) 55%, transparent), transparent 75%); transition: opacity 500ms var(--ease-out); }
body.is-playing .nm-mini-cover-glow { opacity: 1; animation: nmPulse 2.4s ease-in-out infinite; }
@keyframes nmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* Judul & artis: selalu terbaca */
.nm-mp-meta { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nm-mp-title { color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .005em; }
.nm-mp-artist { color: rgba(255,255,255,.62); font-size: 11.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-mp-artist:empty { display: none; }

.nm-mp-ctrl { display: flex; align-items: center; gap: 4px; flex: none; }
.nm-mp-like { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: rgba(255,255,255,.6); background: none; border: 0; cursor: pointer; transition: transform 250ms var(--ease-spring), color 200ms; }
.nm-mp-like:active { transform: scale(.82); }
.nm-mp-playwrap { background: none; border: 0; padding: 0; cursor: pointer; }
.nm-mp-play { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #0b0c10; background: #fff;
  box-shadow: 0 6px 18px -6px var(--nm-a1), 0 0 0 1px rgba(255,255,255,.4) inset; transition: transform 220ms var(--ease-spring); }
.nm-mp-playwrap:active .nm-mp-play { transform: scale(.88); }
body.is-playing .nm-mp-play { animation: nmBeat 1.8s ease-in-out infinite; }
@keyframes nmBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
#mini-play-btn .animate-spin { border-color: #0b0c10 !important; border-top-color: transparent !important; }
#mini-play-btn svg, #mini-play-btn i { color: #0b0c10; }

/* Equalizer kecil */
.nm-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; width: 18px; flex: none; }
.nm-eq i { flex: 1; height: 100%; border-radius: 2px; transform-origin: bottom; transform: scaleY(.16); background: linear-gradient(to top, var(--nm-a1), var(--nm-a2)); transition: transform 300ms var(--ease-out); }
body.is-playing .nm-eq i { animation: nmEq 900ms ease-in-out infinite; }
body.is-playing .nm-eq i:nth-child(2) { animation-duration: 720ms; animation-delay: -200ms; }
body.is-playing .nm-eq i:nth-child(3) { animation-duration: 1050ms; animation-delay: -450ms; }
body.is-playing .nm-eq i:nth-child(4) { animation-duration: 810ms; animation-delay: -100ms; }
@keyframes nmEq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }


/* Overlay "NEXT" */
.nm-mp-next { position: absolute !important; inset: 0; z-index: 5 !important; display: flex; align-items: center; gap: 12px; padding: 10px 12px 13px 11px; border-radius: inherit; background: #101119; opacity: 0; pointer-events: none; }
.nm-mp-art-sm { width: 46px; height: 46px; }
.nm-mp-badge { flex: none; font-size: 9px; font-weight: 900; color: #fff; background: rgba(255,255,255,.14); padding: 3px 9px; border-radius: 99px; margin-right: 48px; }

/* ---------- Home ---------- */
.nm-greet { position: relative; padding: 6px 2px 2px; }
.nm-greet-sub { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.nm-greet-title {
  margin-top: 4px; font-size: 26px; line-height: 1.15; font-weight: 900; letter-spacing: -.01em;
  background: linear-gradient(100deg, #fff 0%, #fff 35%, var(--nm-a1) 55%, var(--nm-a2) 75%, #fff 100%); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: nmShine 7s linear infinite;
}
@keyframes nmShine { to { background-position: -240% 0; } }
.nm-greet-wave { display: flex; align-items: center; gap: 3px; height: 22px; margin-top: 12px; opacity: .9; }
.nm-greet-wave i { width: 3px; height: 100%; border-radius: 3px; background: linear-gradient(to top, var(--nm-a1), var(--nm-a2)); transform: scaleY(.25); transform-origin: center; animation: nmWave 1.6s ease-in-out infinite; opacity: .75; }
.nm-greet-wave i:nth-child(3n) { animation-duration: 1.2s; } .nm-greet-wave i:nth-child(3n+1) { animation-duration: 2s; }
.nm-greet-wave i:nth-child(2n) { animation-delay: -.5s; } .nm-greet-wave i:nth-child(5n) { animation-delay: -1s; }
body.is-playing .nm-greet-wave i { animation-duration: .8s; }
@keyframes nmWave { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

#view-home h2.text-lg { position: relative; padding-bottom: 6px; }
#view-home h2.text-lg::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 34px; border-radius: 2px; background: linear-gradient(90deg, var(--nm-a1), transparent); transform-origin: left; animation: nmGrow 900ms var(--ease-out) 300ms backwards; }
@keyframes nmGrow { from { transform: scaleX(0); } }

.home-grid-card { position: relative; overflow: hidden; transition: transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-out), background 260ms var(--ease-out) !important; }
.home-grid-card img { transition: transform 500ms var(--ease-out); }
@media (hover: hover) { .home-grid-card:hover { transform: translate3d(0,-3px,0); box-shadow: 0 14px 30px -12px rgba(0,0,0,.7), 0 8px 26px -18px var(--nm-a1); } .home-grid-card:hover img { transform: scale(1.08) rotate(-1.5deg); } }
.home-grid-card:active img { transform: scale(.96); }
#home-scroll, #home-artists { scroll-snap-type: x proximity; scroll-padding-left: 2px; }
#home-scroll > *, #home-artists > * { scroll-snap-align: start; }
#home-scroll img, #home-artists img { transition: transform 500ms var(--ease-out), filter 300ms; }
@media (hover: hover) { #home-scroll > *:hover img, #home-artists > *:hover img { transform: scale(1.06); } }
.home-chip-btn { transition: transform 300ms var(--ease-spring), background 240ms, color 240ms, box-shadow 240ms !important; }
.home-chip-btn:active { transform: scale(.93); }

/* ---------- Transisi berurutan ---------- */
.nm-st { animation: nmRise 640ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes nmRise { from { opacity: 0; transform: translate3d(0,26px,0) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.glass-card, .glass-hover { transition: transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-out), background 260ms var(--ease-out) !important; }
@media (hover: hover) { .glass-card:hover { transform: translate3d(0,-3px,0); box-shadow: 0 16px 36px -12px rgba(0,0,0,.65); } }


@media (prefers-reduced-motion: reduce) {
  .app-bg::before, .app-bg::after, .nm-dock::before, .nm-dock-pill::before, .nm-mp, .nm-mp::before, #mini-player::after, #mini-cover,
  .nm-mini-cover-glow, .nm-eq i, .nm-mp-play, .nm-st, .nm-greet-title, .nm-greet-wave i { animation: none !important; }
}


/* ==========================================================
   v8 — Search real-time + optimasi kehalusan
   ========================================================== */
#search-results { transition: opacity .16s ease; }
#search-results.is-stale { opacity: .45; pointer-events: none; }
/* Baris hasil: render ditunda saat di luar layar -> scroll daftar panjang tetap 60fps */
.search-song-item { content-visibility: auto; contain-intrinsic-size: auto 68px; transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important; }
.search-grid > div { content-visibility: auto; contain-intrinsic-size: auto 190px; }
#suggestions > div { transition: background-color .12s ease; }
#filter-tabs .filter-tab { -webkit-tap-highlight-color: transparent; }
#filter-tabs .filter-tab:active { transform: scale(.96); }
#search-input { -webkit-appearance: none; appearance: none; }

/* Scroll & sentuhan lebih responsif */
#main-area { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto; contain: layout style; }
button, [onclick], .nm-nav-item { touch-action: manipulation; }
img { image-rendering: auto; }
@media (prefers-reduced-motion: reduce) {
  #search-results, .search-song-item { transition: none !important; }
}

/* ===== v9: pencarian rapi, satu tombol X ===== */
#search-input::-webkit-search-cancel-button, #search-input::-webkit-search-decoration, #search-input::-ms-clear { display: none; -webkit-appearance: none; }
.nm-search-head { background: linear-gradient(180deg, rgba(8,9,13,.98), rgba(8,9,13,.9)); border-bottom: 1px solid rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nm-search-box { display: flex; align-items: center; height: 48px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.nm-search-box:focus-within { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.nm-search-ico { display: grid; place-items: center; width: 44px; flex: none; color: rgba(255,255,255,.6); }
.nm-search-input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: #fff; font-size: 15px; font-weight: 500; }
.nm-search-input::placeholder { color: rgba(255,255,255,.42); }
.nm-search-x { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; transition: transform .15s ease, background-color .15s ease; }
.nm-search-x:active { transform: scale(.85); background: rgba(255,255,255,.28); }
.nm-search-x.hidden { display: none; }
.nm-suggest { position: absolute; left: 16px; right: 16px; top: calc(100% - 4px); border-radius: 16px; overflow: hidden; background: #1b1d26; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px rgba(0,0,0,.6); animation: nmSugIn .16s ease-out; }
.nm-suggest.hidden { display: none; }
@keyframes nmSugIn { from { opacity: 0; transform: translate3d(0,-6px,0); } to { opacity: 1; transform: none; } }
.nm-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.nm-filter.hidden { display: none; }
.nm-filter::-webkit-scrollbar { display: none; }
.nm-filter .filter-tab { flex: none; padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.72); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.nm-filter .filter-tab.active { color: #000; font-weight: 800; background: #fff; border-color: #fff; }

/* ===== v9: efek putih navbar menyapu sampai ujung ===== */
.nm-dock-pill { overflow: hidden; }
.nm-dock-pill::before { background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.34) 50%, transparent 70%); width: 100%; transform: translate3d(-110%,0,0); animation: nmSheen 4s ease-in-out 1s infinite; }
@keyframes nmSheen { 0%, 55% { transform: translate3d(-110%,0,0); } 100% { transform: translate3d(110%,0,0); } }
.nm-dock-pill.stretch::before { animation: nmSheenGo 620ms cubic-bezier(.3,.7,.2,1) 1; }
@keyframes nmSheenGo { from { transform: translate3d(-110%,0,0); } to { transform: translate3d(110%,0,0); } }
.nm-ripple { background: radial-gradient(circle, rgba(255,255,255,.38), rgba(255,255,255,.12) 60%, transparent 72%); transform: scale(0); opacity: 1; animation: nmRipple 620ms cubic-bezier(.2,.7,.2,1) forwards; will-change: transform, opacity; }
@keyframes nmRipple { 0% { transform: scale(0); opacity: 1; } 70% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }

/* ===== v9: ringan — jeda animasi dekoratif saat tidak terlihat / perangkat hemat ===== */
html.tab-hidden .nm-dock::before, html.tab-hidden .nm-dock-pill::before { animation-play-state: paused; }
.nm-dock { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
@media (max-width: 480px) { .nm-dock::before { animation-duration: 12s; } }
.nm-search-head, .nm-dock { transform: translateZ(0); }