/* Hide default spinner */
#loading-box .spinner-box {
  display: none !important;
}

/* Custom Loader Container */
#loading-box {
  background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%) !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Wave Animation Container */
#loading-box::before {
  content: "";
  position: relative;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation: wave 6s linear infinite;
  box-shadow: 0 0 20px rgba(0, 188, 212, 0.5);
  margin-bottom: 20px;
}

/* Inner Wave */
#loading-box::after {
  content: "码海拾贝";
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  color: #006064;
  letter-spacing: 4px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  animation: float 3s ease-in-out infinite;
  z-index: 10;
  margin-top: 160px; /* Position text below the wave */
}

/* Animations */
@keyframes wave {
  0% {
    transform: rotate(0deg);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  33% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  66% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
  100% {
    transform: rotate(360deg);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
}

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