/* ==========================================================================
   Preloader
   Fullscreen overlay shown during initial asset loading.
   GSAP controls the progress bar width and percentage counter updates.
   ========================================================================== */

#preloader {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  /* clip-path start state for exit wipe */
  clip-path: inset(0% 0% 0% 0%);
}

/* Company wordmark */
.preloader-logo {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  color: var(--color-text-primary);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.95;
  text-align: center;
  padding-inline: 1rem;
}

/* "CNC" portion rendered in accent color */
.preloader-logo span {
  color: var(--color-accent);
  text-shadow: 0 0 20px var(--color-accent-glow);
}

/* Progress bar track */
.preloader-bar-container {
  width: min(480px, 80vw);
  height: 3px;
  background: var(--preloader-track-bg, rgba(255, 255, 255, 0.08));
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* Animated fill — GSAP drives the width from 0% → 100% */
#preloader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-glow));
  border-radius: 2px;
  box-shadow: 0 0 14px var(--color-accent), 0 0 30px var(--color-accent-glow);
  will-change: width;
}

/* Percentage counter wrapper */
.preloader-percent-container {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--color-accent);
  letter-spacing: 0.12em;
  opacity: 0.8;
}

/* Numeric percentage value */
#preloader-percent {
  /* Inline with the % sign — no gap */
}