/* ============================================================
   PRELOADER — CSS DESIGN TOKENS
   ============================================================ */
:root {
  /*  Color Palette  */
  --pl-bg-start:               #07112b;
  --pl-bg-end:                 #0a1f4e;
  --pl-accent-primary:         #c9913a;       /* gold */
  --pl-accent-glow:            rgba(201, 145, 58, 0.35);
  --pl-ripple-color:           rgba(201, 145, 58, 0.25);
  --pl-divider:                rgba(201, 145, 58, 0.22);
  --pl-text-primary:           #f0ead8;       /* warm cream */
  --pl-text-muted:             rgba(240, 234, 216, 0.55);
  --pl-progress-track:         rgba(240, 234, 216, 0.12);
  --pl-progress-fill-start:    #c9913a;
  --pl-progress-fill-end:      #f0ead8;

  /*  Typography  */
  --pl-font-display:  'Montserrat', 'Georgia', 'Times New Roman', serif;
  --pl-font-ui:       'Montserrat', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --pl-font-tagline:  'Montserrat', 'Segoe UI', sans-serif;

  /*  Sizing  */
  --pl-icon-size:       5.5rem;
  --pl-text-size:       2rem;
  --pl-progress-width:  280px;
  --pl-progress-height: 5px;
  --pl-radius-pill:     50px;
  --pl-radius-bar:      3px;

  /*  Spacing  */
  --pl-gap-lg: 2.2rem;
  --pl-gap-md: 1.4rem;
  --pl-gap-sm: 0.75rem;

  /*  Animation Durations & Delays  */
  --pl-anim-pulse:    2s;
  --pl-anim-ripple:   2.4s;
  --pl-anim-progress: 9s;
  --pl-delay-text:    0.4s;
  --pl-delay-bar:     0.7s;
  --pl-delay-sub:     0.9s;
}

/* ============================================================
   PRELOADER BASE
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(150deg, var(--pl-bg-start) 0%, var(--pl-bg-end) 100%);
  z-index: 9999;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.6s ease-out;
}

.preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

body.preloader-active {
  overflow: hidden;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
}

/* ============================================================
   BACKGROUND LAYERS
   ============================================================ */

/* Subtle grid lines */
.preloader-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--accent-gold-grid) 1px, var(--transparent) 1px),
    linear-gradient(90deg, var(--accent-gold-grid) 1px, var(--transparent) 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Radial vignette to focus center */
.preloader-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    var(--transparent) 0%,
    color-mix(in srgb, var(--bg-primary) var(--vignette-opacity), transparent) 100%
  );
  pointer-events: none;
}

/* ============================================================
   ICON
   ============================================================ */
.preloader-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--pl-gap-lg);
}

.preloader-ripple {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1.5px solid var(--pl-ripple-color);
  animation: rippleOut var(--pl-anim-ripple) ease-out infinite;
}

.preloader-ripple:nth-child(2) { animation-delay: 0.8s; }
.preloader-ripple:nth-child(3) { animation-delay: 1.6s; }

.preloader-icon {
  font-size: var(--pl-icon-size);
  color: var(--pl-text-primary);
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 18px var(--pl-accent-glow));
  animation: iconPulse var(--pl-anim-pulse) ease-in-out infinite;
}

/* LMS badge on icon */
.preloader-badge {
  position: absolute;
  bottom: -6px;
  right: -14px;
  background: var(--pl-accent-primary);
  border-radius: var(--pl-radius-pill);
  padding: 3px 10px;
  font-size: 0.6rem;
  font-family: var(--pl-font-ui);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-bg-start);
  z-index: 3;
  animation: badgeFadeIn 0.5s ease var(--pl-delay-bar) both;
}

/* ============================================================
   TEXT
   ============================================================ */
.preloader-name {
  font-family: var(--pl-font-display);
  font-size: var(--pl-text-size);
  font-weight: 500;
  color: var(--pl-text-primary);
  letter-spacing: 0.04em;
  margin: 0 0 var(--pl-gap-sm);
  text-align: center;
  line-height: 1.2;
  opacity: 0;
  animation: textRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--pl-delay-text) forwards;
}

.preloader-name em {
  color: var(--pl-accent-primary);
  font-style: normal;
}

.preloader-tagline {
  font-family: var(--pl-font-tagline);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pl-text-muted);
  margin: 0 0 var(--pl-gap-lg);
  text-align: center;
  opacity: 0;
  animation: textRise 0.8s ease var(--pl-delay-sub) forwards;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.preloader-divider {
  width: 48px;
  height: 1px;
  background: var(--pl-divider);
  margin: 0 auto var(--pl-gap-lg);
  opacity: 0;
  animation: textRise 0.6s ease var(--pl-delay-sub) forwards;
}

.preloader-progress-wrap {
  width: var(--pl-progress-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: textRise 0.8s ease var(--pl-delay-bar) forwards;
}

.preloader-progress-track {
  width: 100%;
  height: var(--pl-progress-height);
  border-radius: var(--pl-radius-bar);
  background: var(--pl-progress-track);
  overflow: hidden;
  position: relative;
}

.preloader-progress-fill {
  width: 0;
  height: 100%;
  border-radius: var(--pl-radius-bar);
  background: linear-gradient(
    90deg,
    var(--pl-progress-fill-start),
    var(--pl-progress-fill-end)
  );
  animation: progressFill var(--pl-anim-progress) cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
  position: relative;
}

/* Shimmer overlay on fill */
.preloader-progress-fill::after {
  content: '';
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 40px;
  background: linear-gradient(90deg, var(--transparent), var(--white-overlay-medium), var(--transparent));
  animation: shimmer 1.8s ease-in-out 1s infinite;
}

.preloader-status {
  font-family: var(--pl-font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Animated dots */
.preloader-dots span {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--pl-accent-primary);
  animation: dotBlink 1.4s ease-in-out infinite;
  opacity: 0.3;
}

.preloader-dots span:nth-child(1) { animation-delay: 0s; }
.preloader-dots span:nth-child(2) { animation-delay: 0.22s; }
.preloader-dots span:nth-child(3) { animation-delay: 0.44s; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes iconPulse {
  0%, 100% { transform: scale(1) translateY(0); }
  50%       { transform: scale(1.08) translateY(-4px);
              filter: drop-shadow(0 0 28px var(--pl-accent-glow)); }
}

@keyframes rippleOut {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes textRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes badgeFadeIn {
  from { opacity: 0; transform: scale(0.8) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes progressFill {
  0%   { width: 0%;   }
  15%  { width: 22%;  }
  40%  { width: 45%;  }
  65%  { width: 68%;  }
  85%  { width: 88%;  }
  100% { width: 100%; }
}

@keyframes shimmer {
  0%   { transform: translateX(-40px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateX(20px);  opacity: 0; }
}

@keyframes particleFloat {
  0%   { transform: translateY(100%) rotate(var(--rot, 15deg));          opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(-120px) rotate(calc(var(--rot, 15deg) + 20deg)); opacity: 0; }
}

@keyframes dotBlink {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40%           { opacity: 1;   transform: scale(1.4); }
}

/* ============================================================
    RESPONSIVE MEDIA QUERIES
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --pl-icon-size:      4.5rem;
    --pl-text-size:      1.75rem;
    --pl-progress-width: 240px;
    --pl-gap-lg:         1.8rem;
  }
  .preloader-ripple { width: 90px; height: 90px; }
}

@media (max-width: 480px) {
  :root {
    --pl-icon-size:      3.5rem;
    --pl-text-size:      1.4rem;
    --pl-progress-width: 200px;
    --pl-gap-lg:         1.4rem;
    --pl-gap-sm:         0.5rem;
  }
  .preloader-ripple { width: 70px; height: 70px; }
}