/* ==========================================================================
   y2k.css — WINAMP 2026 — Y2K Skin Mode
   Holographic, iridescent effects layered over the dark base.
   ========================================================================== */

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

@keyframes holographic {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 6px var(--accent-glow),
      0 0 14px var(--accent-glow);
  }
  50% {
    text-shadow:
      0 0 12px var(--accent-glow),
      0 0 24px var(--accent-glow),
      0 0 40px var(--accent-glow);
  }
}

@keyframes metal-sheen {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes hue-cycle {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes scan-beam {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% {
    transform: translateY(calc(var(--player-height, 500px) + 100%));
    opacity: 0;
  }
}

@keyframes iridescent-flash {
  0%   { opacity: 0; background-position: -100% 0; }
  50%  { opacity: 0.5; }
  100% { opacity: 0; background-position: 200% 0; }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.y2k-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Y2K Skin Active Overrides
   -------------------------------------------------------------------------- */

/* Hue cycling on accent elements */
body.y2k-active .lcd-time,
body.y2k-active .lcd-badge.is-active,
body.y2k-active .feature-btn.is-active,
body.y2k-active .transport-btn.play-btn.is-playing {
  animation: hue-cycle 6s linear infinite;
}

/* Glassmorphism on panels */
body.y2k-active .eq-panel,
body.y2k-active .fx-panel {
  background: rgba(18, 18, 26, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.y2k-active .playlist-header {
  background: rgba(18, 18, 26, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Subtle metallic sheen on player */
body.y2k-active .player {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 35%,
      rgba(255, 255, 255, 0.02) 50%,
      transparent 65%,
      rgba(255, 255, 255, 0.03) 100%
    ),
    var(--bg-player);
}

/* Scan beam */
body.y2k-active .player::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 80%,
    transparent 100%
  );
  animation: scan-beam 5s linear infinite;
  pointer-events: none;
  z-index: 100;
}

/* Metal sheen on title bar */
body.y2k-active .title-bar {
  position: relative;
  overflow: hidden;
}

body.y2k-active .title-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 40%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.04) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: metal-sheen 5s ease-in-out infinite;
  pointer-events: none;
}

/* Chrome text on title */
body.y2k-active .title-bar-text {
  background: linear-gradient(
    180deg,
    #e0e0e8 0%,
    #a0a0b0 30%,
    #d0d0d8 50%,
    #808090 70%,
    #c0c0c8 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

/* Rainbow borders on active elements */
body.y2k-active .feature-btn.is-active,
body.y2k-active .transport-btn.play-btn.is-playing,
body.y2k-active .viz-mode-btn.active {
  border-image: linear-gradient(
    90deg,
    rgba(255, 0, 128, 0.5),
    rgba(0, 255, 255, 0.5),
    rgba(255, 215, 0, 0.5),
    rgba(128, 0, 255, 0.5),
    rgba(0, 255, 128, 0.5),
    rgba(255, 0, 128, 0.5)
  ) 1;
  border-image-slice: 1;
  animation: hue-cycle 6s linear infinite;
}

/* Button hover flash */
body.y2k-active .transport-btn:hover::after,
body.y2k-active .feature-btn:hover::after,
body.y2k-active .playlist-action-btn:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.1) 25%,
    rgba(255, 0, 200, 0.1) 50%,
    rgba(255, 215, 0, 0.1) 75%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: iridescent-flash 0.4s ease forwards;
  pointer-events: none;
  border-radius: inherit;
}

/* Holographic EQ thumbs */
body.y2k-active .eq-slider::-webkit-slider-thumb {
  background: linear-gradient(
    135deg,
    rgb(0, 230, 255),
    rgb(255, 0, 200),
    rgb(255, 215, 0),
    rgb(0, 230, 255)
  );
  background-size: 300% 300%;
  animation: holographic 3s ease infinite;
}

body.y2k-active .eq-slider::-moz-range-thumb {
  background: linear-gradient(
    135deg,
    rgb(0, 230, 255),
    rgb(255, 0, 200),
    rgb(255, 215, 0),
    rgb(0, 230, 255)
  );
  background-size: 300% 300%;
  animation: holographic 3s ease infinite;
}

/* Visualizer glow */
body.y2k-active .viz-container::before {
  box-shadow:
    inset 0 0 14px rgba(0, 255, 255, 0.06),
    inset 0 0 3px rgba(0, 0, 0, 0.5),
    inset 0 0 25px rgba(255, 0, 200, 0.03);
}

/* Rainbow scrollbar */
body.y2k-active .playlist-tracks::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(0, 255, 255, 0.35),
    rgba(255, 0, 200, 0.35),
    rgba(255, 215, 0, 0.35)
  );
}

/* Iridescent chrome dots */
body.y2k-active .chrome-dot {
  background: radial-gradient(
    circle at 35% 35%,
    rgba(0, 255, 255, 0.5) 0%,
    rgba(255, 0, 200, 0.3) 50%,
    rgba(128, 0, 255, 0.2) 100%
  );
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px rgba(0, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .y2k-glow-pulse,
  body.y2k-active .player::before,
  body.y2k-active .lcd-time,
  body.y2k-active .lcd-badge.is-active,
  body.y2k-active .feature-btn.is-active,
  body.y2k-active .transport-btn.play-btn.is-playing,
  body.y2k-active .title-bar::after,
  body.y2k-active .eq-slider::-webkit-slider-thumb,
  body.y2k-active .eq-slider::-moz-range-thumb,
  body.y2k-active .transport-btn:hover::after,
  body.y2k-active .feature-btn:hover::after,
  body.y2k-active .playlist-action-btn:hover::after {
    animation: none;
  }
}