/* ════════════════════════════════════════════════════════════════
   WELCOME · Miss Pepi   ·   mobile-first
   La posición/tamaño de espiral y piernas se inyecta desde js/config.js
   (por breakpoint); aquí solo va lo que no cambia con la config.
   ════════════════════════════════════════════════════════════════ */

/* ---- fondo: espiral hipnótica girando ----
   width/height/left/top reales los calcula js/welcome.js (spiralDiameterPx):
   el círculo siempre crece lo justo para cubrir la esquina de pantalla más
   lejana al centro, así nunca se ve la esquina blanca sea cual sea la
   posición del centro o el tamaño de pantalla. Esto de aquí es solo un
   tamaño de emergencia por si el JS aún no ha corrido.                   */
#spiralWrap {
  position: fixed; top: 50%; left: 50%;
  width: 200vmax; height: 200vmax;
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
}
#spiralWrap svg { width: 100%; height: 100%; display: block; }
#spiralGroup { transform-origin: 500px 500px; }

/* ---- ojo de la espiral: zona clicable que abre el menú ----
   tamaño/posición los pone js/welcome.js (sigue al centro de la espiral) */
#spiralEye {
  position: fixed;
  transform: translate(-50%, -50%);
  border: none; border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 4;
}

/* ---- logo Miss Pepi ---- */
.logo {
  position: fixed; top: 3vh; left: 5vw;
  width: 64vw; max-width: 420px; z-index: 3;
  filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 7px #fff);  /* halo para leer sobre negro */
}
@media (min-width: 768px) {
  .logo { top: 4vh; left: 4vw; width: min(42vw, 560px); }
}

/* ---- capa frontal: piernas ----
   height / anclajes los pone js/welcome.js según el breakpoint:
   escritorio = de pie abajo · móvil = colgando del borde superior
   con vaivén derecha↔izquierda. width:auto conserva la proporción. */
.legs {
  position: fixed;
  width: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}