/* ============================================================
   SODOMA — Loading Screen (desenho progressivo do SVG)
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(226,59,78,0.12), transparent 55%),
    var(--bg-900);
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.loader__logo {
  width: clamp(160px, 30vw, 280px);
  height: auto;
  filter: drop-shadow(0 0 40px var(--accent-glow));
}

/* O traço é desenhado progressivamente; preenchimento entra depois (JS aciona .is-filled) */
.loader__logo path {
  fill: transparent;
  stroke: var(--text-100);
  stroke-width: 18;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill 0.9s var(--ease);
}
.loader__logo.is-filled path {
  fill: var(--text-100);
}

.loader__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.loader__particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-bright);
  opacity: 0;
}

.loader__bar {
  width: clamp(180px, 26vw, 260px);
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-600);
  overflow: hidden;
}
.loader__bar-fill {
  height: 100%;
  width: 0%;
  background: var(--grad-accent);
  border-radius: inherit;
  transition: width 0.25s linear;
}
.loader__label {
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-300);
}
.loader__pct { color: var(--accent-bright); }

/* Bloqueia rolagem enquanto carrega */
body.is-loading { overflow: hidden; }