/* ================================================================
   ExcelTechPlus — Premium Startup Loader  (v2)
   Brand Colors: #123F86 (Dark Blue) | #42A5F5 (Light Blue)
   Design: Clean rings aura, NO blur, large crisp logo
================================================================ */

/* ── Overlay ────────────────────────────────────────────────── */
#loader-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

#loader-overlay.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Content block ──────────────────────────────────────────── */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

/* ── Logo container ─────────────────────────────────────────── */
.loader-logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 230px;
  opacity: 0;
  animation: logoEnter 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* ── Light disc behind logo — NO blur, just clean color ─────── */
/* This is a pure radial gradient, no filter, fully crisp */
.loader-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(66, 165, 245, 0.09) 0%,
    rgba(18,  63, 134, 0.05) 48%,
    transparent               72%
  );
  animation: glowBreathe 3.2s ease-in-out infinite;
}

/* ── Inner ring ─────────────────────────────────────────────── */
.loader-logo-container::before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid rgba(18, 63, 134, 0.11);
  animation: ringBreath 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* ── Outer ring ─────────────────────────────────────────────── */
.loader-logo-container::after {
  content: '';
  position: absolute;
  width: 225px;
  height: 225px;
  border-radius: 50%;
  border: 1px solid rgba(66, 165, 245, 0.07);
  animation: ringBreath 3.2s ease-in-out 0.65s infinite;
  pointer-events: none;
}

/* ── Logo image ─────────────────────────────────────────────── */
.loader-logo-img {
  width: 155px;           /* Significantly larger than v1 */
  height: auto;
  position: relative;
  z-index: 2;
  display: block;
  /* Clean depth shadow on the actual logo shape, NOT a blur on the bg */
  filter: drop-shadow(0 6px 20px rgba(18, 63, 134, 0.14));
}

/* ── Brand name ─────────────────────────────────────────────── */
.loader-brand-name {
  margin-top: 24px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  animation: slideUp 0.5s ease 0.62s forwards;
}

/* "ExcelTech" — dark navy */
.loader-brand-name .ln-excel {
  color: #123F86;
}

/* "plus" — bright accent blue */
.loader-brand-name .ln-plus {
  color: #42A5F5;
}

/* ── Divider line between name and tagline ───────────────────── */
.loader-divider {
  margin-top: 10px;
  width: 40px;
  height: 1.5px;
  background: linear-gradient(90deg, #123F86, #42A5F5);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  animation: dividerGrow 0.45s ease 0.82s forwards;
}

/* ── Tagline ────────────────────────────────────────────────── */
.loader-tagline {
  margin-top: 10px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 5px;
  color: #6b8ab5;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  animation: slideUp 0.5s ease 0.9s forwards;
}

/* ── Progress track ─────────────────────────────────────────── */
.loader-progress-track {
  margin-top: 40px;
  width: 270px;
  height: 2.5px;
  background: #edf0f5;
  border-radius: 100px;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 0.35s ease 1.05s forwards;
}

/* ── Progress fill ──────────────────────────────────────────── */
.loader-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 100px;
  background: linear-gradient(
    90deg,
    #123F86  0%,
    #1860c8  40%,
    #42A5F5  100%
  );
  background-size: 270px 100%;
  animation: barFill 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1.15s forwards;
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep */
.loader-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent          0%,
    rgba(255,255,255,.55) 50%,
    transparent          100%
  );
  transform: translateX(-200%);
  animation: shimmerSweep 1.25s ease-in-out 1.3s infinite;
}

/* Leading-edge glow dot */
.loader-progress-bar::before {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42A5F5;
  box-shadow: 0 0 10px 3px rgba(66, 165, 245, 0.55);
  opacity: 0;
  animation: tipLive 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1.15s forwards;
}

/* ── Percentage label (optional, adds premium data feel) ─────── */
.loader-percent {
  margin-top: 12px;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #c2c8d6;
  opacity: 0;
  animation: fadeIn 0.3s ease 1.15s forwards;
  min-width: 30px;
  text-align: right;
  align-self: flex-end;
  padding-right: 1px;
}

/* ================================================================
   Keyframes
================================================================ */

@keyframes logoEnter {
  from { opacity: 0; transform: scale(0.84); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Gentle breathing — only opacity, no scale on glow so it stays crisp */
@keyframes glowBreathe {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1;    }
}

@keyframes ringBreath {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.55; transform: scale(1.03); }
}

@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dividerGrow {
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes barFill {
  0%   { width: 0%;   }
  10%  { width: 8%;   }
  28%  { width: 32%;  }
  52%  { width: 58%;  }
  76%  { width: 80%;  }
  91%  { width: 94%;  }
  100% { width: 100%; }
}

@keyframes tipLive {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes shimmerSweep {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(350%);  }
}

/* ================================================================
   Responsive
================================================================ */

@media (max-width: 768px) {
  .loader-logo-container {
    width: 200px;
    height: 200px;
  }
  .loader-logo-img        { width: 128px; }
  .loader-logo-container::before { width: 165px; height: 165px; }
  .loader-logo-container::after  { width: 196px; height: 196px; }
  .loader-brand-name      { font-size: 28px; }
  .loader-tagline         { font-size: 11px; letter-spacing: 4px; }
  .loader-progress-track  { width: 220px; }
  .loader-percent         { padding-right: 0; }
}

@media (max-width: 480px) {
  .loader-logo-container {
    width: 170px;
    height: 170px;
  }
  .loader-logo-img        { width: 105px; }
  .loader-logo-container::before { width: 140px; height: 140px; }
  .loader-logo-container::after  { width: 167px; height: 167px; }
  .loader-brand-name      { font-size: 24px; margin-top: 18px; }
  .loader-divider         { width: 30px; margin-top: 9px; }
  .loader-tagline         { font-size: 9.5px; letter-spacing: 3.5px; margin-top: 9px; }
  .loader-progress-track  { width: 180px; margin-top: 32px; }
  .loader-percent         { font-size: 9px; }
}