/* ==========================================================================
   rgb.css — RGB Mode
   Rainbow cycling on sliders, outlines, borders, and glows.
   Music reactivity via --intensity CSS variable (0-1, set by JS).
   ========================================================================== */

/* --------------------------------------------------------------------------
   RGB Keyframes
   -------------------------------------------------------------------------- */

@keyframes rgb-cycle {
  0%   { --rgb-hue: 0; }
  100% { --rgb-hue: 360; }
}

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

@keyframes rgb-border {
  0%   { border-color: #ff0040; box-shadow: 0 0 8px rgba(255, 0, 64, 0.3); }
  16%  { border-color: #ff8000; box-shadow: 0 0 8px rgba(255, 128, 0, 0.3); }
  33%  { border-color: #ffff00; box-shadow: 0 0 8px rgba(255, 255, 0, 0.3); }
  50%  { border-color: #00ff80; box-shadow: 0 0 8px rgba(0, 255, 128, 0.3); }
  66%  { border-color: #0080ff; box-shadow: 0 0 8px rgba(0, 128, 255, 0.3); }
  83%  { border-color: #8000ff; box-shadow: 0 0 8px rgba(128, 0, 255, 0.3); }
  100% { border-color: #ff0040; box-shadow: 0 0 8px rgba(255, 0, 64, 0.3); }
}

@keyframes rgb-glow {
  0%   { box-shadow: 0 0 6px #ff0040, 0 0 12px rgba(255, 0, 64, 0.2); }
  16%  { box-shadow: 0 0 6px #ff8000, 0 0 12px rgba(255, 128, 0, 0.2); }
  33%  { box-shadow: 0 0 6px #ffff00, 0 0 12px rgba(255, 255, 0, 0.2); }
  50%  { box-shadow: 0 0 6px #00ff80, 0 0 12px rgba(0, 255, 128, 0.2); }
  66%  { box-shadow: 0 0 6px #0080ff, 0 0 12px rgba(0, 128, 255, 0.2); }
  83%  { box-shadow: 0 0 6px #8000ff, 0 0 12px rgba(128, 0, 255, 0.2); }
  100% { box-shadow: 0 0 6px #ff0040, 0 0 12px rgba(255, 0, 64, 0.2); }
}

@keyframes rgb-thumb {
  0%   { background: #ff0040; }
  16%  { background: #ff8000; }
  33%  { background: #ffff00; }
  50%  { background: #00ff80; }
  66%  { background: #0080ff; }
  83%  { background: #8000ff; }
  100% { background: #ff0040; }
}

@keyframes rgb-text {
  0%   { color: #ff0040; text-shadow: 0 0 8px rgba(255, 0, 64, 0.5); }
  16%  { color: #ff8000; text-shadow: 0 0 8px rgba(255, 128, 0, 0.5); }
  33%  { color: #ffff00; text-shadow: 0 0 8px rgba(255, 255, 0, 0.5); }
  50%  { color: #00ff80; text-shadow: 0 0 8px rgba(0, 255, 128, 0.5); }
  66%  { color: #0080ff; text-shadow: 0 0 8px rgba(0, 128, 255, 0.5); }
  83%  { color: #8000ff; text-shadow: 0 0 8px rgba(128, 0, 255, 0.5); }
  100% { color: #ff0040; text-shadow: 0 0 8px rgba(255, 0, 64, 0.5); }
}

@keyframes rgb-fill {
  0%   { background: linear-gradient(90deg, #ff0040, #ff8000); }
  16%  { background: linear-gradient(90deg, #ff8000, #ffff00); }
  33%  { background: linear-gradient(90deg, #ffff00, #00ff80); }
  50%  { background: linear-gradient(90deg, #00ff80, #0080ff); }
  66%  { background: linear-gradient(90deg, #0080ff, #8000ff); }
  83%  { background: linear-gradient(90deg, #8000ff, #ff0040); }
  100% { background: linear-gradient(90deg, #ff0040, #ff8000); }
}

/* Intensity pulse — modulated by JS via --intensity */
@keyframes intensity-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   RGB Mode — Slider Thumbs
   -------------------------------------------------------------------------- */

/* Horizontal sliders (volume, balance, FX wear) */
body.rgb-active .styled-slider::-webkit-slider-thumb {
  animation: rgb-thumb 4s linear infinite;
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px currentColor;
}

body.rgb-active .styled-slider::-moz-range-thumb {
  animation: rgb-thumb 4s linear infinite;
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px currentColor;
}

/* Horizontal slider tracks — rainbow gradient */
body.rgb-active .styled-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #ff0040, #ff8000, #ffff00, #00ff80, #0080ff, #8000ff, #ff0040);
  background-size: 200% 100%;
  animation: rgb-track-shift 4s linear infinite;
  opacity: 0.5;
}

body.rgb-active .styled-slider::-moz-range-track {
  background: linear-gradient(90deg, #ff0040, #ff8000, #ffff00, #00ff80, #0080ff, #8000ff, #ff0040);
  background-size: 200% 100%;
  animation: rgb-track-shift 4s linear infinite;
  opacity: 0.5;
}

@keyframes rgb-track-shift {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* EQ vertical sliders */
body.rgb-active .eq-slider::-webkit-slider-thumb {
  animation: rgb-thumb 4s linear infinite;
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 6px currentColor;
}

body.rgb-active .eq-slider::-moz-range-thumb {
  animation: rgb-thumb 4s linear infinite;
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 6px currentColor;
}

/* Stagger EQ bands so they rainbow across */
body.rgb-active .eq-band[data-band="0"] .eq-slider::-webkit-slider-thumb { animation-delay: 0s; }
body.rgb-active .eq-band[data-band="1"] .eq-slider::-webkit-slider-thumb { animation-delay: -0.4s; }
body.rgb-active .eq-band[data-band="2"] .eq-slider::-webkit-slider-thumb { animation-delay: -0.8s; }
body.rgb-active .eq-band[data-band="3"] .eq-slider::-webkit-slider-thumb { animation-delay: -1.2s; }
body.rgb-active .eq-band[data-band="4"] .eq-slider::-webkit-slider-thumb { animation-delay: -1.6s; }
body.rgb-active .eq-band[data-band="5"] .eq-slider::-webkit-slider-thumb { animation-delay: -2.0s; }
body.rgb-active .eq-band[data-band="6"] .eq-slider::-webkit-slider-thumb { animation-delay: -2.4s; }
body.rgb-active .eq-band[data-band="7"] .eq-slider::-webkit-slider-thumb { animation-delay: -2.8s; }
body.rgb-active .eq-band[data-band="8"] .eq-slider::-webkit-slider-thumb { animation-delay: -3.2s; }
body.rgb-active .eq-band[data-band="9"] .eq-slider::-webkit-slider-thumb { animation-delay: -3.6s; }

body.rgb-active .eq-band[data-band="0"] .eq-slider::-moz-range-thumb { animation-delay: 0s; }
body.rgb-active .eq-band[data-band="1"] .eq-slider::-moz-range-thumb { animation-delay: -0.4s; }
body.rgb-active .eq-band[data-band="2"] .eq-slider::-moz-range-thumb { animation-delay: -0.8s; }
body.rgb-active .eq-band[data-band="3"] .eq-slider::-moz-range-thumb { animation-delay: -1.2s; }
body.rgb-active .eq-band[data-band="4"] .eq-slider::-moz-range-thumb { animation-delay: -1.6s; }
body.rgb-active .eq-band[data-band="5"] .eq-slider::-moz-range-thumb { animation-delay: -2.0s; }
body.rgb-active .eq-band[data-band="6"] .eq-slider::-moz-range-thumb { animation-delay: -2.4s; }
body.rgb-active .eq-band[data-band="7"] .eq-slider::-moz-range-thumb { animation-delay: -2.8s; }
body.rgb-active .eq-band[data-band="8"] .eq-slider::-moz-range-thumb { animation-delay: -3.2s; }
body.rgb-active .eq-band[data-band="9"] .eq-slider::-moz-range-thumb { animation-delay: -3.6s; }

/* Seek bar */
body.rgb-active .seek-fill {
  background: linear-gradient(90deg, #ff0040, #ff8000, #ffff00, #00ff80, #0080ff, #8000ff, #ff0040);
  background-size: 200% 100%;
  animation: rgb-track-shift 4s linear infinite;
  box-shadow: 0 0 10px rgba(255, 0, 128, 0.3), 0 0 20px rgba(0, 128, 255, 0.2);
}

body.rgb-active .seek-thumb {
  animation: rgb-thumb 4s linear infinite;
  border-color: rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   RGB Mode — Outlines & Borders
   -------------------------------------------------------------------------- */

/* Player container */
body.rgb-active .player {
  animation: rgb-border 4s linear infinite;
}

/* Transport buttons */
body.rgb-active .transport-btn {
  animation: rgb-border 4s linear infinite;
  animation-delay: -0.5s;
}

body.rgb-active .transport-btn.play-btn.is-playing {
  animation: rgb-glow 4s linear infinite;
}

/* Feature buttons when active */
body.rgb-active .feature-btn.is-active {
  animation: rgb-text 4s linear infinite;
}

body.rgb-active .feature-btn.is-active::after {
  animation: rgb-thumb 4s linear infinite;
  box-shadow: 0 0 6px currentColor;
}

/* Panel borders */
body.rgb-active .eq-panel,
body.rgb-active .fx-panel,
body.rgb-active .playlist-panel {
  border-color: transparent;
  animation: rgb-border 4s linear infinite;
  animation-delay: -1s;
}

/* LCD border glow */
body.rgb-active .lcd-section {
  animation: rgb-glow 4s linear infinite;
  animation-delay: -2s;
}

/* Viz container */
body.rgb-active .viz-container {
  animation: rgb-border 4s linear infinite;
  animation-delay: -1.5s;
}

/* Title bar text */
body.rgb-active .title-bar-text {
  animation: rgb-text 4s linear infinite;
  -webkit-text-fill-color: unset;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

/* LCD text */
body.rgb-active .lcd-time {
  animation: rgb-text 4s linear infinite;
  animation-delay: -0.5s;
}

body.rgb-active .lcd-marquee-container {
  animation: rgb-text 4s linear infinite;
  animation-delay: -1s;
}

body.rgb-active .lcd-marquee {
  color: inherit;
  text-shadow: inherit;
}

/* Active badges */
body.rgb-active .lcd-badge.is-active {
  animation: rgb-text 4s linear infinite;
}

/* EQ/FX/Playlist titles */
body.rgb-active .eq-title,
body.rgb-active .fx-title,
body.rgb-active .playlist-title {
  animation: rgb-text 4s linear infinite;
}

/* Chrome dots */
body.rgb-active .chrome-dot {
  animation: rgb-thumb 4s linear infinite;
  box-shadow: 0 0 4px currentColor;
}

body.rgb-active .chrome-dot:first-child {
  animation-delay: -1s;
}

/* Playing track accent */
body.rgb-active .playlist-track.is-playing::before {
  animation: rgb-thumb 4s linear infinite;
  box-shadow: 0 0 8px currentColor;
}

/* FX buttons when pressed */
body.rgb-active .fx-btn[aria-pressed="true"] {
  animation: rgb-text 4s linear infinite;
}

body.rgb-active .fx-btn[aria-pressed="true"]::after {
  animation: rgb-thumb 4s linear infinite;
}

/* Slider value labels */
body.rgb-active .slider-value {
  animation: rgb-text 4s linear infinite;
}

/* EQ preset select */
body.rgb-active .eq-preset-select {
  animation: rgb-border 4s linear infinite;
  color: inherit;
}

/* Player grip dots */
body.rgb-active .player-grip span {
  animation: rgb-thumb 4s linear infinite;
}

body.rgb-active .player-grip span:nth-child(1) { animation-delay: 0s; }
body.rgb-active .player-grip span:nth-child(2) { animation-delay: -1.3s; }
body.rgb-active .player-grip span:nth-child(3) { animation-delay: -2.6s; }

/* --------------------------------------------------------------------------
   Music Reactivity — intensity-driven effects
   Requires JS to set --intensity (0-1) on :root via requestAnimationFrame
   -------------------------------------------------------------------------- */

body.reactive-active .player {
  transition: box-shadow 0.1s ease-out;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 calc(20px + 60px * var(--intensity, 0)) rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.05 + 0.35 * var(--intensity, 0))),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.reactive-active .lcd-section {
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.6),
    inset 0 0 calc(6px + 20px * var(--intensity, 0)) rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.1 + 0.4 * var(--intensity, 0)));
}

body.reactive-active .viz-container {
  box-shadow:
    inset 0 1px 6px rgba(0, 0, 0, 0.4),
    inset 0 0 calc(4px + 30px * var(--intensity, 0)) rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.02 + 0.15 * var(--intensity, 0)));
}

body.reactive-active .transport-btn.play-btn.is-playing {
  box-shadow:
    0 0 calc(4px + 20px * var(--intensity, 0)) rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.1 + 0.5 * var(--intensity, 0))),
    inset 0 0 calc(4px + 10px * var(--intensity, 0)) rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.02 + 0.1 * var(--intensity, 0)));
}

/* Reactive scanlines - get brighter on intensity */
body.reactive-active .lcd-section::after {
  opacity: calc(0.3 + 0.7 * var(--intensity, 0));
}

/* Reactive title glow */
body.reactive-active .title-bar-text {
  text-shadow:
    0 0 calc(4px + 12px * var(--intensity, 0)) rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.3 + 0.5 * var(--intensity, 0))),
    0 0 calc(8px + 30px * var(--intensity, 0)) rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.05 + 0.2 * var(--intensity, 0)));
}

/* Reactive feature bar - subtle background pulse */
body.reactive-active .feature-bar {
  background: rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.01 + 0.06 * var(--intensity, 0)));
}

/* Reactive border brightness */
body.reactive-active .player {
  border-color: rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.1 + 0.4 * var(--intensity, 0)));
}

/* Reactive playlist playing track */
body.reactive-active .playlist-track.is-playing::before {
  width: calc(3px + 4px * var(--intensity, 0));
  box-shadow:
    0 0 calc(4px + 12px * var(--intensity, 0)) rgba(var(--reactive-r, 38), var(--reactive-g, 255), var(--reactive-b, 64), calc(0.3 + 0.5 * var(--intensity, 0)));
}

/* When BOTH rgb and reactive are active — RGB colors pulse with music */
body.rgb-active.reactive-active .player {
  animation: rgb-border 4s linear infinite;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 calc(20px + 60px * var(--intensity, 0)) currentColor;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.rgb-active .styled-slider::-webkit-slider-thumb,
  body.rgb-active .styled-slider::-moz-range-thumb,
  body.rgb-active .eq-slider::-webkit-slider-thumb,
  body.rgb-active .eq-slider::-moz-range-thumb,
  body.rgb-active .seek-thumb,
  body.rgb-active .player,
  body.rgb-active .transport-btn,
  body.rgb-active .feature-btn.is-active,
  body.rgb-active .eq-panel,
  body.rgb-active .fx-panel,
  body.rgb-active .playlist-panel,
  body.rgb-active .lcd-section,
  body.rgb-active .viz-container,
  body.rgb-active .title-bar-text,
  body.rgb-active .lcd-time,
  body.rgb-active .lcd-marquee,
  body.rgb-active .lcd-badge.is-active,
  body.rgb-active .eq-title,
  body.rgb-active .fx-title,
  body.rgb-active .playlist-title,
  body.rgb-active .chrome-dot,
  body.rgb-active .playlist-track.is-playing::before,
  body.rgb-active .fx-btn[aria-pressed="true"],
  body.rgb-active .slider-value,
  body.rgb-active .player-grip span,
  body.rgb-active .feature-btn.is-active::after,
  body.rgb-active .fx-btn[aria-pressed="true"]::after,
  body.rgb-active .seek-fill,
  body.rgb-active .styled-slider::-webkit-slider-runnable-track,
  body.rgb-active .styled-slider::-moz-range-track,
  body.rgb-active .eq-preset-select,
  body.rgb-active .transport-btn.play-btn.is-playing {
    animation: none !important;
  }
}