.star-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Komplett transparent */
}

.star-transition.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo-Transition gleichermaßen */
.logo-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Komplett transparent */
}

.logo-transition.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Transition-Elemente Styling - größerer Stern */
.transition-star,
.transition-logo {
  width: 100px; /* Von 80px auf 120px vergrößert */
  height: 100px; /* Von 80px auf 120px vergrößert */
  transform-origin: center;
  object-fit: contain;
  position: absolute; /* Hinzugefügt für absolute Positionierung */
}

/* Neue Spring-Animationen statt Zoom */
.star-zoom-in,
.logo-zoom-in {
  animation: spring-up 0.8s ease-out forwards;
}

.star-zoom-out,
.logo-zoom-out {
  animation: spring-down 0.8s ease-in forwards;
}

/* Verbesserte Spring-Animation aufwärts */
@keyframes spring-up {
  0% {
      transform: translateY(0) rotate(0deg) scale(1);
      opacity: 1;
  }
  40% {
      transform: translateY(-80px) rotate(15deg) scale(1.5); /* Größer */
      opacity: 1;
  }
  60% {
      transform: translateY(-100px) rotate(-15deg) scale(2.0); /* Größer */
      opacity: 0.9;
  }
  80% {
      transform: translateY(-120px) rotate(10deg) scale(2.5); /* Größer */
      opacity: 0.7;
  }
  100% {
      transform: translateY(-150px) rotate(0deg) scale(3.0); /* Größer */
      opacity: 0;
  }
}

/* Fröhliche Spring-Animation abwärts */
@keyframes spring-down {
  0% {
      transform: translateY(-150px) scale(2);
      opacity: 0;
  }
  20% {
      transform: translateY(-100px) rotate(15deg) scale(1.5);
      opacity: 0.7;
  }
  40% {
      transform: translateY(-50px) rotate(-10deg) scale(1.3);
      opacity: 0.9;
  }
  60% {
      transform: translateY(-20px) rotate(5deg) scale(1.1);
      opacity: 1;
  }
  80% {
      transform: translateY(10px) rotate(0deg);
      opacity: 1;
  }
  100% {
      transform: translateY(0) scale(0.5);
      opacity: 0;
  }
}

/* Schlangen-Übergangs-Container */
.snake-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.snake-transition.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Schlangen-Animation */
.snake-animation {
  position: center;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  width: 150px;
  height: 30px;
  transform-origin: center;
}

.snake-head {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #FF4B8A; /* Pink wie im Snake-Spiel */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  left: 0;
  top: 0;
  z-index: 10;
}

.snake-head::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  top: 8px;
  left: 7px;
  box-shadow: 12px 0 0 white; /* Zweites Auge */
}

.snake-head::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 4px;
  background-color: white;
  border-radius: 4px;
  bottom: 7px;
  left: 10px; /* Mund */
}

.snake-body {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #e04378; /* Etwas dunkleres Pink für den Körper */
  border-radius: 50%;
}

.s1 { left: 20px; top: 2px; }
.s2 { left: 40px; top: 2px; }
.s3 { left: 60px; top: 2px; }
.s4 { left: 80px; top: 2px; }
.s5 { left: 100px; top: 2px; }

/* Schlangen-Animation-Klassen */
.snake-spring-up {
  animation: spring-up 0.8s ease-out forwards;
}

.snake-spring-down {
  animation: spring-down 0.8s ease-in forwards;
}

/* Füge diese Styles für das Schlangen-Emoji hinzu */
.emoji-snake {
  position: absolute;
  font-size: 60px; /* Größeres Emoji */
  transform-origin: center;
  z-index: 9999;
}

/* Animation-Klassen für das Emoji */
.emoji-spring-up {
  animation: spring-up 0.8s ease-out forwards;
}

.emoji-spring-down {
  animation: spring-down 0.8s ease-in forwards;
}

/* Stern-Emoji Styling */
.emoji-star {
  position: absolute;
  font-size: 60px; /* Größerer Stern */
  transform-origin: center;
  z-index: 9999;

  /* Wichtig: Sichtbarkeit garantieren */
  opacity: 1;
  color: gold; /* Goldene Farbe für bessere Sichtbarkeit */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

/* Animation-Klassen für den Stern-Emoji */
.emoji-star.star-zoom-in {
  animation: spring-up 0.8s ease-out forwards;
}

.emoji-star.star-zoom-out {
  animation: spring-down 0.8s ease-in forwards;
}