/* ============================================
   MUSIC MOOD MAP — Vinyl Records Edition
   Every pixel considered. Every transition flows.
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #f5f6ee;
  --glass-bg: rgba(18, 18, 18, 0.72);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-blur: 20px;
  --text-primary: #e5e5e5;
  --text-secondary: #737373;
  --accent: rgba(255, 255, 255, 0.08);
  --accent-hover: rgba(255, 255, 255, 0.12);
  --vinyl-size: 140px;
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

/* ============================================
   NAVIGATION BAR
   ============================================ */

#nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  max-width: 90vw;
}

.nav-left { padding: 0 10px; }

.nav-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
  white-space: nowrap;
  font-family: inherit;
}

.nav-btn:hover {
  background: var(--accent-hover);
  color: var(--text-primary);
}

.nav-btn-icon {
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-secondary);
  pointer-events: none;
}

#search {
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 12px 7px 30px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  width: 180px;
  outline: none;
  transition: all 0.3s var(--ease-smooth);
}

#search::placeholder { color: var(--text-secondary); }

#search:focus {
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, 0.08);
  width: 220px;
}

/* ============================================
   VIEWPORT & CANVAS
   ============================================ */

#viewport {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
  position: relative;
  background: var(--bg);
}

#viewport.grabbing { cursor: grabbing; }

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* ============================================
   VINYL TILE
   ============================================ */

.tile {
  position: absolute;
  /* width/height set inline per tile (130px regular, 170px featured) */
  cursor: pointer;
  contain: layout style;
  transform: scale(0);
  opacity: 0;
  transition:
    transform 0.9s var(--ease-out),
    opacity 0.7s var(--ease-out);
  border-radius: 50%;
  overflow: visible;
  background: none;
  /* 3D tilt perspective */
  perspective: 400px;
}

.tile.entered {
  transform: scale(1);
  opacity: 1;
}

/* Shadow on all tiles — uses drop-shadow so it follows circle shape and scales with transform */
.tile {
  filter: drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.38))
          drop-shadow(8px 14px 18px rgba(0, 0, 0, 0.26));
}

.tile:hover {
  z-index: 10;
}

/* 3D tilt + lift — controlled via JS custom properties */
.vinyl {
  transform-style: preserve-3d;
}

.tile:hover .vinyl {
  /* Tilt values set by JS: --tilt-x, --tilt-y */
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    scale3d(1.08, 1.08, 1.08);
  box-shadow: none;
}

.tile.featured {
  filter: drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.32))
          drop-shadow(8px 14px 18px rgba(0, 0, 0, 0.2));
}

/* ── The vinyl disc ────────────────────── */

.vinyl {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background:
    /* Base vinyl color */
    hsl(
      var(--vinyl-hue, 0),
      var(--vinyl-sat, 0%),
      var(--vinyl-light, 12%)
    );
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}

/* ── Groove arcs — organic hand-drawn lines ── */

.vinyl::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* Organic groove arcs — conic sweeps that look hand-drawn */
    conic-gradient(from 10deg at 50% 50%,
      transparent 0deg,
      rgba(255, 255, 255, 0.06) 15deg,
      rgba(255, 255, 255, 0.1) 40deg,
      rgba(255, 255, 255, 0.06) 70deg,
      transparent 100deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.04) 200deg,
      rgba(255, 255, 255, 0.08) 220deg,
      rgba(255, 255, 255, 0.04) 250deg,
      transparent 280deg,
      transparent 360deg
    ),
    /* Fine groove rings — subtle concentric lines */
    repeating-radial-gradient(
      circle at center,
      transparent 0px,
      transparent 2.5px,
      rgba(255, 255, 255, 0.035) 2.5px,
      rgba(255, 255, 255, 0.035) 3px,
      transparent 3px,
      transparent 4.5px
    );
  /* Mask — grooves only between label and outer edge */
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent 28%,
    black 32%,
    black 92%,
    transparent 95%
  );
  mask-image: radial-gradient(
    circle at center,
    transparent 28%,
    black 32%,
    black 92%,
    transparent 95%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s var(--ease-out);
}

/* ── Brushstroke reflections ──────────────── */

.vinyl::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* Primary brushstroke — broad arc highlight */
    conic-gradient(from 140deg at 50% 50%,
      transparent 0deg,
      rgba(255, 255, 255, 0.04) 10deg,
      rgba(255, 255, 255, 0.14) 25deg,
      rgba(255, 255, 255, 0.18) 40deg,
      rgba(255, 255, 255, 0.12) 55deg,
      rgba(255, 255, 255, 0.03) 70deg,
      transparent 85deg,
      transparent 360deg
    ),
    /* Secondary brushstroke — softer opposing arc */
    conic-gradient(from 320deg at 50% 50%,
      transparent 0deg,
      rgba(255, 255, 255, 0.03) 15deg,
      rgba(255, 255, 255, 0.08) 30deg,
      rgba(255, 255, 255, 0.03) 50deg,
      transparent 65deg,
      transparent 360deg
    );
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.5s var(--ease-out);
}

.tile:hover .vinyl::after {
  opacity: 1.5;
}

.tile:hover .vinyl::before {
  opacity: 1.4;
}

/* ── Grain texture overlay ─────────────── */

.vinyl-grain {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: var(--noise-texture);
  background-size: 150px 150px;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 5;
}

/* ── Center label (album art) ──────────── */

.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54%;
  height: 54%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;
  background: #1a1a1a;
}

.vinyl-label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
}

.vinyl-label img.loaded {
  opacity: 1;
}

/* ── Center hole ───────────────────────── */

.vinyl-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a1a1a;
  z-index: 4;
  box-shadow:
    inset 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 0 0.5px rgba(255, 255, 255, 0.08);
}

/* ── Loading state ─────────────────────── */

.vinyl.loading {
  animation: vinyl-pulse 2s ease-in-out infinite;
  animation-play-state: running;
}

.vinyl.loading::before,
.vinyl.loading::after {
  display: none;
}

@keyframes vinyl-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* ── LOD: Level of Detail ──────────────── */

/* LOD 0: Zoomed way out — simple dot */
#canvas.lod-0 .vinyl::before,
#canvas.lod-0 .vinyl::after,
#canvas.lod-0 .vinyl-label,
#canvas.lod-0 .vinyl-hole,
#canvas.lod-0 .vinyl-grain {
  display: none;
}

#canvas.lod-0 .vinyl {
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.1);
}

#canvas.lod-0 .tile {
  transition: none;
}

#canvas.lod-0 .tile:hover {
  transform: none;
}

/* LOD 1: Mid zoom — simplified shine, keep grooves */
#canvas.lod-1 .vinyl::after {
  background:
    conic-gradient(from 140deg at 50% 50%,
      transparent 0deg,
      rgba(255, 255, 255, 0.12) 30deg,
      rgba(255, 255, 255, 0.04) 60deg,
      transparent 80deg,
      transparent 360deg
    );
}


#canvas.lod-1 .vinyl {
  box-shadow:
    4px 6px 12px rgba(0, 0, 0, 0.1),
    8px 14px 28px rgba(0, 0, 0, 0.06);
}

/* LOD 2: Full detail — default styles above */

/* ── Highlight/Dim for search ──────────── */

.tile.highlighted {
  transform: scale(1.15);
  z-index: 20;
}

.tile.highlighted .vinyl {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.2),
    6px 10px 20px rgba(0, 0, 0, 0.15),
    14px 24px 48px rgba(0, 0, 0, 0.1);
}

.tile.dimmed {
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-smooth);
}


/* ============================================
   IN-CANVAS SONG INFO PANEL
   ============================================ */

.song-info {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 140px;
  max-width: 180px;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  pointer-events: none;
}

.song-info.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: all;
}

.song-info-name {
  font-size: 11px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.song-info-artist {
  font-size: 10px;
  color: #888;
  font-weight: 400;
  margin-bottom: 4px;
}

.song-info-meta {
  font-size: 10px;
  color: #aaa;
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.song-info-meta span {
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Audio controls */
.song-info-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.song-info-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s var(--ease-out);
}

.song-info-play:hover {
  background: rgba(0, 0, 0, 0.06);
}

.song-info-play svg {
  width: 12px;
  height: 12px;
}

.song-info-progress {
  flex: 1;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.song-info-progress-bar {
  width: 0%;
  height: 100%;
  background: #1a1a1a;
  border-radius: 2px;
  transition: width 0.1s linear;
  position: relative;
}

.song-info-progress-bar::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a1a1a;
}

.song-info-time {
  font-size: 8px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}

.song-info-spotify {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30, 215, 96, 0.1);
  color: #1a8f4e;
  border: 1px solid rgba(30, 215, 96, 0.2);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  font-family: inherit;
  transition: all 0.25s var(--ease-out);
  width: fit-content;
}

.song-info-spotify:hover {
  background: rgba(30, 215, 96, 0.18);
}

/* Larger text for featured vinyls */
.song-info-lg .song-info-name {
  font-size: 13px;
}

.song-info-lg .song-info-artist {
  font-size: 11px;
}

.song-info-lg .song-info-play {
  width: 32px;
  height: 32px;
}

.song-info-lg .song-info-time {
  font-size: 9px;
}

/* Active tile state when info is open */
.tile.active {
  z-index: 40;
}

.tile.active .vinyl {
  animation: vinyl-spin 4s linear infinite;
}

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

/* ============================================
   SEARCH RESULTS
   ============================================ */

#search-results {
  position: fixed;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  max-height: 320px;
  width: 280px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-smooth);
}

#search-results.visible {
  opacity: 1;
  pointer-events: all;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s var(--ease-smooth);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--accent-hover); }

.search-result-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.search-result-info { min-width: 0; }

.search-result-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-artist {
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

#search-results::-webkit-scrollbar { width: 4px; }
#search-results::-webkit-scrollbar-track { background: transparent; }
#search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 700px) {
  .nav-title { display: none; }
  .nav-left { display: none; }
  #search { width: 120px; }
  #search:focus { width: 150px; }
}