/* ============================================================
   ORBNAV — navegador de secciones de Carne y metal.
   Cuarto de círculo (trazo del dial) en la esquina superior
   izquierda, con un ensanche que late. Se toca y se arrastra
   siguiendo el arco: el ensanche viaja entre muescas (una por
   sección) y el resto de la pantalla se difumina. Al soltar,
   viaja a la sección elegida.
   ============================================================ */

/* Medio círculo centrado en la parte inferior. */
.orbnav {
  position: fixed;
  left: 50%; bottom: 0;                 /* pegado al borde inferior, sin hueco */
  transform: translateX(-50%);
  width: min(300px, 76vw); height: 116px;
  z-index: 9000;
  touch-action: none;
  cursor: crosshair;
}
.orbnav__lienzo { display: block; width: 100%; height: 100%; }

/* Título en vivo: número + nombre, centrado sobre el arco. Sólo visible
   mientras se navega. */
.orbnav__titulo {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(116px + 10px);
  text-align: center;
  z-index: 9000;
  font-family: var(--f-mono);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.orbnav__titulo.is-on { opacity: 1; }
.orbnav__num  { font-size: var(--fs-micro); letter-spacing: .14em; color: rgba(255,255,255,.6); }
/* Modo denegado: título en rojo (permission not granted). */
.orbnav__titulo.is-deny .orbnav__num  { color: #e24b4a; letter-spacing: .22em; }
.orbnav__titulo.is-deny .orbnav__name { color: #e24b4a; }
.orbnav__name { font-size: 10px; letter-spacing: 1.5px; line-height: 1.2; color: #fff; margin-top: 4px; text-transform: lowercase; }

/* Velo de desenfoque a pantalla completa: difumina TODO el contenido de
   la página al navegar (backdrop-filter), sea cual sea su estructura. Va
   por debajo del orbnav (9000) y por encima del contenido. */
.orbnav__velo {
  position: fixed; inset: 0;
  z-index: 8999;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  transition: opacity .28s ease, backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease;
}
.orbnav__velo.is-on {
  opacity: 1;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(0,0,0,.12);
}
@media (prefers-reduced-motion: reduce) {
  .orbnav__velo.is-on { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Destello rojo de "sin acceso": la pantalla se torna roja un instante. */
.orbnav__flash {
  position: fixed; inset: 0; z-index: 8999;
  pointer-events: none; opacity: 0;
  background: rgba(192,57,43,.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.orbnav__flash.go { animation: orbnavFlash 1s ease-out; }
@keyframes orbnavFlash {
  0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; }   /* sube rápido, se va despacio */
}

/* Velos de transición al navegar (mismo lenguaje que el dial general). */
.orbnav__apagon, .orbnav__blanco {
  position: fixed; inset: 0; z-index: 9600; pointer-events: none; opacity: 0;
}
/* Referencias RX: titileo de tubo que se muere. Alterna FLASHES EN NEGATIVO
   (invert de la pantalla) con negros, y acaba fundido a negro. */
.orbnav__apagon { background: rgba(0,0,0,0); }
.orbnav__apagon.go { opacity: 1; animation: orbnavApagonInv 900ms steps(1, end) forwards; }
@keyframes orbnavApagonInv {
  0%   { background: rgba(0,0,0,0); -webkit-backdrop-filter: none;      backdrop-filter: none; }
  8%   { background: rgba(0,0,0,0); -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); }   /* negativo */
  12%  { background: #000;          -webkit-backdrop-filter: none;      backdrop-filter: none; }         /* negro */
  18%  { background: rgba(0,0,0,0); -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); }
  24%  { background: #000;          -webkit-backdrop-filter: none;      backdrop-filter: none; }
  30%  { background: rgba(0,0,0,0); -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); }
  38%  { background: #000;          -webkit-backdrop-filter: none;      backdrop-filter: none; }
  46%  { background: rgba(0,0,0,0); -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); }
  54%  { background: #000;          -webkit-backdrop-filter: none;      backdrop-filter: none; }
  100% { background: #000;          -webkit-backdrop-filter: none;      backdrop-filter: none; }         /* muere en negro */
}
/* Genesis / Avistamientos: fundido a blanco. */
.orbnav__blanco { background: #fff; transition: opacity .5s ease; }
.orbnav__blanco.go { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .orbnav__apagon.go { animation: none; opacity: 1; background: #000; }
}