/* ==========================================================================
   skin-darkmatter.css — WINAMP 2026
   Dark Matter Skin: Deep space, dark nebula, cosmic void.
   Activated via body.darkmatter-active
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframe Animations
   -------------------------------------------------------------------------- */

/* Slow star-field drift — 30s cycle */
@keyframes dm-star-drift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%; }
  25%  { background-position: 15% 30%, 25% 10%, 10% 20%; }
  50%  { background-position: 30% 60%, 50% 25%, 25% 45%; }
  75%  { background-position: 50% 35%, 75% 50%, 40% 30%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
}

/* Nebula glow pulse on LCD — 6s */
@keyframes dm-nebula-pulse {
  0%, 100% { box-shadow: inset 0 0 20px rgba(60, 120, 220, 0.06),
                          inset 0 0 40px rgba(40, 60, 140, 0.03); }
  50%      { box-shadow: inset 0 0 30px rgba(60, 120, 220, 0.12),
                          inset 0 0 50px rgba(40, 60, 140, 0.06); }
}

/* Play button blue pulse when active */
@keyframes dm-play-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(70, 140, 255, 0.4),
                          0 0 20px rgba(70, 140, 255, 0.15),
                          inset 0 0 10px rgba(70, 140, 255, 0.08); }
  50%      { box-shadow: 0 0 14px rgba(70, 140, 255, 0.6),
                          0 0 30px rgba(70, 140, 255, 0.25),
                          inset 0 0 14px rgba(70, 140, 255, 0.12); }
}

/* --------------------------------------------------------------------------
   1. Player Container — Deep space radial gradient, nebula outer glow
   -------------------------------------------------------------------------- */
body.darkmatter-active .player {
  background:
    radial-gradient(ellipse at 50% 40%, #0c0e1a 0%, #060810 50%, #020204 100%);
  border-color: rgba(60, 100, 180, 0.15);
  box-shadow:
    0 0 40px rgba(40, 80, 160, 0.08),
    0 0 80px rgba(30, 60, 120, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(80, 130, 220, 0.04);
}

/* --------------------------------------------------------------------------
   2. Title Bar — Dark with blue gradient and star-field pseudo-element
   -------------------------------------------------------------------------- */
body.darkmatter-active .title-bar {
  background: linear-gradient(180deg, #0e1020 0%, #080a16 100%);
  border-bottom-color: rgba(60, 100, 180, 0.12);
  position: relative;
  overflow: hidden;
}

/* Star field effect — scattered tiny dots via radial gradients */
body.darkmatter-active .title-bar::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 300%;
  height: 300%;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 65%, rgba(200, 220, 255, 0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 15%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 80%, rgba(180, 200, 255, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 35%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 45%, rgba(220, 230, 255, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 75%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 50%, rgba(200, 210, 255, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 90%, rgba(180, 200, 255, 0.4) 0%, transparent 100%);
  background-size: 200px 100px;
  animation: dm-star-drift 30s linear infinite;
}

/* Ensure title bar text sits above star field */
body.darkmatter-active .title-bar > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3. LCD Section — Cool blue phosphor, nebula overlay, deep void inset
   -------------------------------------------------------------------------- */
body.darkmatter-active .lcd-section {
  background:
    linear-gradient(135deg, rgba(40, 50, 100, 0.06) 0%, rgba(60, 40, 100, 0.04) 50%, transparent 100%),
    linear-gradient(180deg, #060810 0%, #0a0c18 100%);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 0 20px rgba(60, 120, 220, 0.06),
    inset 0 0 40px rgba(40, 60, 140, 0.03);
  animation: dm-nebula-pulse 6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   4. Transport Buttons — Dark glass with blue edge glow
   -------------------------------------------------------------------------- */
body.darkmatter-active .transport-btn {
  background: rgba(10, 14, 30, 0.7);
  border-color: rgba(60, 100, 180, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.darkmatter-active .transport-btn:hover {
  border-color: rgba(70, 140, 255, 0.5);
  box-shadow: 0 0 10px rgba(70, 140, 255, 0.2);
}

body.darkmatter-active .transport-btn:active {
  background: rgba(6, 8, 20, 0.85);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Play button — stronger blue edge */
body.darkmatter-active .transport-btn.play-btn {
  border-color: rgba(70, 140, 255, 0.3);
}

body.darkmatter-active .transport-btn.play-btn:hover {
  border-color: rgba(70, 140, 255, 0.6);
  box-shadow: 0 0 14px rgba(70, 140, 255, 0.3);
}

/* Playing state — blue pulse animation */
body.darkmatter-active .transport-btn.play-btn.is-playing {
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.8), rgba(10, 14, 30, 0.9));
  border-color: rgba(70, 140, 255, 0.5);
  animation: dm-play-pulse 2.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   5. Visualizer — Deeper black with blue nebula inner glow, particle overlay
   -------------------------------------------------------------------------- */
body.darkmatter-active .viz-container {
  background: #030408;
}

body.darkmatter-active .viz-container::before {
  box-shadow:
    inset 0 0 16px rgba(40, 80, 180, 0.08),
    inset 0 0 4px rgba(0, 0, 0, 0.5);
}

body.darkmatter-active .viz-container.is-expanded::before {
  box-shadow:
    inset 0 0 30px rgba(40, 80, 180, 0.1),
    inset 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Subtle particle-like dot overlay */
body.darkmatter-active .viz-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(100, 160, 255, 0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 70%, rgba(140, 180, 255, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 20%, rgba(100, 140, 220, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 85%, rgba(120, 160, 255, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 45%, rgba(160, 190, 255, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 60%, rgba(80, 130, 220, 0.3) 0%, transparent 100%);
  background-size: 150px 80px;
}

/* --------------------------------------------------------------------------
   6. EQ Panel — Glass morphism with blur
   -------------------------------------------------------------------------- */
body.darkmatter-active .eq-panel {
  background: rgba(8, 10, 22, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top-color: rgba(60, 100, 180, 0.1);
}

/* --------------------------------------------------------------------------
   7. Playlist — Cosmic blue glow on playing track, nebula scrollbar
   -------------------------------------------------------------------------- */
body.darkmatter-active .playlist-panel {
  background: #050710;
}

body.darkmatter-active .playlist-header {
  background: rgba(8, 10, 22, 0.8);
  border-bottom-color: rgba(60, 100, 180, 0.1);
}

body.darkmatter-active .playlist-tracks {
  background: #040608;
}

/* Playing track — blue cosmic glow */
body.darkmatter-active .playlist-track.is-playing {
  background: rgba(40, 80, 180, 0.08);
}

body.darkmatter-active .playlist-track.is-playing::before {
  background: rgba(70, 140, 255, 0.6);
  box-shadow: 0 0 8px rgba(70, 140, 255, 0.4);
}

body.darkmatter-active .playlist-track:hover {
  background: rgba(40, 80, 180, 0.05);
}

/* Scrollbar — nebula gradient */
body.darkmatter-active .playlist-tracks::-webkit-scrollbar {
  width: 6px;
}

body.darkmatter-active .playlist-tracks::-webkit-scrollbar-track {
  background: #040608;
}

body.darkmatter-active .playlist-tracks::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(40, 70, 140, 0.4) 0%,
    rgba(60, 50, 120, 0.35) 50%,
    rgba(40, 70, 140, 0.4) 100%);
  border-radius: 3px;
}

body.darkmatter-active .playlist-tracks::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(60, 100, 180, 0.55) 0%,
    rgba(80, 70, 160, 0.5) 50%,
    rgba(60, 100, 180, 0.55) 100%);
}

/* Firefox scrollbar */
body.darkmatter-active .playlist-tracks {
  scrollbar-color: rgba(40, 70, 140, 0.4) #040608;
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   8. Feature Bar — Semi-transparent with blur
   -------------------------------------------------------------------------- */
body.darkmatter-active .feature-bar {
  background: rgba(8, 10, 22, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top-color: rgba(60, 100, 180, 0.1);
}

/* --------------------------------------------------------------------------
   FX Panel — Consistent glass morphism
   -------------------------------------------------------------------------- */
body.darkmatter-active .fx-panel {
  background: rgba(8, 10, 22, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top-color: rgba(60, 100, 180, 0.1);
}

/* --------------------------------------------------------------------------
   Seek bar — Blue nebula fill glow
   -------------------------------------------------------------------------- */
body.darkmatter-active .seek-fill {
  box-shadow: 0 0 10px rgba(70, 140, 255, 0.3);
}

body.darkmatter-active .seek-bar:hover .seek-thumb {
  box-shadow:
    0 0 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(70, 140, 255, 0.35);
}

/* --------------------------------------------------------------------------
   Chrome dots — Dim blue tint
   -------------------------------------------------------------------------- */
body.darkmatter-active .chrome-dot {
  background: rgba(50, 80, 140, 0.3);
  border-color: rgba(60, 100, 180, 0.08);
}

/* --------------------------------------------------------------------------
   Player grip — Subtle blue
   -------------------------------------------------------------------------- */
body.darkmatter-active .player-grip {
  background: rgba(6, 8, 16, 0.8);
}

body.darkmatter-active .player-grip span {
  background: rgba(50, 80, 140, 0.25);
}

/* --------------------------------------------------------------------------
   9. Reduced Motion — Disable all animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.darkmatter-active .title-bar::before {
    animation: none;
  }

  body.darkmatter-active .lcd-section {
    animation: none;
  }

  body.darkmatter-active .transport-btn.play-btn.is-playing {
    animation: none;
    box-shadow:
      0 0 8px rgba(70, 140, 255, 0.4),
      0 0 20px rgba(70, 140, 255, 0.15),
      inset 0 0 10px rgba(70, 140, 255, 0.08);
  }
}