/* Loading Overlay Animation */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at center, rgba(52, 52, 63, 0.95) 0%, rgba(26, 26, 31, 0.98) 50%, rgba(0, 0, 0, 0.99) 100%),
    linear-gradient(135deg, rgba(251, 61, 40, 0.03) 0%, rgba(255, 120, 81, 0.02) 50%, rgba(52, 52, 63, 0.05) 100%);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(8px) saturate(1.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-overlay.show {
  display: flex;
  animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px) saturate(1.2);
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 40px;
  background: 
    radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 50%, transparent 100%),
    linear-gradient(135deg, rgba(251, 61, 40, 0.08) 0%, rgba(255, 120, 81, 0.05) 50%, rgba(52, 52, 63, 0.1) 100%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: containerSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

@keyframes containerSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.loading-text-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.loading-text {
  font-size: 24px;
  font-weight: 600;
  color: var(--light-gray);
  letter-spacing: 1px;
  text-shadow: 
    0 0 10px rgba(237, 231, 231, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.5);
  animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
  from {
    text-shadow: 
      0 0 10px rgba(237, 231, 231, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.5);
  }
  to {
    text-shadow: 
      0 0 20px rgba(237, 231, 231, 0.6),
      0 0 30px rgba(251, 61, 40, 0.2),
      0 2px 4px rgba(0, 0, 0, 0.5);
  }
}

/* Spinner Animation */
.loader {
  width: 120px;
  height: 120px;
  border: solid 6px transparent;
  border-top: solid 8px var(--red);
  border-radius: 50%;
  position: relative;
  animation: rotation_spinner 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
  filter: drop-shadow(0 0 20px rgba(251, 61, 40, 0.4));
}

.loader::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 3px solid transparent;
  border-top: 3px solid rgba(255, 120, 81, 0.6);
  border-radius: 50%;
  animation: rotation_spinner 2s infinite linear reverse;
}



@keyframes rotation_spinner {
  0% {
    transform: rotate(0deg);
    box-shadow: 
      0px 0px 25px 20px rgba(251, 61, 40, 0.2),
      0px 0px 50px 10px rgba(255, 120, 81, 0.1);
  }
  
  50% {
    box-shadow: 
      0px 0px 30px 25px rgba(251, 61, 40, 0.3),
      0px 0px 60px 15px rgba(255, 120, 81, 0.15);
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 
      0px 0px 25px 20px rgba(251, 61, 40, 0.2),
      0px 0px 50px 10px rgba(255, 120, 81, 0.1);
  }
}

/* Bouncing Balls Animation */
.bouncing-wrapper {
  width: 80px;
  height: 40px;
  position: relative;
  z-index: 1;
}

.bouncing-circle {
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--orange), rgba(255, 120, 81, 0.8));
  left: 10%;
  transform-origin: 50%;
  animation: bounce_circle 0.6s alternate infinite ease;
  box-shadow: 
    0 0 15px rgba(255, 120, 81, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 0 8px rgba(255, 120, 81, 0.4));
}

@keyframes bounce_circle {
  0% {
    top: 32px;
    height: 3px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }

  40% {
    height: 12px;
    border-radius: 50%;
    transform: scaleX(1);
  }

  100% {
    top: 0%;
  }
}

.bouncing-circle:nth-child(2) {
  left: 40%;
  animation-delay: 0.2s;
  background: linear-gradient(45deg, var(--red), rgba(251, 61, 40, 0.8));
  box-shadow: 
    0 0 15px rgba(251, 61, 40, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 0 8px rgba(251, 61, 40, 0.4));
}

.bouncing-circle:nth-child(3) {
  left: auto;
  right: 10%;
  animation-delay: 0.4s;
  background: linear-gradient(45deg, var(--light-gray), rgba(237, 231, 231, 0.8));
  box-shadow: 
    0 0 15px rgba(237, 231, 231, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 0 8px rgba(237, 231, 231, 0.3));
}

.bouncing-shadow {
  width: 12px;
  height: 2px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  position: absolute;
  top: 36px;
  transform-origin: 50%;
  z-index: -1;
  left: 10%;
  filter: blur(2px);
  animation: bounce_shadow 0.6s alternate infinite ease;
}

@keyframes bounce_shadow {
  0% {
    transform: scaleX(1.5);
    opacity: 0.8;
  }

  40% {
    transform: scaleX(1);
    opacity: 0.6;
  }

  100% {
    transform: scaleX(0.3);
    opacity: 0.3;
  }
}

.bouncing-shadow:nth-child(5) {
  left: 40%;
  animation-delay: 0.2s;
}

.bouncing-shadow:nth-child(6) {
  left: auto;
  right: 10%;
  animation-delay: 0.4s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .loading-container {
    gap: 40px;
    padding: 30px;
    border-radius: 20px;
  }
  
  .loading-content {
    gap: 30px;
  }
  
  .loading-text {
    font-size: 20px;
  }
  
  .loader {
    width: 100px;
    height: 100px;
    border: solid 5px transparent;
    border-top: solid 6px var(--red);
    filter: drop-shadow(0 0 15px rgba(251, 61, 40, 0.4));
  }
  
  .loader::before {
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-width: 2px;
    border-top: 2px solid rgba(255, 120, 81, 0.6);
  }
  

  
  .bouncing-wrapper {
    width: 70px;
    height: 35px;
  }
  
  .bouncing-circle {
    width: 10px;
    height: 10px;
  }
  
  @keyframes bounce_circle {
    0% {
      top: 28px;
      height: 2px;
      border-radius: 50px 50px 25px 25px;
      transform: scaleX(1.7);
    }

    40% {
      height: 10px;
      border-radius: 50%;
      transform: scaleX(1);
    }

    100% {
      top: 0%;
    }
  }
  
  .bouncing-shadow {
    width: 10px;
    height: 2px;
    top: 32px;
  }
}