:root {
  --gold: #d4af37;
  --beige-light: #fff8ef;
  --beige-dark: #f2e7d8;
  --ink: #2a2a2a;
}

/* Overlay */
#rc-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, var(--beige-light), var(--beige-dark));
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#rc-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* ---------------- Brand pack ---------------- */
.brand-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(92vw, 640px);
  transition: all 1s ease;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
  min-width: 0;
  white-space: nowrap;
  transition: all 1s ease;
}

/* Initial big logo */
.loader-logo {
  height: clamp(96px, 22vw, 140px);
  transition: height 1s ease, transform 1s ease, filter 1s ease;
  transform: translateX(55px); /* small nudge right */
}

/* Title block */
.loader-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 1s ease, transform 1s ease;
  font-family: "Poppins", system-ui, sans-serif;
}
.loader-title .main {
  font-size: clamp(20px, 4.2vw, 32px);
  font-weight: 900;
  color: #3b2b13; /* Royal */
}
.loader-title .main .light {
  font-weight: 800;
  color: #73582e; /* car */
}
.loader-title .tagline {
  font-size: clamp(9px, 1.8vw, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 3px;
  color: #a5855f; /* CARS RENTAL */
}

/* After 2s → shrink logo & reveal title */
#rc-loader.ready .brand-stage {
  justify-content: center;
}
#rc-loader.ready .logo-wrap {
  justify-content: flex-start;
}
#rc-loader.ready .loader-logo {
  height: clamp(44px, 8vw, 64px);
  transform: translateX(0);
}
#rc-loader.ready .loader-title {
  opacity: 1;
  transform: translateX(0);
}

/* ---------------- Progress + helper ---------------- */
.bottom-area {
  margin-top: 24px;
  text-align: center;
}
.progress {
  width: min(76vw, 340px);
  height: 3px;
  border-radius: 2px;
  margin: 0 auto 10px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.progress .bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #fff2a8, var(--gold));
  transition: width 0.25s linear;
}
.helper {
  font: 500 clamp(12px, 2.8vw, 14px) / 1.6 "Poppins", system-ui, sans-serif;
  color: #5c4a3a;
}

/* ---------------- XS tweaks ---------------- */
@media (max-width: 360px) {
  .logo-wrap {
    gap: 8px;
  }
  .loader-logo {
    height: 58px;
    transform: translateX(6px);
  }
  #rc-loader.ready .loader-logo {
    height: 46px;
  }
  .loader-title .main {
    font-size: 20px;
  }
  .loader-title .tagline {
    font-size: 9px;
    letter-spacing: 1.6px;
  }
}
/* track */
.progress {
  width: min(76vw, 340px);
  height: 6px; /* a bit thicker */
  border-radius: 999px;
  margin: 0 auto 10px;
  background: rgba(0, 0, 0, 0.12); /* gray track */
  overflow: hidden;
  position: relative; /* for abs child (optional) */
}

/* fill */
.progress .bar {
  display: block; /* <-- key fix */
  /* OR: position:absolute; left:0; top:0; bottom:0; */
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d49537 0%, #c4b177 50%, #d49537 100%);
  transition: width 0.25s linear;
}