/* ===========================================================
   SUGAM ACADEMY — PRELOADER
   Motif: stethoscope cross + EKG pulse line, drawn on load.
   Uses the same tokens as the rest of the site (tokens.css)
   so it never feels like a bolted-on plugin.
   =========================================================== */

/* Freeze scroll + hide content flash while the preloader owns the screen */
html.is-preloading,
html.is-preloading body {
  overflow: hidden !important;
  height: 100%;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900, #0a1726);
  overflow: hidden;
}

/* Two ink panels used only for the exit wipe */
#preloader .preloader__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background: var(--ink-900, #0a1726);
  z-index: 1;
}
#preloader .preloader__panel--l { left: 0; }
#preloader .preloader__panel--r { right: 0; }

#preloader .preloader__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: 1.5rem;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.45s var(--ease-out, ease), transform 0.45s var(--ease-out, ease);
}

/* ---- Mark: cross draws itself, pulse line sweeps through it ---- */
#preloader .preloader__mark {
  width: clamp(64px, 10vw, 84px);
  height: clamp(64px, 10vw, 84px);
  overflow: visible;
}

#preloader .preloader__cross {
  fill: none;
  stroke: var(--bone-100, #faf9f5);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: preloader-draw 1.1s var(--ease-out, ease) forwards 0.15s;
}

#preloader .preloader__ring {
  fill: none;
  stroke: var(--border-hair-dark, rgba(255, 255, 255, 0.12));
  stroke-width: 2;
}

#preloader .preloader__pulse {
  fill: none;
  stroke: var(--gold-500, #c99a3d);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: preloader-pulse-draw 1.6s linear infinite;
  animation-delay: 0.4s;
}

@keyframes preloader-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes preloader-pulse-draw {
  0%   { stroke-dashoffset: 260; opacity: 0; }
  8%   { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  75%  { stroke-dashoffset: -260; opacity: 1; }
  100% { stroke-dashoffset: -260; opacity: 0; }
}

/* ---- Wordmark ---- */
#preloader .preloader__word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

#preloader .preloader__title {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-dark, #faf9f5);
  line-height: 1;
}

#preloader .preloader__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--blue-300, #a9cbe3);
  margin-left: 0.4ch;
}

#preloader .preloader__tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted, #9fb0c4);
}

/* ---- Progress ---- */
#preloader .preloader__progress {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: clamp(180px, 30vw, 240px);
}

#preloader .preloader__bar {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--border-hair-dark, rgba(255, 255, 255, 0.12));
  border-radius: 2px;
  overflow: hidden;
}

#preloader .preloader__bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-500, #3f8bc4), var(--gold-500, #c99a3d));
  border-radius: 2px;
  transition: width 0.25s var(--ease-out, ease);
}

#preloader .preloader__pct {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark-muted, #9fb0c4);
  min-width: 3.2ch;
  text-align: right;
}

/* ---- Exit sequence ---- */
#preloader.is-leaving .preloader__inner {
  opacity: 0;
  transform: translateY(-14px);
}

#preloader.is-leaving .preloader__panel--l {
  transform: translateX(-101%);
}
#preloader.is-leaving .preloader__panel--r {
  transform: translateX(101%);
}
#preloader.is-leaving .preloader__panel--l,
#preloader.is-leaving .preloader__panel--r {
  transition: transform 0.75s var(--ease-in-out, ease) 0.2s;
}

#preloader.is-done {
  visibility: hidden;
  pointer-events: none;
}

/* ---- Reduced motion: skip the choreography, just fade ---- */
@media (prefers-reduced-motion: reduce) {
  #preloader .preloader__cross,
  #preloader .preloader__pulse {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  #preloader .preloader__panel--l,
  #preloader .preloader__panel--r {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  #preloader.is-leaving .preloader__panel--l,
  #preloader.is-leaving .preloader__panel--r {
    opacity: 0;
  }
  #preloader.is-leaving .preloader__inner {
    transition: opacity 0.3s ease;
    transform: none;
  }
}

@media (max-width: 480px) {
  #preloader .preloader__progress { width: 160px; }
}