/* Saisonale Themes für Droidengalaxie Music Player */

/* Basis Farben für alle Jahreszeiten */
:root {
  /* Standard/Basis Theme (Weltraum) */
  --primary: #1DB954;
  --secondary: #417690;
  --dark: #121212;
  --light: #282828;
  --text: #FFFFFF;
  --text-secondary: #B3B3B3;
  --accent: #FF1E6F;
  
  /* Hintergrund Gradients */
  --bg-gradient: linear-gradient(220deg, #0B1A2E 0%, #1B2A4B 50%, #1A2E3A 100%);
  --star-color-1: #fff;
  --star-color-2: #417690;
  --star-color-3: #1DB954;
  --star-color-4: #FF1E6F;
}

/* FRÜHLING THEME (März - Mai) */
body.theme-spring {
  --primary: #4CAF50;
  --secondary: #8BC34A;
  --accent: #FFB74D;
  --dark: #1B4332;
  --light: #2D5A41;
  --text: #FFFFFF;
  --text-secondary: #C8E6C9;
  
  --bg-gradient: linear-gradient(220deg, #1B4332 0%, #2D5A41 50%, #40916C 100%);
  --star-color-1: #FFB74D;
  --star-color-2: #4CAF50;
  --star-color-3: #8BC34A;
  --star-color-4: #FFC107;
}

/* OSTERN SPECIAL (April) */
body.theme-easter {
  --primary: #E91E63;
  --secondary: #FFC107;
  --accent: #9C27B0;
  --dark: #4A148C;
  --light: #6A1B9A;
  --text: #FFFFFF;
  --text-secondary: #F8BBD9;
  
  --bg-gradient: linear-gradient(220deg, #4A148C 0%, #6A1B9A 50%, #8E24AA 100%);
  --star-color-1: #FFC107;
  --star-color-2: #E91E63;
  --star-color-3: #9C27B0;
  --star-color-4: #FF9800;
}

/* SOMMER THEME (Juni - August) */
body.theme-summer {
  --primary: #FF9800;
  --secondary: #FFC107;
  --accent: #F44336;
  --dark: #E65100;
  --light: #FF6F00;
  --text: #FFFFFF;
  --text-secondary: #FFE0B2;
  
  --bg-gradient: linear-gradient(220deg, #E65100 0%, #FF6F00 50%, #FF9800 100%);
  --star-color-1: #FFC107;
  --star-color-2: #FF9800;
  --star-color-3: #F44336;
  --star-color-4: #FFEB3B;
}

/* HERBST THEME (September - November) */
body.theme-autumn {
  --primary: #FF6F00;
  --secondary: #795548;
  --accent: #F44336;
  --dark: #3E2723;
  --light: #5D4037;
  --text: #FFFFFF;
  --text-secondary: #FFCC80;
  
  --bg-gradient: linear-gradient(220deg, #3E2723 0%, #5D4037 50%, #8D6E63 100%);
  --star-color-1: #FF6F00;
  --star-color-2: #795548;
  --star-color-3: #F44336;
  --star-color-4: #FF9800;
}

/* HALLOWEEN SPECIAL (Oktober) */
body.theme-halloween {
  --primary: #FF6600;
  --secondary: #9C27B0;
  --accent: #4CAF50;
  --dark: #1A0A00;
  --light: #2D1B00;
  --text: #FFFFFF;
  --text-secondary: #FFB74D;
  
  --bg-gradient: linear-gradient(220deg, #1A0A00 0%, #2D1B00 50%, #4A2C00 100%);
  --star-color-1: #FF6600;
  --star-color-2: #9C27B0;
  --star-color-3: #4CAF50;
  --star-color-4: #FFC107;
}

/* WINTER THEME (Dezember - Februar) */
body.theme-winter {
  --primary: #2196F3;
  --secondary: #00BCD4;
  --accent: #E1F5FE;
  --dark: #0D47A1;
  --light: #1565C0;
  --text: #FFFFFF;
  --text-secondary: #B3E5FC;
  
  --bg-gradient: linear-gradient(220deg, #0D47A1 0%, #1565C0 50%, #1976D2 100%);
  --star-color-1: #E1F5FE;
  --star-color-2: #2196F3;
  --star-color-3: #00BCD4;
  --star-color-4: #81D4FA;
}

/* Saisonale Sterne-Animationen */
body.theme-spring::before,
body.theme-easter::before {
  background-image:
    radial-gradient(2px 2px at 40px 60px, var(--star-color-1), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 20px 50px, var(--star-color-2), rgba(0,0,0,0)),
    radial-gradient(3px 3px at 30px 100px, var(--star-color-3), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 60px, var(--star-color-4), rgba(0,0,0,0));
  animation: springFloat 120s ease-in-out infinite;
}

body.theme-summer::before {
  background-image:
    radial-gradient(3px 3px at 40px 60px, var(--star-color-1), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 20px 50px, var(--star-color-2), rgba(0,0,0,0)),
    radial-gradient(4px 4px at 30px 100px, var(--star-color-3), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 60px, var(--star-color-4), rgba(0,0,0,0));
  animation: summerBlaze 80s linear infinite;
}

body.theme-autumn::before {
  background-image:
    radial-gradient(2px 2px at 40px 60px, var(--star-color-1), rgba(0,0,0,0)),
    radial-gradient(3px 3px at 20px 50px, var(--star-color-2), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 30px 100px, var(--star-color-3), rgba(0,0,0,0)),
    radial-gradient(4px 4px at 40px 60px, var(--star-color-4), rgba(0,0,0,0));
  animation: autumnFall 150s ease-in-out infinite;
}

body.theme-halloween::before {
  background-image:
    radial-gradient(3px 3px at 40px 60px, var(--star-color-1), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 20px 50px, var(--star-color-2), rgba(0,0,0,0)),
    radial-gradient(4px 4px at 30px 100px, var(--star-color-3), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 40px 60px, var(--star-color-4), rgba(0,0,0,0));
  animation: halloweenSpook 60s ease-in-out infinite;
}

body.theme-winter::before {
  background-image:
    radial-gradient(1px 1px at 40px 60px, var(--star-color-1), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 20px 50px, var(--star-color-2), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 30px 100px, var(--star-color-3), rgba(0,0,0,0)),
    radial-gradient(3px 3px at 40px 60px, var(--star-color-4), rgba(0,0,0,0));
  animation: winterSnow 200s linear infinite;
}

/* Saisonale Animationen */
@keyframes springFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(-10px) rotate(240deg); }
}

@keyframes summerBlaze {
  0% { transform: translateX(0px) scale(1); }
  50% { transform: translateX(-100px) scale(1.1); }
  100% { transform: translateX(-200px) scale(1); }
}

@keyframes autumnFall {
  0% { transform: translateY(-20px) rotate(0deg); }
  100% { transform: translateY(20px) rotate(360deg); }
}

@keyframes halloweenSpook {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.4; }
  25% { transform: scale(1.2) rotate(90deg); opacity: 0.8; }
  50% { transform: scale(0.8) rotate(180deg); opacity: 0.3; }
  75% { transform: scale(1.1) rotate(270deg); opacity: 0.7; }
}

@keyframes winterSnow {
  0% { transform: translateY(-100px) rotate(0deg); }
  100% { transform: translateY(100px) rotate(360deg); }
}

/* Saisonale Button-Styles */
body.theme-spring .btn, 
body.theme-spring .control-btn {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

body.theme-summer .btn,
body.theme-summer .control-btn {
  background: linear-gradient(45deg, var(--primary), var(--accent));
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

body.theme-autumn .btn,
body.theme-autumn .control-btn {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow: 0 4px 15px rgba(255, 111, 0, 0.3);
}

body.theme-halloween .btn,
body.theme-halloween .control-btn {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.5);
  animation: halloweenGlow 2s ease-in-out infinite alternate;
}

body.theme-winter .btn,
body.theme-winter .control-btn {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

body.theme-easter .btn,
body.theme-easter .control-btn {
  background: linear-gradient(45deg, var(--primary), var(--accent));
  box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
  animation: easterShine 3s ease-in-out infinite;
}

@keyframes halloweenGlow {
  0% { box-shadow: 0 4px 15px rgba(255, 102, 0, 0.5); }
  100% { box-shadow: 0 8px 25px rgba(255, 102, 0, 0.8); }
}

@keyframes easterShine {
  0%, 100% { box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4); }
  50% { box-shadow: 0 6px 20px rgba(156, 39, 176, 0.6); }
}

/* Saisonale Scrollbar-Styles */
body.theme-spring ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
}

body.theme-summer ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--accent));
}

body.theme-autumn ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
}

body.theme-halloween ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  animation: halloweenGlow 2s ease-in-out infinite alternate;
}

body.theme-winter ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
}

body.theme-easter ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--accent));
}

/* Saisonale Hover-Effekte */
body.theme-spring .song-item:hover {
  background: rgba(76, 175, 80, 0.1);
  border-left: 3px solid var(--primary);
}

body.theme-summer .song-item:hover {
  background: rgba(255, 152, 0, 0.1);
  border-left: 3px solid var(--primary);
}

body.theme-autumn .song-item:hover {
  background: rgba(255, 111, 0, 0.1);
  border-left: 3px solid var(--primary);
}

body.theme-halloween .song-item:hover {
  background: rgba(255, 102, 0, 0.1);
  border-left: 3px solid var(--primary);
  animation: halloweenFlicker 0.5s ease-in-out;
}

body.theme-winter .song-item:hover {
  background: rgba(33, 150, 243, 0.1);
  border-left: 3px solid var(--primary);
}

body.theme-easter .song-item:hover {
  background: rgba(233, 30, 99, 0.1);
  border-left: 3px solid var(--primary);
}

@keyframes halloweenFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Responsive Design für saisonale Themes */
@media (max-width: 768px) {
  body.theme-spring::before,
  body.theme-summer::before,
  body.theme-autumn::before,
  body.theme-winter::before,
  body.theme-halloween::before,
  body.theme-easter::before {
    background-size: 150px 150px, 120px 120px, 180px 180px, 160px 160px;
  }
}

/* Saisonale Progress Bar Styles */
body.theme-spring .progress {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

body.theme-summer .progress {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

body.theme-autumn .progress {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

body.theme-halloween .progress {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  animation: halloweenPulse 1s ease-in-out infinite;
}

body.theme-winter .progress {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

body.theme-easter .progress {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

@keyframes halloweenPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}