/* ══════════════════════════════════════════════════════════════════
   Nav Transition · cambio de sección estilo "nuevo nivel" de videojuego
   Obturador neón que cierra/abre + HUD con el nombre de la sección.
   Modular y autocontenido. Solo para enlaces que navegan a secciones.
   Respeta prefers-reduced-motion (scroll suave normal).
   ══════════════════════════════════════════════════════════════════ */
#navfx{
  position:fixed; inset:0; z-index:99996; pointer-events:none; overflow:hidden;
  --nf-blue:#4f8dff; --nf-teal:#00d4b4;
}
#navfx[hidden]{ display:none; }

/* Paneles del obturador (arriba/abajo) */
.navfx-panel{
  position:absolute; left:-2%; right:-2%; height:52%;
  background:linear-gradient(180deg,#070a13,#0b1020);
}
.navfx-top{
  top:0; transform:translateY(-102%);
  border-bottom:2px solid var(--nf-blue);
  box-shadow:0 6px 34px rgba(59,130,246,.5), 0 0 0 1px rgba(79,141,255,.25) inset;
  clip-path:polygon(0 0, 100% 0, 100% 86%, 0 100%);
}
.navfx-bot{
  bottom:0; transform:translateY(102%);
  border-top:2px solid var(--nf-teal);
  box-shadow:0 -6px 34px rgba(0,212,180,.5), 0 0 0 1px rgba(0,212,180,.22) inset;
  clip-path:polygon(0 14%, 100% 0, 100% 100%, 0 100%);
}
/* Scanlines arcade */
.navfx-scan{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}

/* HUD central: nombre de la sección */
.navfx-hud{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  opacity:0; transform:scale(.92);
}
.navfx-kicker{
  font-family:'Press Start 2P','Inter',monospace; font-size:8px; letter-spacing:.2em;
  color:var(--nf-teal); text-transform:uppercase;
}
.navfx-name{
  font-family:'Press Start 2P','Inter',monospace; font-size:clamp(14px,4.5vw,26px);
  color:#fff; letter-spacing:.04em; text-align:center;
  text-shadow:0 0 18px rgba(79,141,255,.8), 0 0 4px rgba(79,141,255,.6);
}
.navfx-load{
  font-family:'Press Start 2P','Inter',monospace; font-size:8px; letter-spacing:.18em;
  color:var(--nf-blue); animation:navfxBlink .8s steps(1) infinite;
}
@keyframes navfxBlink{ 0%,49%{opacity:1} 50%,100%{opacity:.2} }

/* ── Estados ── */
#navfx.cover .navfx-top,
#navfx.cover .navfx-bot{ transform:translateY(0); transition:transform .34s cubic-bezier(.7,0,.25,1); }
#navfx.cover .navfx-scan{ opacity:.6; transition:opacity .2s .1s; }
#navfx.cover .navfx-hud{ opacity:1; transform:scale(1); transition:opacity .26s .12s, transform .34s cubic-bezier(.18,1.2,.4,1) .1s; }

#navfx.uncover .navfx-top{ transform:translateY(-102%); transition:transform .46s cubic-bezier(.5,0,.15,1); }
#navfx.uncover .navfx-bot{ transform:translateY(102%);  transition:transform .46s cubic-bezier(.5,0,.15,1); }
#navfx.uncover .navfx-scan{ opacity:0; transition:opacity .2s; }
#navfx.uncover .navfx-hud{ opacity:0; transform:scale(1.05); transition:opacity .2s, transform .4s ease; }

@media (prefers-reduced-motion: reduce){
  #navfx{ display:none !important; }
}