/* Space-themed CSS variables for loading screen */
:root {
  --space-navy: #0a0e27;
  --space-blue: #1a237e;
  --space-purple: #4a148c;
  --cosmic-pink: #e91e63;
  --neon-green: #00e676;
  --star-yellow: #ffeb3b;
  --alien-green: #76ff03;
  --meteor-orange: #ff5722;
  --nebula-purple: #9c27b0;
  --space-white: #f8f9fa;
}

.epselipso-loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--space-navy) 0%, var(--space-blue) 50%, var(--space-purple) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  overflow: hidden;
}

.epselipso-loading-container.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.epselipso-loading-container.fade-to-login {
  animation: fade-to-login 1.5s ease-out forwards;
}

.epselipso-loading-container.explode-to-epselipso {
  animation: explode-to-epselipso 1s ease-out forwards;
}

@keyframes fade-to-login {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 0.3;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes explode-to-epselipso {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) blur(0px);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
    filter: brightness(1.2) blur(0px);
  }
  70% {
    opacity: 0.9;
    transform: scale(1.3);
    filter: brightness(1.4) blur(1px);
  }
  90% {
    opacity: 0.4;
    transform: scale(1.5);
    filter: brightness(1.6) blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
    filter: brightness(2) blur(3px);
  }
}

.epselipso-loading-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, var(--star-yellow), transparent),
    radial-gradient(2px 2px at 40px 70px, var(--space-white), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--cosmic-pink), transparent),
    radial-gradient(1px 1px at 130px 80px, var(--neon-green), transparent),
    radial-gradient(2px 2px at 160px 30px, var(--star-yellow), transparent),
    radial-gradient(1px 1px at 200px 50px, var(--alien-green), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: starfield 25s linear infinite;
  opacity: 0.6;
  z-index: 1;
}


@keyframes starfield {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-200px) translateX(-100px); }
}

.epselipso-loading-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 600px;
  padding: 40px 20px;
}

/* Cosmic Orbital Loader */
.cosmic-loader {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 40px;
  perspective: 1000px;
}

.orbit-ring {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.orbit-1 {
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-color: rgba(233, 30, 99, 0.4);
  animation: orbit-spin 8s linear infinite;
}

.orbit-2 {
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-color: rgba(0, 230, 118, 0.4);
  animation: orbit-spin 12s linear infinite reverse;
}

.orbit-3 {
  display: none;
}

.planet {
  position: absolute;
  border-radius: 50%;
  top: -6px;
  left: -6px;
  box-shadow: 0 0 15px currentColor;
}

.planet-1 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, var(--cosmic-pink), #c2185b);
  animation: planet-glow 3s ease-in-out infinite alternate;
}

.planet-2 {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, var(--neon-green), #00c853);
  animation: planet-glow 4s ease-in-out infinite alternate;
}

.planet-3 {
  display: none;
}

.central-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
}

.central-core::before {
  display: none;
}

.central-core img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in;
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: none;
}

.central-core img.loaded,
.central-core img[src*="load-middle.png"] {
  opacity: 1;
}

.central-core::after {
    content: none !important;
    display: none !important;
}

@keyframes orbit-spin {
  0% { transform: rotateZ(0deg) rotateY(0deg); }
  100% { transform: rotateZ(360deg) rotateY(360deg); }
}

@keyframes planet-glow {
  0% { box-shadow: 0 0 10px currentColor; }
  100% { box-shadow: 0 0 25px currentColor, 0 0 40px currentColor; }
}

@keyframes core-pulse {
  0% { 
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(0, 230, 118, 0.4),
      0 0 40px rgba(233, 30, 99, 0.2),
      0 0 60px rgba(255, 235, 59, 0.1);
  }
  100% { 
    transform: scale(1.1);
    box-shadow: 
      0 0 30px rgba(0, 230, 118, 0.6),
      0 0 60px rgba(233, 30, 99, 0.4),
      0 0 90px rgba(255, 235, 59, 0.3);
  }
}

@keyframes core-twinkle {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
  }
  50% { 
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

/* Enhanced explosion effects for galaxy elements */
.epselipso-loading-container.explode-to-epselipso .cosmic-loader {
  animation: cosmic-explode 1s ease-out forwards;
}

.epselipso-loading-container.explode-to-epselipso .orbit-ring {
  animation: orbit-explode 1s ease-out forwards;
}

.epselipso-loading-container.explode-to-epselipso .orbit-3 {
  display: none;
}

.epselipso-loading-container.explode-to-epselipso .planet {
  animation: planet-explode 1s ease-out forwards;
}

.epselipso-loading-container.explode-to-epselipso .central-core {
  animation: none;
}

@keyframes cosmic-explode {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  60% { transform: scale(1.2) rotate(90deg); opacity: 0.8; }
  100% { transform: scale(1.4) rotate(180deg); opacity: 0; }
}

@keyframes orbit-explode {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  70% { transform: scale(1.3) rotate(360deg); opacity: 0.6; }
  100% { transform: scale(1.6) rotate(540deg); opacity: 0; }
}


@keyframes planet-explode {
  0% { transform: scale(1); box-shadow: 0 0 15px currentColor; opacity: 1; }
  60% { transform: scale(1.5); box-shadow: 0 0 25px currentColor, 0 0 40px currentColor; opacity: 0.7; }
  100% { transform: scale(2); box-shadow: 0 0 40px currentColor, 0 0 60px currentColor; opacity: 0; }
}

@keyframes core-explode {
  0% { 
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(0, 230, 118, 0.4),
      0 0 40px rgba(233, 30, 99, 0.2),
      0 0 60px rgba(255, 235, 59, 0.1);
    opacity: 1;
  }
  50% { 
    transform: scale(1);
    box-shadow: 
      0 0 40px rgba(0, 230, 118, 0.7),
      0 0 80px rgba(233, 30, 99, 0.5),
      0 0 120px rgba(255, 235, 59, 0.4);
    opacity: 0.8;
  }
  100% { 
    transform: scale(1);
    box-shadow: 
      0 0 60px rgba(0, 230, 118, 0.9),
      0 0 120px rgba(233, 30, 99, 0.7),
      0 0 180px rgba(255, 235, 59, 0.6);
    opacity: 0;
  }
}

/* Progress Bar */
.epselipso-progress-bar {
  width: 300px;
  height: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(233, 30, 99, 0.3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.epselipso-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cosmic-pink), var(--neon-green), var(--star-yellow));
  border-radius: 10px;
  width: 0%;
  box-shadow: 0 0 15px rgba(233, 30, 99, 0.6);
  position: relative;
  transition: width 0.3s ease;
}

.epselipso-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Floating Elements */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: absolute;
  color: var(--star-yellow);
  font-size: 20px;
  animation: float-drift 15s ease-in-out infinite;
  text-shadow: 0 0 10px currentColor;
}

.star-1 { top: 15%; left: 10%; animation-delay: 0s; }
.star-2 { top: 25%; right: 15%; animation-delay: 2s; }
.star-3 { bottom: 30%; left: 20%; animation-delay: 4s; }
.star-4 { top: 60%; right: 25%; animation-delay: 6s; }
.star-5 { bottom: 15%; right: 10%; animation-delay: 8s; }

.ufo {
  position: absolute;
  font-size: 30px;
  animation: ufo-fly 20s linear infinite;
  filter: drop-shadow(0 0 10px var(--neon-green));
}

.ufo-1 {
  top: 20%;
  left: calc(50% - 100px);
  animation-delay: 0s;
}

@keyframes float-drift {
  0%, 100% { transform: translateY(0px) scale(1); }
  25% { transform: translateY(-20px) scale(1.1); }
  50% { transform: translateY(0px) scale(0.9); }
  75% { transform: translateY(-15px) scale(1.05); }
}

@keyframes ufo-fly {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(25vw) translateY(-20px) rotate(5deg); }
  50% { transform: translateX(50vw) translateY(0) rotate(0deg); }
  75% { transform: translateX(75vw) translateY(-15px) rotate(-5deg); }
  100% { transform: translateX(calc(100vw + 100px)) translateY(0) rotate(0deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .cosmic-loader {
    width: 150px;
    height: 150px;
  }

  .orbit-1 { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
  .orbit-2 { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  .orbit-3 { width: 150px; height: 150px; margin: -75px 0 0 -75px; }

  .epselipso-progress-bar {
    width: 250px;
  }

  .ufo, .star {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .cosmic-loader {
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
  }

  .orbit-1 { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  .orbit-2 { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; }
  .orbit-3 { width: 120px; height: 120px; margin: -60px 0 0 -60px; }

  .epselipso-progress-bar {
    width: 200px;
    height: 4px;
  }

  .epselipso-loading-content {
    padding: 20px 15px;
  }
}