/**
* @name OnyxPlayer
* @version 1.0.2
* @author OnyxProject
* @description Custom Spotify player style with clean background and hover effects. Doesn't alter global UI or text.
*/

/* ===== Player Container ===== */
#vc-spotify-player {
  --blur-amount: 2px;
  --normal-bg-colour: var(--bg-overlay-floating, var(--background-base-low, var(--background-secondary-alt)));
  position: relative;
  background: linear-gradient(to bottom, transparent 0%, var(--normal-bg-colour) 100%) !important;
  overflow: hidden;
  transition: all 0.4s ease-out;
}

#vc-spotify-player > * {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}

#vc-spotify-player:hover {
  --blur-amount: 0px;
}

/* ===== Background Effects ===== */
#vc-spotify-player::before,
#vc-spotify-player::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease-out;
}

#vc-spotify-player::before {
  background: var(--vc-spotify-track-image);
  background-position: 0% 50%;
  background-size: 150% auto;
  opacity: 0.65;
  animation: backgroundPan 50s ease-in-out infinite alternate;
}

#vc-spotify-player:hover::before {
  opacity: 0.8;
}

#vc-spotify-player::after {
  backdrop-filter: blur(var(--blur-amount)) brightness(1.15);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* ===== Progress Bar ===== */
#vc-spotify-progress-bar > [class^="slider_"] > [class^="bar_"] > [class^="barFill_"] {
  background: #ffffff !important;
}

#vc-spotify-progress-bar > [class^="slider_"] > [class^="bar_"] {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* ===== Buttons ===== */
#vc-spotify-player button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}

#vc-spotify-player button:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

#vc-spotify-player button:active {
  transform: scale(0.95);
}

#vc-spotify-player button svg,
#vc-spotify-player button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: inherit;
}

/* Play / Pause Button Animation */
#vc-spotify-player [class*="buttonPlay"],
#vc-spotify-player [class*="buttonPause"] {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.4s ease, filter 0.4s ease;
}

#vc-spotify-player [class*="buttonPlay"]:hover,
#vc-spotify-player [class*="buttonPause"]:hover {
  transform: scale(1.15);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

#vc-spotify-player [class*="buttonPlay"]:active,
#vc-spotify-player [class*="buttonPause"]:active {
  transform: scale(0.9);
}

/* Prev / Next / Shuffle / Repeat */
#vc-spotify-player [class*="buttonPrev"],
#vc-spotify-player [class*="buttonNext"],
#vc-spotify-player [class*="buttonShuffle"],
#vc-spotify-player [class*="buttonRepeat"] {
  transition: transform 0.3s ease, filter 0.3s ease;
}

#vc-spotify-player [class*="buttonPrev"]:hover,
#vc-spotify-player [class*="buttonNext"]:hover,
#vc-spotify-player [class*="buttonShuffle"]:hover,
#vc-spotify-player [class*="buttonRepeat"]:hover {
  transform: scale(1.1);
}

#vc-spotify-player [class*="buttonShuffle"].active,
#vc-spotify-player [class*="buttonRepeat"].active {
  animation: pulse 2s infinite;
}

/* ===== Volume Slider ===== */
#vc-spotify-player [class*="volumeSlider"] {
  transition: all 0.3s ease;
}

#vc-spotify-player [class*="volumeSlider"]:hover {
  transform: scaleY(1.1);
}

/* ===== Ripple Effect ===== */
#vc-spotify-player button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1) translate(-50%, -50%);
  pointer-events: none;
}

#vc-spotify-player button:focus:not(:active)::after {
  animation: ripple 0.6s ease-out;
}

/* ===== Animations ===== */
@keyframes backgroundPan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.5; }
  20% { transform: scale(25); opacity: 0.3; }
  100% { transform: scale(40); opacity: 0; }
}

@keyframes pulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}