@keyframes sparkle {
  0% {
    opacity: 0;
    rotate: 0deg;
    scale: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
    rotate: 180deg;
    scale: 1;
  }
  30% {
    rotate: 180deg;
    scale: 0;
    opacity: 0;
  }
}

@keyframes fall {
  0% {
    transform: translateY(-20rem) rotate(0deg);
  }
  10% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(120rem) rotate(360deg);
  }
}

@keyframes fadeout {
  0% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

/* Keyframes for the shake animation */
@keyframes shake {
  0% {
    transform: rotate(0deg); /* Start with no rotation */
  }
  10% {
    transform: rotate(-5deg); /* Rotate slightly counterclockwise */
  }
  20% {
    transform: rotate(5deg); /* Rotate slightly clockwise */
  }
  30% {
    transform: rotate(-4deg); /* Rotate counterclockwise, less than before */
  }
  40% {
    transform: rotate(4deg); /* Rotate clockwise, less than before */
  }
  50% {
    transform: rotate(-3deg); /* Gradual smaller shake */
  }
  60% {
    transform: rotate(3deg);
  }
  70% {
    transform: rotate(-2deg);
  }
  80% {
    transform: rotate(2deg);
  }
  90% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.animate-shake:hover {
  animation: shake 0.6s ease-in-out;
  animation-iteration-count: 1;
}

.animate-fadeout {
  opacity: 0;
  animation: fadeout 10s linear infinite, fall 10s linear infinite;
  z-index: -30;
}

.animate-sparkle {
  opacity: 0;
  animation: sparkle 3s infinite;
}

.delay400 {
  animation-delay: 400ms;
}
.delay800 {
  animation-delay: 800ms;
}
.delay1600 {
  animation-delay: 1600ms;
}
.delay2000 {
  animation-delay: 2000ms;
}
.delay3000 {
  animation-delay: 3000ms;
}
.delay6000 {
  animation-delay: 6000ms;
}
.delay7000 {
  animation-delay: 7000ms;
}
.delay8000 {
  animation-delay: 8000ms;
}
.scene {
  perspective: 1000px;
}

.rectangle {
  background-color: #003366;
  transition: transform 1s ease;
  transform-style: preserve-3d;
  position: relative;
  transform-origin: right;
}

.rectangle.rotate {
  transform: rotateY(120deg);
}

.scene.move {
  transform: translate(-2rem);
}

.elf1.move {
  transform: translate(-4rem) rotate(-20deg);
}

.elf2.move {
  transform: translateY(-6rem);
}

.rectangle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  border: 4px solid white;
  background-color: #003366;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}