/* ════════════════════════════════════════
   PUNKWP LOADER
   ════════════════════════════════════════ */

/* Bloquer le scroll pendant le loader */
html.loader-active { overflow: hidden; }

/* ── WRAPPER PLEIN ÉCRAN ── */
#punkwp-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #060404;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#punkwp-loader.is-dismissing {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}

/* Trame grille fond */
#punkwp-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,107,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,0,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: pwlGrid 20s linear infinite;
  pointer-events: none;
}
@keyframes pwlGrid { to { background-position: 40px 40px; } }

/* ── SCANLINE ── */
.pwl-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(transparent, rgba(255,107,0,.07), transparent);
  animation: pwlScan 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes pwlScan { 0% { top: -5%; } 100% { top: 110%; } }

/* ── SVG GÉO FOND ── */
.pwl-geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── COINS ── */
.pwl-corner {
  position: absolute;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 2;
}
.pwl-corner--tl { top: 24px; left: 24px; border-top: 1px solid rgba(255,26,26,.7);   border-left: 1px solid rgba(255,26,26,.7); }
.pwl-corner--tr { top: 24px; right: 24px; border-top: 1px solid rgba(255,107,0,.6);  border-right: 1px solid rgba(255,107,0,.6); }
.pwl-corner--bl { bottom: 24px; left: 24px; border-bottom: 1px solid rgba(255,107,0,.6); border-left: 1px solid rgba(255,107,0,.6); }
.pwl-corner--br { bottom: 24px; right: 24px; border-bottom: 1px solid rgba(255,26,26,.5); border-right: 1px solid rgba(255,26,26,.5); }

/* Losanges aux coins */
.pwl-corner::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.pwl-corner--tl { color: #FF1A1A; } .pwl-corner--tl::after { top: -2px; left: -2px; }
.pwl-corner--tr { color: #FF6B00; } .pwl-corner--tr::after { top: -2px; right: -2px; }
.pwl-corner--bl { color: #FF6B00; } .pwl-corner--bl::after { bottom: -2px; left: -2px; }
.pwl-corner--br { color: #FF1A1A; } .pwl-corner--br::after { bottom: -2px; right: -2px; }

/* ── LIGNES ANIMÉES ── */
.pwl-hline {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,26,26,.5), transparent);
  pointer-events: none;
  z-index: 2;
}
.pwl-hline--1 { top: 30%; animation: pwlHLine 3.2s ease-in-out infinite; }
.pwl-hline--2 { top: 70%; animation: pwlHLine 3.2s ease-in-out infinite 1s; }

@keyframes pwlHLine {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  30%  { opacity: 1; clip-path: inset(0 0% 0 0); }
  70%  { opacity: 1; clip-path: inset(0 0% 0 0); }
  100% { opacity: 0; clip-path: inset(0 0% 0 100%); }
}

.pwl-vline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(255,107,0,.4), transparent);
  pointer-events: none;
  z-index: 2;
}
.pwl-vline--1 { left: 22%; animation: pwlVLine 4s ease-in-out infinite 1.2s; }
.pwl-vline--2 { right: 22%; animation: pwlVLine 4s ease-in-out infinite 2.8s; }

@keyframes pwlVLine {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); }
  40%  { opacity: .8; clip-path: inset(0 0 0% 0); }
  70%  { opacity: .8; clip-path: inset(0 0 0% 0); }
  100% { opacity: 0; clip-path: inset(100% 0 0% 0); }
}

/* ── TEXTES LATÉRAUX ── */
.pwl-side {
  position: absolute;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,107,0,.28);
  pointer-events: none;
  z-index: 3;
  margin: 0;
}
.pwl-side--l { left: 28px; top: 50%; transform: translateY(-50%) rotate(-90deg); white-space: nowrap; }
.pwl-side--r { right: 28px; top: 50%; transform: translateY(-50%) rotate(90deg); white-space: nowrap; }
.pwl-side--t { top: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.pwl-side--b { bottom: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* ── CENTRE ── */
.pwl-center {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Conteneur hexagone */
.pwl-hex {
  width: 200px;
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Anneaux rotatifs */
.pwl-ring {
  position: absolute;
}
.pwl-ring--outer {
  inset: 0;
  animation: pwlSpin 8s linear infinite;
}
.pwl-ring--inner {
  inset: 10px;
  animation: pwlSpin 5s linear infinite reverse;
}
.pwl-ring svg { width: 100%; height: 100%; }

@keyframes pwlSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Cercle central */
.pwl-core {
  width: 118px;
  height: 118px;
  border: 1px solid rgba(255,26,26,.45);
  border-radius: 50%;
  background: rgba(6,4,4,.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: pwlCorePulse 2.2s ease-in-out infinite;
}
.pwl-core::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,107,0,.18);
  animation: pwlCorePulse 2.2s ease-in-out infinite .5s;
}
@keyframes pwlCorePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,26,26,.3); }
  50%      { box-shadow: 0 0 0 14px rgba(255,26,26,0); }
}

.pwl-pct {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-size: 2rem;
  font-weight: 900;
  color: #F0EDE8;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.pwl-pct-label {
  font-size: .55rem;
  letter-spacing: .3em;
  color: rgba(255,107,0,.75);
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

/* ── BARRE DE PROGRESSION ── */
.pwl-bar-wrap {
  width: 200px;
  margin-top: 20px;
}
.pwl-bar-track {
  width: 100%;
  height: 2px;
  background: rgba(255,107,0,.1);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
  position: relative;
}
.pwl-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF1A1A, #FF6B00, #FFE600);
  position: relative;
}
.pwl-bar-fill::after {
  content: '';
  position: absolute;
  right: -1px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  background: #FFE600;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ── LOG SYSTÈME ── */
.pwl-log {
  width: 220px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pwl-log-line {
  font-size: .62rem;
  letter-spacing: .1em;
  color: rgba(255,107,0,.35);
  border-left: 1px solid rgba(255,107,0,.15);
  padding-left: 8px;
  transition: color .25s, border-color .25s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwl-log-line.is-active { color: rgba(0,255,255,.85); border-color: rgba(0,255,255,.4); }
.pwl-log-line.is-done   { color: rgba(57,255,20,.5);  border-color: rgba(57,255,20,.25); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .pwl-ring--outer,
  .pwl-ring--inner,
  .pwl-scanline,
  .pwl-hline,
  .pwl-vline { animation: none; }
}