/* animations.css
   Enthält alle Keyframe-Animationen und spezielle Klassen 
   für visuelle Effekte wie Glow, Party-Mode, Grow & Glow und FadeOut.
   Hinweis: Diese Animationen sind geräteübergreifend (Desktop, Tablet, Smartphone).
*/

/* ============================
   Glow-Animation (Desktop u.a.)
   Ändert Farbe und Textschatten, um einen leuchtenden Effekt zu erzielen.
   ============================
*/
@keyframes glow {
  /* Startzustand */
  0% {
    color: #ff0;
    text-shadow: 0 0 10px #ff0, 0 0 20px #f06, 0 0 30px #0ff;
  }
  /* Zwischenzustand */
  50% {
    color: #f06;
    text-shadow: 0 0 15px #f06, 0 0 25px #ff0, 0 0 35px #0ff;
  }
  /* Endzustand */
  100% {
    color: #0ff;
    text-shadow: 0 0 10px #0ff, 0 0 20px #f06, 0 0 30px #ff0;
  }
}

/* ============================
   Party-Modus (Desktop u.a.)
   Animation für blinkende, bunte Textfarben.
   ============================
*/
@keyframes partyText {
  0%, 100% {
    color: #ff0000;
  }
  25% {
    color: #00ff00;
  }
  50% {
    color: #0000ff;
  }
  75% {
    color: #ff00ff;
  }
}

/* Klasse zur Aktivierung des Party-Modus */
.party-mode {
  display: inline-block;
  animation: partyText 1s infinite alternate ease-in-out;
}

/* ============================
   Grow & Glow Animation (Desktop u.a.)
   Lässt das Element von klein zu groß wachsen und dabei aufleuchten.
   ============================
*/
@keyframes growAndGlow {
  /* Start: Kleiner, unsichtbar */
  0% {
    transform: scale(0.5);
    opacity: 0;
    text-shadow: 0 0 0 var(--glow-color, #fff);
  }
  /* Mittlerer Zustand: Schnelles Wachstum und Einblenden */
  50% {
    transform: scale(1.1);
    opacity: 1;
    text-shadow: 0 0 10px var(--glow-color, #fff);
  }
  /* Endzustand: Reduziertes Wachstum, stabiler Glow */
  100% {
    transform: scale(1.0);
    opacity: 1;
    text-shadow: 0 0 20px var(--glow-color, #fff);
  }
}

/* Klasse zur Anwendung der Grow & Glow Animation */
.grow-and-glow {
  animation: growAndGlow 1.5s ease-out forwards;
}

/* ============================
   FadeOut Animation (Desktop u.a.)
   Lässt das Element langsam ausblenden.
   ============================
*/
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Klasse zur Anwendung der FadeOut Animation */
.fade-out {
  animation: fadeOut 1s ease-out forwards;
}

/* ============================
   Spezielle Glow-Effekte für Video und Kontaktbild (Desktop u.a.)
   Fügt spezielle Box-Shadow Effekte hinzu.
   ============================
*/
.glowing-red {
  box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.6);
  transition: box-shadow 0.3s ease-in-out;
}

#nostalgie-video.glowing-red {
  box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.6) !important;
  transition: box-shadow 0.3s ease-in-out;
}

.contact-glow {
  box-shadow: 0 0 20px 5px #00ff00 !important;
  filter: drop-shadow(0 0 10px #00ff00) !important;
}