/* ============================================================
   PROMETISNOUS — loader.css
   Tela escura: anel de progresso + % + barra; depois logotipo
   PROMETISNOUS com glitch (slices RGB) e glitch-out.
   ============================================================ */

#pmn-loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.6s ease;
}
#pmn-loader.pmn-loader-out {
  opacity: 0;
  pointer-events: none;
}

#pmn-loader > div { grid-area: 1 / 1; }

/* ---- fase 1: anel + % + barra ---- */
.pmn-load-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  transition: opacity 0.3s ease;
}
#pmn-loader.pmn-load-done .pmn-load-core { opacity: 0; }

.pmn-ring-wrap {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}
.pmn-ring { width: 132px; height: 132px; transform: rotate(-90deg); }
.pmn-ring circle { fill: none; stroke-width: 3; }
.pmn-ring .ring-bg { stroke: var(--faint); }
.pmn-ring .ring-fg {
  stroke: var(--acc);
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 0.6));
}

.pmn-pct {
  position: absolute;
  font: 600 1.35rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pmn-bar {
  width: min(240px, 64vw);
  height: 3px;
  background: var(--faint);
  border-radius: 2px;
  overflow: hidden;
}
.pmn-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  box-shadow: 0 0 8px rgba(var(--acc-rgb), 0.7);
}

.pmn-load-tag {
  font: 600 0.66rem/1 var(--font-mono);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--dim);
}
.pmn-load-tag::after {
  content: "▌";
  margin-left: 0.35em;
  color: var(--acc);
  animation: pmn-blink 0.9s steps(2, end) infinite;
}
@keyframes pmn-blink { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---- fase 2: logotipo glitch ---- */
.pmn-logo {
  position: relative;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.25s ease, transform 0.25s ease;
  user-select: none;
}
#pmn-loader.pmn-load-done .pmn-logo {
  opacity: 1;
  transform: scale(1);
}

.pmn-logo > span {
  grid-area: 1 / 1;
  font: 700 clamp(1.7rem, 7.5vw, 4.2rem)/1 var(--font-mono);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.pmn-logo-base { color: var(--ink); }

#pmn-loader.pmn-load-done .pmn-logo-base {
  animation: pmn-jit 0.16s steps(2, end) infinite;
}
@keyframes pmn-jit {
  0%, 100% { text-shadow: 2px 0 rgba(255, 92, 122, 0.55), -2px 0 rgba(60, 232, 198, 0.55); }
  50% { text-shadow: -3px 0 rgba(255, 92, 122, 0.55), 3px 0 rgba(60, 232, 198, 0.55); }
}

.pmn-logo-glitch {
  pointer-events: none;
  opacity: 0;
}
#pmn-loader.pmn-load-done .pmn-logo-glitch { opacity: 0.9; }
.pmn-logo-glitch.g1 {
  color: var(--acc);
  animation: pmn-gl1 0.85s steps(1, end) infinite;
}
.pmn-logo-glitch.g2 {
  color: var(--warn);
  animation: pmn-gl2 1.15s steps(1, end) infinite;
}
@keyframes pmn-gl1 {
  0% { clip-path: inset(0 0 62% 0); transform: translate(-4px, -2px); }
  25% { clip-path: inset(28% 0 42% 0); transform: translate(4px, 1px); }
  50% { clip-path: inset(58% 0 10% 0); transform: translate(-3px, 2px); }
  75% { clip-path: inset(12% 0 68% 0); transform: translate(3px, -2px); }
  100% { clip-path: inset(42% 0 28% 0); transform: translate(-4px, 0); }
}
@keyframes pmn-gl2 {
  0% { clip-path: inset(64% 0 4% 0); transform: translate(3px, 2px); }
  25% { clip-path: inset(10% 0 72% 0); transform: translate(-4px, -1px); }
  50% { clip-path: inset(38% 0 34% 0); transform: translate(4px, -2px); }
  75% { clip-path: inset(0 0 80% 0); transform: translate(-3px, 1px); }
  100% { clip-path: inset(50% 0 18% 0); transform: translate(3px, 2px); }
}

/* glitch-out: colapso violento e desaparecimento */
#pmn-loader.pmn-glitch-out .pmn-logo {
  animation: pmn-glitchout 0.38s steps(3, end) forwards;
}
#pmn-loader.pmn-glitch-out .pmn-logo-glitch { opacity: 0; transition: opacity 0.1s; }
@keyframes pmn-glitchout {
  0% { opacity: 1; transform: translate(0) skewX(0); }
  20% { opacity: 1; transform: translate(-9px, 4px) skewX(9deg); }
  40% { opacity: 1; transform: translate(11px, -6px) skewX(-11deg); }
  60% { opacity: 0.8; transform: translate(-13px, 2px) skewX(5deg); }
  80% { opacity: 0.5; transform: translate(9px, -3px) scale(1.05); }
  100% { opacity: 0; transform: translate(0) scale(1.08); }
}

/* ---- movimento reduzido: só fades ---- */
@media (prefers-reduced-motion: reduce) {
  .pmn-logo-glitch { display: none; }
  #pmn-loader.pmn-load-done .pmn-logo-base { animation: none; text-shadow: none; }
  #pmn-loader.pmn-load-done .pmn-logo { transition-duration: 0.5s; }
  #pmn-loader.pmn-glitch-out .pmn-logo { animation: pmn-fadeout 0.3s ease forwards; }
  @keyframes pmn-fadeout { to { opacity: 0; } }
}