/* ==========================================================================
   UNMUSIC v3 — motion
   Semua gerak pakai transform/opacity/filter saja (GPU-friendly).
   ========================================================================== */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes dock-in {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-out {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

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

@keyframes bounce {
  0% {
    height: 22%;
  }
  100% {
    height: 100%;
  }
}

@keyframes heart-pop {
  0% {
    transform: scale(1);
  }
  38% {
    transform: scale(1.42);
  }
  62% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ambient blobs — pelan, tidak pernah sinkron */
@keyframes drift-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(6vw, -5vh, 0) scale(1.14);
  }
  100% {
    transform: translate3d(-4vw, 4vh, 0) scale(1.04);
  }
}

@keyframes drift-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1.06);
  }
  50% {
    transform: translate3d(-7vw, 6vh, 0) scale(0.94);
  }
  100% {
    transform: translate3d(5vw, -3vh, 0) scale(1.1);
  }
}

@keyframes drift-c {
  0% {
    transform: translate3d(0, 0, 0) scale(0.96);
  }
  50% {
    transform: translate3d(4vw, 7vh, 0) scale(1.2);
  }
  100% {
    transform: translate3d(-6vw, -5vh, 0) scale(1);
  }
}

/* --------------------------------------------------- utilitas masuk berurut */
.stagger > * {
  animation: pop-in var(--dur-3) var(--ease-out) both;
}
.stagger > *:nth-child(1) {
  animation-delay: 20ms;
}
.stagger > *:nth-child(2) {
  animation-delay: 55ms;
}
.stagger > *:nth-child(3) {
  animation-delay: 90ms;
}
.stagger > *:nth-child(4) {
  animation-delay: 125ms;
}
.stagger > *:nth-child(5) {
  animation-delay: 160ms;
}
.stagger > *:nth-child(6) {
  animation-delay: 195ms;
}
.stagger > *:nth-child(7) {
  animation-delay: 225ms;
}
.stagger > *:nth-child(8) {
  animation-delay: 255ms;
}
.stagger > *:nth-child(n + 9) {
  animation-delay: 280ms;
}

.is-liked svg {
  animation: heart-pop var(--dur-3) var(--ease-spring);
}

/* ------------------------------------------------------- hemat gerak (a11y) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ambient__blob {
    animation: none !important;
  }
  .lyric-line {
    filter: none !important;
    transform: none !important;
  }
  /* tanpa animasi: baris aktif langsung terang penuh */
  .lyric-line.is-active[data-text]::after {
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
  .lyric-line.is-active {
    transform: none !important;
  }
}

/* sapuan lirik: dibuka dari kiri ke kanan, sekali jalan */
@keyframes lyric-sweep {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}