/* 🎬 INTERGALACTIC ATMOSPHERIC ANIMATIONS
 * ======================================
 * Alle Animationen für die atmosphärischen Effekte
 * GPU-optimiert und performance-freundlich
 */

/* ================================================
 * 🌌 BASE GALACTIC ANIMATIONS
 * ================================================ */

@keyframes galaxyRotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes starField {
  from { transform: translateY(0); }
  to { transform: translateY(-200px); }
}

@keyframes twinkle {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
}

/* ================================================
 * 🎃 HALLOWEEN ANIMATIONS
 * ================================================ */

@keyframes ghostFloat {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg); 
    opacity: 0.4; 
  }
  25% { 
    transform: translateY(-30px) translateX(20px) rotate(5deg); 
    opacity: 0.7; 
  }
  50% { 
    transform: translateY(-10px) translateX(-15px) rotate(-3deg); 
    opacity: 0.5; 
  }
  75% { 
    transform: translateY(-25px) translateX(10px) rotate(4deg); 
    opacity: 0.6; 
  }
}

@keyframes ghostGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); 
  }
  50% { 
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 30px rgba(255, 107, 53, 0.6)); 
  }
}

@keyframes batFly {
  from { 
    transform: translateX(0) translateY(0) rotateZ(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  to { 
    transform: translateX(calc(100vw + 100px)) translateY(-100px) rotateZ(360deg);
    opacity: 0;
  }
}

@keyframes pumpkinGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 15px orange); 
  }
  50% { 
    filter: drop-shadow(0 0 30px orange) 
            drop-shadow(0 0 40px red); 
  }
}

@keyframes webFloat {
  0%, 100% { 
    opacity: 0.3; 
    transform: translateY(0) rotate(0deg); 
  }
  50% { 
    opacity: 0.6; 
    transform: translateY(-10px) rotate(2deg); 
  }
}

@keyframes spookyFloat {
  0%, 100% { 
    transform: translateX(-50%) translateY(0); 
  }
  50% { 
    transform: translateX(-50%) translateY(-10px); 
  }
}

/* ================================================
 * 🐰 EASTER ANIMATIONS
 * ================================================ */

@keyframes eggFloat {
  0%, 100% { 
    transform: translateY(0) rotate(0deg); 
    opacity: 0.7; 
  }
  25% { 
    transform: translateY(-20px) rotate(90deg); 
    opacity: 0.9; 
  }
  50% { 
    transform: translateY(-40px) rotate(180deg); 
    opacity: 0.8; 
  }
  75% { 
    transform: translateY(-20px) rotate(270deg); 
    opacity: 0.9; 
  }
}

@keyframes bunnyHop {
  0%, 100% { 
    transform: translateY(0) scale(1); 
  }
  10% { 
    transform: translateY(-30px) scale(1.1); 
  }
  20% { 
    transform: translateY(0) scale(1); 
  }
  30% { 
    transform: translateY(-50px) scale(1.2); 
  }
  40% { 
    transform: translateY(0) scale(1); 
  }
  50% { 
    transform: translateY(-20px) scale(1.05); 
  }
  60% { 
    transform: translateY(0) scale(1); 
  }
}

@keyframes easterBounce {
  0%, 100% { 
    transform: translateX(-50%) scale(1); 
  }
  50% { 
    transform: translateX(-50%) scale(1.1); 
  }
}

@keyframes petalFall {
  from { 
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  to { 
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ================================================
 * ☀️ SUMMER ANIMATIONS
 * ================================================ */

@keyframes sunPulse {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.1); 
  }
}

@keyframes sunRotate {
  from { 
    transform: translate(-50%, -50%) rotate(0deg); 
  }
  to { 
    transform: translate(-50%, -50%) rotate(360deg); 
  }
}

@keyframes palmSway {
  0%, 100% { 
    transform: translateX(0) rotate(0deg); 
  }
  25% { 
    transform: translateX(10px) rotate(3deg); 
  }
  50% { 
    transform: translateX(0) rotate(0deg); 
  }
  75% { 
    transform: translateX(-10px) rotate(-3deg); 
  }
}

@keyframes waveMotion {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(-10px); 
  }
}

@keyframes waveFlow {
  from { 
    transform: translateX(0); 
  }
  to { 
    transform: translateX(-50%); 
  }
}

@keyframes beachWave {
  0%, 100% { 
    transform: translateX(-50%) rotate(0deg); 
  }
  50% { 
    transform: translateX(-50%) rotate(5deg); 
  }
}

@keyframes seagullFly {
  from { 
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  to { 
    transform: translateX(calc(-100vw - 100px)) translateY(-50px);
    opacity: 0;
  }
}

/* ================================================
 * 🌸 SPRING ANIMATIONS
 * ================================================ */

@keyframes butterflyDance {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  25% { 
    transform: translate(50px, -30px) rotate(15deg); 
  }
  50% { 
    transform: translate(-20px, -60px) rotate(-10deg); 
  }
  75% { 
    transform: translate(30px, -20px) rotate(20deg); 
  }
}

@keyframes flowerGrow {
  0% { 
    transform: scale(0.5) rotate(-10deg); 
    opacity: 0.6; 
  }
  50% { 
    transform: scale(1.1) rotate(0deg); 
    opacity: 1; 
  }
  100% { 
    transform: scale(1) rotate(5deg); 
    opacity: 0.9; 
  }
}

@keyframes leafSway {
  0%, 100% { 
    transform: rotate(0deg); 
  }
  50% { 
    transform: rotate(10deg); 
  }
}

@keyframes bloomIn {
  0% { 
    transform: scale(0) rotate(0deg); 
    opacity: 0; 
  }
  50% { 
    transform: scale(1.2) rotate(180deg); 
    opacity: 0.8; 
  }
  100% { 
    transform: scale(1) rotate(360deg); 
    opacity: 1; 
  }
}

/* ================================================
 * ❄️ WINTER ANIMATIONS
 * ================================================ */

@keyframes snowfall {
  from { 
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  to { 
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes crystalShimmer {
  0%, 100% { 
    opacity: 0.6; 
    transform: rotate(45deg) scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: rotate(45deg) scale(1.2); 
  }
}

@keyframes auroraWave {
  0%, 100% { 
    opacity: 0.3; 
    transform: translateY(0) skewX(0deg); 
  }
  33% { 
    opacity: 0.6; 
    transform: translateY(-20px) skewX(5deg); 
  }
  66% { 
    opacity: 0.4; 
    transform: translateY(-10px) skewX(-3deg); 
  }
}

@keyframes iceShimmer {
  0%, 100% { 
    filter: brightness(1) saturate(1); 
  }
  50% { 
    filter: brightness(1.3) saturate(1.2); 
  }
}

@keyframes freeze {
  0% { 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    transform: scale(1.05) rotate(2deg); 
  }
  100% { 
    transform: scale(1) rotate(0deg); 
  }
}

/* ================================================
 * 🍂 AUTUMN ANIMATIONS
 * ================================================ */

@keyframes leafDrift {
  0% { 
    transform: translateY(-20px) rotate(0deg); 
  }
  25% { 
    transform: translateY(20px) rotate(90deg); 
  }
  50% { 
    transform: translateY(100px) rotate(180deg); 
  }
  75% { 
    transform: translateY(150px) rotate(270deg); 
  }
  100% { 
    transform: translateY(200px) rotate(360deg); 
  }
}

@keyframes moonGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 25px orange) drop-shadow(0 0 50px yellow); 
  }
  50% { 
    filter: drop-shadow(0 0 40px orange) drop-shadow(0 0 80px yellow); 
  }
}

@keyframes windBlow {
  0%, 100% { 
    transform: translateX(0) rotate(0deg); 
  }
  50% { 
    transform: translateX(15px) rotate(5deg); 
  }
}

@keyframes autumnGlow {
  0%, 100% { 
    filter: hue-rotate(0deg) brightness(1); 
  }
  50% { 
    filter: hue-rotate(20deg) brightness(1.1); 
  }
}

@keyframes rustleLeaves {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
  }
  25% { 
    transform: scale(1.05) rotate(2deg); 
  }
  75% { 
    transform: scale(0.95) rotate(-2deg); 
  }
}

/* ================================================
 * 🎮 DISCORD & JAM-TOGETHER ANIMATIONS
 * ================================================ */

@keyframes musicFloat {
  0%, 100% { 
    transform: translateY(-50%) scale(1); 
  }
  50% { 
    transform: translateY(-50%) scale(1.2); 
  }
}

@keyframes discordPulse {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.3); 
  }
  50% { 
    box-shadow: 0 0 40px rgba(88, 101, 242, 0.6); 
  }
}

@keyframes jamSessionGlow {
  0%, 100% { 
    border-color: var(--accent); 
  }
  50% { 
    border-color: var(--primary); 
    box-shadow: 0 0 30px var(--accent); 
  }
}

/* ================================================
 * 🚀 PERFORMANCE OPTIMIZATIONS
 * ================================================ */

/* GPU-Accelerated animations */
.ghost,
.bat,
.easter-egg,
.space-bunny,
.galactic-sun,
.space-palm,
.cosmic-waves,
.space-butterfly,
.cosmic-snowflake,
.space-crystal,
.cosmic-leaf,
.twinkling-star {
  will-change: transform, opacity;
  transform: translateZ(0); /* Force GPU layer */
  backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .ghost,
  .bat,
  .easter-egg,
  .space-bunny,
  .galactic-sun,
  .space-palm,
  .cosmic-waves,
  .space-butterfly,
  .cosmic-snowflake,
  .space-crystal,
  .cosmic-leaf,
  .twinkling-star {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  
  /* Komplett deaktivieren bei Bedarf */
  .atmospheric-effects {
    display: none !important;
  }
}

/* Mobile performance optimizations */
@media (max-width: 768px) {
  .ghost,
  .bat,
  .easter-egg,
  .space-bunny,
  .galactic-sun,
  .space-palm,
  .space-butterfly,
  .cosmic-snowflake,
  .space-crystal,
  .cosmic-leaf {
    animation-duration: calc(var(--duration, 15s) * 1.5) !important;
  }
  
  /* Weniger Partikel auf Mobile */
  .twinkling-star:nth-child(n+20) {
    display: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .ghost,
  .bat,
  .easter-egg,
  .space-bunny,
  .galactic-sun,
  .space-palm,
  .space-butterfly,
  .cosmic-snowflake,
  .space-crystal,
  .cosmic-leaf {
    filter: contrast(1.5) !important;
  }
}

/* ================================================
 * 🎨 THEME-SPECIFIC ANIMATION OVERRIDES
 * ================================================ */

/* Halloween: Intensivere, gruselige Animationen */
body.theme-halloween .ghost {
  animation-timing-function: ease-in-out;
}

body.theme-halloween .bat {
  animation-timing-function: ease-out;
}

/* Easter: Sanftere, fröhliche Animationen */
body.theme-easter .easter-egg {
  animation-timing-function: ease-in-out;
}

body.theme-easter .space-bunny {
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Summer: Energische, warme Animationen */
body.theme-summer .galactic-sun {
  animation-timing-function: ease-in-out;
}

body.theme-summer .space-palm {
  animation-timing-function: ease-in-out;
}

/* Spring: Lebhafte, wachsende Animationen */
body.theme-spring .space-butterfly {
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Winter: Ruhige, fließende Animationen */
body.theme-winter .cosmic-snowflake {
  animation-timing-function: linear;
}

body.theme-winter .space-crystal {
  animation-timing-function: ease-in-out;
}

/* Autumn: Natürliche, schwebende Animationen */
body.theme-autumn .cosmic-leaf {
  animation-timing-function: ease-in-out;
}