/* File: css/style.css */

/* Grain Overlay Effect for Indie Aesthetic */
.bg-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Equalizer Bar Animation - GPU Accelerated via scaleY to prevent layout shift */
.eq-bars {
  height: 20px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}

.eq-bars span {
  width: 5px;
  height: 20px;
  border-radius: 2px;
  transform-origin: bottom;
  will-change: transform;
}

#loading-screen .animate-eq-1,
#loading-screen .animate-eq-2,
#loading-screen .animate-eq-3,
#loading-screen .animate-eq-4 {
  transform-origin: center;
  will-change: transform;
}

@keyframes eqBar {
  0%, 100% {
    transform: scaleY(0.2);
  }
  50% {
    transform: scaleY(1);
  }
}

.animate-eq-1 {
  animation: eqBar 0.8s infinite ease-in-out;
}

.animate-eq-2 {
  animation: eqBar 0.6s infinite ease-in-out 0.2s;
}

.animate-eq-3 {
  animation: eqBar 0.9s infinite ease-in-out 0.4s;
}

.animate-eq-4 {
  animation: eqBar 0.7s infinite ease-in-out 0.1s;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F4EFE6;
}

.dark ::-webkit-scrollbar-track {
  background: #1E1E1E;
}

::-webkit-scrollbar-thumb {
  background: #D96B27;
  border-radius: 4px;
}


/* ---------- Peningkatan UX ---------- */
:root { --accent: 190 80 24; }
.dark { --accent: 217 107 39; }

html { scroll-padding-top: 6rem; }

:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
}

/* Piringan hitam berhenti di posisi terakhir saat jeda */
.vinyl-spin {
  animation: vinylSpin 6s linear infinite;
  animation-play-state: paused;
  transform-origin: center;
  will-change: transform;
}
.is-playing .vinyl-spin { animation-play-state: running; }
@keyframes vinylSpin { to { transform: rotate(360deg); } }

/* Equalizer hanya bergerak saat musik diputar */
.eq-bars:not(.on) > * { animation-play-state: paused; }

/* Mini player muncul setelah lagu pertama diputar */
#mini-player { visibility: hidden; transform: translateY(100%); }
body.has-player #mini-player { visibility: visible; transform: none; }
body.has-player { padding-bottom: 4.5rem; }
body.has-player #to-top { bottom: 5.5rem; }

/* Navigasi aktif */
.nav-link { position: relative; padding-bottom: 4px; }
.nav-link.active { color: rgb(var(--accent)); }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgb(var(--accent));
  border-radius: 2px;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Identitas visual: arsip kaset, nada editorial ---------- */
.dark .text-stone-500 { color: #a8a29e; }
#loading-screen, footer { --accent: 217 107 39; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
h1, h3.font-serif { letter-spacing: -0.02em; font-optical-sizing: auto; }

/* Label bagian: garis pendek sebagai penanda, bukan huruf kapital renggang */
section h2.text-xs {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .875rem !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-weight: 600;
  margin-bottom: .9rem !important;
}
section h2.text-xs::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

/* Kartu: garis tipis dan bayangan berlapis yang halus */
.rounded-2xl.border {
  box-shadow: 0 1px 0 rgb(60 40 20 / .04), 0 18px 36px -22px rgb(60 40 20 / .28);
}
.dark .rounded-2xl.border { box-shadow: none; }

/* Foto dari sumber berbeda disatukan oleh olah warna hangat yang sama */
.group img, #album-grid img, #gallery-grid img, #memory-board img {
  filter: sepia(.16) saturate(.92) contrast(1.04);
}

/* Hero */
.halftone {
  background-image: radial-gradient(55% 60% at 82% 18%, rgb(217 107 39 / .12), transparent 70%);
}
.dark .halftone {
  background-image: radial-gradient(55% 60% at 82% 18%, rgb(217 107 39 / .10), transparent 70%);
}
.poster-frame {
  border: 8px solid #fff;
  box-shadow: 0 40px 70px -30px rgb(60 30 10 / .55);
}
.dark .poster-frame { border-color: #1E1E1E; box-shadow: 0 40px 70px -30px rgb(0 0 0 / .8); }
.poster-frame img { filter: grayscale(.15) sepia(.1) contrast(1.05); }

.cassette-drop { animation: dropIn .9s cubic-bezier(.2, .9, .3, 1.15) .5s both; }
@keyframes dropIn {
  from { transform: translateY(-50px) rotate(-10deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.reel {
  transform-box: fill-box;
  transform-origin: center;
  animation: vinylSpin 2.4s linear infinite;
  animation-play-state: paused;
}
.is-playing .reel { animation-play-state: running; }