/* Musify — layar pembuka gaya iOS (#nm-loader) + bar loading global (#nm-topbar). Logika: js/core/loader.js */
:root { --ios: cubic-bezier(.32, .72, 0, 1); }

#nm-loader {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 38%, #15161d 0%, #060608 70%);
  transition: opacity .55s var(--ios), transform .55s var(--ios), visibility 0s linear .55s;
}
#nm-loader.is-leaving { opacity: 0; transform: scale(1.06); visibility: hidden; pointer-events: none; }

.nmL-center { display: flex; flex-direction: column; align-items: center; transform: translateY(-4vh); transition: transform .55s var(--ios); }
#nm-loader.is-leaving .nmL-center { transform: translateY(-4vh) scale(.94); }

/* ikon aplikasi: squircle ala iOS, muncul dengan blur -> tajam */
.nmL-icon {
  position: relative; width: 112px; height: 112px; border-radius: 25.2%; overflow: hidden; background: #000;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.14), 0 18px 40px -8px rgba(0,0,0,.7), 0 0 60px -10px rgba(255,122,26,.25);
  opacity: 0; transform: scale(.82); filter: blur(10px);
  animation: nmLIcon .8s var(--ios) .05s forwards;
}
.nmL-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nmL-icon::after { /* kilau sekali lewat */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%); animation: nmLShine 1.1s var(--ios) .7s forwards;
}
@keyframes nmLIcon { to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes nmLShine { to { transform: translateX(120%); } }

.nmL-title {
  margin: 22px 0 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  opacity: 0; transform: translateY(8px); animation: nmLUp .7s var(--ios) .3s forwards;
}
/* progres tipis seperti iOS */
.nmL-track { width: 96px; height: 3px; margin-top: 26px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; opacity: 0; animation: nmLUp .6s var(--ios) .5s forwards; }
.nmL-track i { display: block; height: 100%; border-radius: 3px; background: #fff; transform-origin: left center; transform: scaleX(0); transition: transform .5s var(--ios); }
@keyframes nmLUp { to { opacity: 1; transform: none; } }

/* aplikasi "terbuka": zoom halus dari sedikit mengecil */
body.nm-enter #main-area { animation: nmLOpen .65s var(--ios) both; }
@keyframes nmLOpen { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }

/* bar loading global */
#nm-topbar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2.5px; z-index: 9998; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
#nm-topbar.on { opacity: 1; }
#nm-topbar i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); transition: transform .3s var(--ios);
  background: linear-gradient(90deg, #ff7a1a, #ff4081); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(255,64,129,.55); }

@media (prefers-reduced-motion: reduce) {
  .nmL-icon, .nmL-title, .nmL-track { animation: none; opacity: 1; transform: none; filter: none; }
  .nmL-icon::after { display: none; }
  #nm-loader, #nm-loader .nmL-center { transition-duration: .01s; }
  body.nm-enter #main-area { animation: none; }
}