.spinner {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #D25D5D;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.logo {
    width: 120px;
    position: relative;
    z-index: 10;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

.float-y {
  animation: floatY 2.5s ease-in-out infinite;
}

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

.float-x {
  animation: floatX 2.5s ease-in-out infinite;
}


@keyframes wave {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 1440px;
  }
}

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 9s linear infinite;
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-down {
  animation: fadeDown 1s ease forwards;
}

.fade-up {
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.4s;
}

@keyframes cap-shake {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(10deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.shake-cap {
  display: inline-block;
  animation: cap-shake 2s ease-in-out infinite;
  transform-origin: bottom center; 
}