/* Preloader Container */
.no-scroll-preload {
  overflow: hidden;
  height: auto;
}

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #202124;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  color: white;
}

/* Atom Loader */
.atom {
  position: relative;
  width: 200px;
  height: 200px;
}

/* Orbits */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
  border: 1px solid rgba(255, 255, 255, 0.3); /* Orbit lines visible */
}

.orbit-1 {
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
}

.orbit-2 {
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}

.orbit-3 {
  width: 180px;
  height: 180px;
  margin-top: -90px;
  margin-left: -90px;
}

/* Electrons */
.electron {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.electron-1 {
  background-color: #FF5733; /* Orange */
  animation: randomOrbitMovement1 infinite 2s linear; /* Faster, clockwise */
}

.electron-2 {
  background-color: #33FF57; /* Green */
  animation: randomOrbitMovement2 infinite 3s linear; /* Medium speed, counter-clockwise */
}

.electron-3 {
  background-color: #3357FF; /* Blue */
  animation: randomOrbitMovement3 infinite 4s linear; /* Slower, clockwise */
}

/* Nucleus */
.atom::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  background: #FF4500;
  border-radius: 50%;
  box-shadow: 0 0 5px #FF4500;
  animation: nucleusPulse 1s infinite cubic-bezier(.65, 0, .35, 1); /* Faster beat with minimal size increase */
}

@keyframes nucleusPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); } /* Slight size increase */
}

/* Random Electron Movement in Orbit */
@keyframes randomOrbitMovement1 {
  0% { transform: rotate(0deg) translateX(50px) rotate(0deg); } /* Starting position at 0 degrees */
  25% { transform: rotate(90deg) translateX(50px) rotate(-90deg); }
  50% { transform: rotate(180deg) translateX(50px) rotate(-180deg); }
  75% { transform: rotate(270deg) translateX(50px) rotate(-270deg); }
  100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); } /* Complete one clockwise revolution */
}

@keyframes randomOrbitMovement2 {
  0% { transform: rotate(45deg) translateX(-70px) rotate(45deg); } /* Start 45 degrees offset, counter-clockwise */
  25% { transform: rotate(-45deg) translateX(-70px) rotate(-45deg); }
  50% { transform: rotate(-135deg) translateX(-70px) rotate(-135deg); }
  75% { transform: rotate(-225deg) translateX(-70px) rotate(-225deg); }
  100% { transform: rotate(-315deg) translateX(-70px) rotate(-315deg); } /* Complete one counter-clockwise revolution */
}

@keyframes randomOrbitMovement3 {
  0% { transform: rotate(90deg) translateX(90px) rotate(90deg); } /* Start 90 degrees offset, clockwise */
  25% { transform: rotate(180deg) translateX(90px) rotate(180deg); }
  50% { transform: rotate(270deg) translateX(90px) rotate(270deg); }
  75% { transform: rotate(360deg) translateX(90px) rotate(360deg); }
  100% { transform: rotate(450deg) translateX(90px) rotate(450deg); } /* Complete one clockwise revolution */
}

@keyframes fadeInAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.disappear {
  animation: vanish 1s forwards;
}

@keyframes vanish {
  100% { opacity: 1; visibility: hidden; }
}

/* Loading Text */
.loading-text {
  position: absolute;
  bottom: 20px; /* Close to the bottom */
  font-size: 16px;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  animation: blinkAnimation 1s infinite; /* Blinking effect */
}

@keyframes blinkAnimation {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}