/* =========================
   FULL SCREEN LOADER
========================= */
.loader {
  position: fixed;
  inset: 0;
  /* Switched to a clean white background */
background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 9999;
  padding: 20px;
}

/* =========================
   CENTER TEXT AREA
========================= */
.card {
  text-align: center;
  margin-bottom: 80px;
  width: 100%;
}

.loader-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 200;
  color: #4b5563; 
  letter-spacing: 1px;
  text-transform: lowercase;
}

/* =========================
   WORD SWITCH
========================= */
.words {
  height: 30px;
  overflow: hidden;
  position: relative;
}

/* fade top + bottom (white theme) */
.words::before,
.words::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 2;
  pointer-events: none;
}

/* top fade */
.words::before {
  top: 0;
  background: linear-gradient(to bottom, #ffffff, transparent);
}

/* bottom fade */
.words::after {
  bottom: 0;
  background: linear-gradient(to top, #ffffff, transparent);
}

.word {
  display: block;
  height: 30px;
  line-height: 30px;
  color: #f97316;
  font-weight: 400;
  animation: spin 8s ease-in-out infinite;
}

@keyframes spin {
  0%   { transform: translateY(0%); }
  18%  { transform: translateY(-100%); }
  36%  { transform: translateY(-200%); }
  54%  { transform: translateY(-300%); }
  72%  { transform: translateY(-400%); }
  100% { transform: translateY(0%); }
}

/* =========================
   PROGRESS BAR SECTION
========================= */
.progress-wrap {
  position: absolute;
  bottom: 10%;
  width: 85%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
}

/* RESPONSIVE PERCENTAGE LABEL */
.percent {
  align-self: flex-end;
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  color: #f97316;
  line-height: 1;
  letter-spacing: -1px;
  /* Shadow removed for a cleaner look on white, or kept subtle */
  text-shadow: 2px 2px 10px rgba(249, 115, 22, 0.1);
}

/* track */
.track {
  width: 100%;
  height: clamp(8px, 2vw, 12px);
  /* Light gray track for white background */
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

/* fill */
.fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #f97316, #fb923c);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================
   MOBILE SPECIFIC ADJUSTMENTS
========================= */
@media (max-width: 480px) {
  .card {
    margin-bottom: 60px;
  }
  
  .loader-text {
    flex-direction: column;
    gap: 5px;
  }

  .progress-wrap {
    bottom: 15%;
  }
}

/* =========================
   HIDE ANIMATION
========================= */
.hide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#app-content {
  opacity: 0;
  /* pointer-events: none prevents users from clicking hidden links 
     while the loader is still active */
  pointer-events: none; 
  transition: opacity 1.2s ease-in-out;
}

/* This class is added by your JS at 100% */
#app-content.show {
  opacity: 1;
  pointer-events: auto;
}