/* ============================================================
   NAVE-INTERIOR.CSS — Interior de la nave ("Mi configuración")
   Pantalla completa: el puente 3D (js/nave-interior-scene.js) con
   GLAC "parado" (mismo modelo rígido de glac.js) es lo único que
   se ve. Título y botón de volver flotan ENCIMA como overlays
   (position:absolute) — nada de eso empuja o reduce el tamaño de
   la escena 3D. Sin botones/monitores DOM — pedido explícito del
   usuario (la navegación a los proyectos ya vive en la galaxia de
   planetas; ver planets.js).
   ============================================================ */

/* ---------- HUD overlay: título + volver ---------- */

.nave-view__hud {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: 24px;
  z-index: calc(var(--z-glac) + 13);
  text-align: left;
  pointer-events: none;
}

.nave-view__back {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  right: 24px;
  z-index: calc(var(--z-glac) + 13);
}

/* ---------- Consola: escena 3D a pantalla completa ----------
   A propósito SIN z-index (ver comentario grande en main.css sobre
   .nave-view__content): así queda detrás de GLAC (#glac-container,
   --z-glac) en vez de taparlo, como pasaba antes de separar esta capa
   de `.nave-console__front` (bug real reportado por el usuario: "GLAC
   quedó tapado por la pared, detrás de todo"). */

.nave-console {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Escena 3D del puente (ver js/nave-interior-scene.js). Si Three.js no
   carga por algún motivo, el canvas queda vacío y los 2 blobs CSS de abajo
   siguen sirviendo de fallback visual — nunca se quita el DOM viejo. */
#nave-interior-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.nave-console__glow {
  position: absolute;
  top: 16px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(44px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

.nave-console__glow--cyan {
  left: 6%;
  background: var(--accent-cyan);
}

.nave-console__glow--violet {
  right: 6%;
  background: var(--accent-violet);
}

#glac-nave-spot {
  position: relative;
  z-index: 2;
  width: 240px;
  height: 288px;
  margin-bottom: 6vh;
}

/* Link real e invisible sobre el teléfono del panel del CEO (ver
   js/nave-interior-scene.js, que lo reposiciona cada frame proyectando su
   posición en la escena 3D) — un texto de canvas nunca se puede
   seleccionar/copiar por sí solo, esto lo hace posible sin dibujar un
   segundo texto encima (queda transparente, solo se nota al seleccionar). */
#ceo-phone-select {
  position: absolute;
  top: 0;
  left: 0;
  z-index: calc(var(--z-glac) + 7);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: transparent;
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  padding: 0.3em 0.6em;
  display: none;
}

#ceo-phone-select::selection {
  background: rgba(0, 240, 255, 0.35);
  color: var(--accent-cyan);
}

/* ---------- Capa de frente: SIEMPRE por encima de GLAC ----------
   Tablero (le tapa las piernas) + anillos holográficos (a la altura
   del torso). Necesita su PROPIO z-index (no alcanza con dárselo a
   estos hijos si el padre no está también elevado) para poder
   competir contra #glac-container, que es un hermano fuera de este
   árbol — ver el comentario largo en main.css (.nave-view__content). */
.nave-console__front {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-glac) + 5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

/* Anillo holográfico "alrededor" de GLAC: comparte el mismo layout
   flex (bottom-center) que #glac-nave-spot en la capa de atrás — así
   queda SIEMPRE alineado con él sin importar cómo proyecte la cámara
   3D, en vez de intentar acertar coordenadas de mundo en Three.js a
   ciegas. Bajado a la mitad de la altura del intento anterior (pedido
   explícito: "bájalos el doble") — por eso vive DESPUÉS del tablero en
   el DOM (ver index.html): a esta altura, si pintara antes, quedaría
   tapado por el tablero en vez de flotar sobre su superficie. Cada
   anillo tiene, además del borde girando, una "cuenta" brillante que
   viaja por el borde con `offset-path` — eso es lo que se lee como
   "orbitando alrededor" (el borde solo rotando no se notaba). */
.nave-console__ring {
  position: absolute;
  left: 50%;
  bottom: calc(6vh + 20px);
  transform: translate(-50%, -50%) rotateX(72deg);
  transform-style: preserve-3d;
  border-radius: 50%;
  pointer-events: none;
}

.nave-console__ring--cyan {
  width: 168px;
  height: 168px;
}

.nave-console__ring--violet {
  width: 122px;
  height: 122px;
}

.nave-console__ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: ringSpin 9s linear infinite;
}

.nave-console__ring--cyan .nave-console__ring-inner {
  border: 2px dashed var(--accent-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  opacity: 0.55;
}

.nave-console__ring--violet .nave-console__ring-inner {
  border: 2px dashed var(--accent-violet);
  box-shadow: 0 0 12px rgba(123, 47, 255, 0.45);
  opacity: 0.5;
  animation-duration: 7s;
  animation-direction: reverse;
}

@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

.nave-console__ring-orbit {
  position: absolute;
  inset: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
  offset-path: circle(50% at 50% 50%);
  offset-rotate: 0deg;
  animation: orbitMove 5s linear infinite;
}

.nave-console__ring--cyan .nave-console__ring-orbit {
  color: var(--accent-cyan);
}

.nave-console__ring--violet .nave-console__ring-orbit {
  color: var(--accent-violet);
  animation-duration: 4s;
  animation-direction: reverse;
}

@keyframes orbitMove {
  to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nave-console__ring-inner,
  .nave-console__ring-orbit {
    animation: none;
  }
}

/* Tablero de la consola: da la ilusión de que GLAC está parado detrás
   de él, ya que el modelo es una malla rígida sin piernas articuladas
   para una pose de pie real. */
.nave-console__desk {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: 290px;
  height: 112px;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.15), var(--bg-soft) 45%, var(--bg-deep));
  border: 1px solid rgba(138, 148, 166, 0.28);
  border-radius: 16px 16px 6px 6px;
  box-shadow: 0 -12px 26px rgba(0, 0, 0, 0.55) inset, 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.nave-console__strip {
  position: absolute;
  top: 16px;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  box-shadow: 0 0 10px currentColor;
  animation: navePulse 2.4s ease-in-out infinite;
}

.nave-console__strip--cyan {
  left: 16px;
  background: var(--accent-cyan);
  color: var(--accent-cyan);
}

.nave-console__strip--violet {
  right: 16px;
  background: var(--accent-violet);
  color: var(--accent-violet);
  animation-delay: 0.7s;
}

@keyframes navePulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nave-console__strip {
    animation: none;
    opacity: 0.85;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 700px) {
  #glac-nave-spot {
    width: 170px;
    height: 204px;
    margin-bottom: 4vh;
  }
  .nave-console__desk {
    width: 200px;
    height: 82px;
    bottom: 4vh;
  }
  .nave-console__glow {
    width: 160px;
    height: 160px;
  }
  .nave-console__ring {
    bottom: calc(4vh + 14px);
  }
  .nave-console__ring--cyan {
    width: 120px;
    height: 120px;
  }
  .nave-console__ring--violet {
    width: 86px;
    height: 86px;
  }
}