/* ════════════════════════════════════════════════════════════════
   MENÚ · Miss Pepi
   Solo texto: las palabras aparecen escalonadas (flotando sobre la
   página) y luego el fondo blanco se cierra detrás. Al elegir, el
   fondo se retira primero y las palabras se van las últimas. La
   lógica y el sorteo de tamaños/letra viven en js/menu.js; aquí solo
   estética y transiciones.

   Tiempos (custom properties que inyecta el JS desde config.js):
     --word-ms     fade de cada palabra
     --bg-ms       fade del fondo blanco
     --stagger-ms  retardo entre palabras
   Por palabra, el JS pone --i (posición en el escalonado), --c (color
   de la categoría para la letra sorteada) y el font-size sorteado.
   ════════════════════════════════════════════════════════════════ */

/* ---- overlay: columna de palabras alineada a la izquierda ----
   Por encima de #app-view / #welcome-view, por debajo del devpanel
   (9999). El fondo es transparente hasta que entra .bg-in.          */
#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1rem;
  padding-left: 8vw;

  background: transparent;
  transition: background var(--bg-ms, 600ms) ease;
}
#menu-overlay[hidden] { display: none; }
#menu-overlay.bg-in { background: #fff; }

/* ---- cada palabra: texto y nada más ----
   El halo blanco hace legible la palabra mientras flota sobre la
   espiral o las fotos, antes de que llegue el fondo.                */
.menu-word {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  /* el font-size lo sortea el JS en cada apertura */
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  text-align: left;
  color: #000;
  text-shadow: 0 0 8px #fff, 0 0 16px #fff;
  cursor: pointer;

  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   var(--word-ms, 500ms) ease,
    transform var(--word-ms, 500ms) ease;
  transition-delay: calc(var(--i, 0) * var(--stagger-ms, 70ms));
}
#menu-overlay.words-in .menu-word {
  opacity: 1;
  transform: translateY(0);
}

/* con el fondo ya cerrado, el halo sobra */
#menu-overlay.bg-in .menu-word { text-shadow: none; }

/* la letra sorteada, con el color de su categoría */
.menu-letter {
  color: var(--c);
  font-weight: inherit;
}

/* foco visible al llegar por teclado (accesibilidad) */
.menu-word:focus-visible {
  outline: 1px solid #000;
  outline-offset: 4px;
}

/* respeta el ajuste del sistema: sin animación, aparecen y ya */
@media (prefers-reduced-motion: reduce) {
  #menu-overlay, .menu-word { transition-duration: 1ms; transition-delay: 0ms; }
}