html,
body {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}

body.theme-dark {
  background-color: #111;
}

/* =========================
   PRELOADER BASE
========================= */
.preloader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.theme-dark .preloader {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* =========================
   CONTAINER
========================= */
.preloader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* =========================
   LOGO
========================= */
.preloader-logo-container {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoFloat 3s ease-in-out infinite;
}

.preloader-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  animation: logoGlow 3s ease-in-out infinite alternate;
}

/* =========================
   TEXT
========================= */
.preloader-title {
  font-family: "Roboto", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
  animation: titleGlow 2.5s ease-in-out infinite alternate;
}

.preloader-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
  animation: subtitleFade 3s ease-in-out infinite;
}

/* typing dots */
.preloader-subtitle::after {
  content: "";
  animation: loadingDots 2s infinite;
}

/* =========================
   PROGRESS BAR (JOB LOADER)
========================= */
.job-loader {
  width: 200px;
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.job-loader::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fff, #e2e8f0, #fff);
  animation: jobProgress 2.5s ease-in-out infinite;
  border-radius: 50px;
}

/* =========================
   DOTS
========================= */
.job-dots {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.job-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  animation: dotPulse 1.4s ease-in-out infinite;
}

.job-dot:nth-child(2) { animation-delay: 0.2s; }
.job-dot:nth-child(3) { animation-delay: 0.4s; }
.job-dot:nth-child(4) { animation-delay: 0.6s; }

/* =========================
   FLOATING JOB ICONS
========================= */
.job-icons-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.job-icon {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.7rem;
  color: #fff;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);

  animation: jobFloat 6s ease-in-out infinite;
  opacity: 0.7;
}

/* positions */
.job-icon-1 { left: 10%; top: 15%; animation-delay: 0s; }
.job-icon-2 { left: 85%; top: 20%; animation-delay: 0.5s; }
.job-icon-3 { left: 15%; top: 70%; animation-delay: 1s; }
.job-icon-4 { left: 80%; top: 75%; animation-delay: 1.5s; }
.job-icon-5 { left: 5%; top: 45%; animation-delay: 2s; }
.job-icon-6 { left: 90%; top: 50%; animation-delay: 2.5s; }
.job-icon-7 { left: 25%; top: 25%; animation-delay: 3s; }
.job-icon-8 { left: 70%; top: 30%; animation-delay: 3.5s; }
.job-icon-9 { left: 30%; top: 80%; animation-delay: 4s; }
.job-icon-10 { left: 65%; top: 85%; animation-delay: 4.5s; }
.job-icon-11 { left: 8%; top: 60%; animation-delay: 5s; }
.job-icon-12 { left: 88%; top: 65%; animation-delay: 5.5s; }
.job-icon-13 { left: 40%; top: 10%; animation-delay: 6s; }
.job-icon-14 { left: 55%; top: 15%; animation-delay: 0.8s; }
.job-icon-15 { left: 45%; top: 90%; animation-delay: 1.3s; }
.job-icon-16 { left: 20%; top: 50%; animation-delay: 1.8s; }
.job-icon-17 { left: 75%; top: 55%; animation-delay: 2.3s; }
.job-icon-18 { left: 35%; top: 35%; animation-delay: 2.8s; }
.job-icon-19 { left: 60%; top: 40%; animation-delay: 3.3s; }
.job-icon-20 { left: 12%; top: 85%; animation-delay: 3.8s; }

/* =========================
   ANIMATIONS
========================= */
@keyframes jobFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-18px) scale(1.08);
    opacity: 1;
  }
}

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

@keyframes logoGlow {
  0% {
    filter: brightness(0) invert(1);
  }
  100% {
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,0.4));
  }
}

@keyframes titleGlow {
  0% {
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
  }
  100% {
    text-shadow: 0 0 25px rgba(255,255,255,0.6);
  }
}

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

@keyframes jobProgress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.3); opacity: 1; }
}

@keyframes loadingDots {
  0%, 20% { content: ""; }
  40% { content: "."; }
  60% { content: ".."; }
  80%, 100% { content: "..."; }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .preloader-title {
    font-size: 2rem;
  }

  .preloader-logo-container {
    width: 100px;
    height: 100px;
  }

  .preloader-img {
    width: 60px;
    height: 60px;
  }

  .job-loader {
    width: 160px;
  }

  .job-icon {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
}