/* NADATA — estilos de la portada (ver LEEME.txt, sección main.css).
   Paleta principal (3 colores):
     1. Noche   #050816  fondo y cielo
     2. Dorado  #ffefb8  logo y textos
     3. Ciudad  #ffc76a  halo amarillo de las luces estrella, igual a las ciudades de la foto */

/* ---------- Variables ---------- */

:root {
  /* Colores */
  --noche: #050816;
  --texto: #ffefb8;
  --luz-centro: #ffffff;
  --ciudad: #ffc76a;             /* tono de las luces de ciudad de la foto */
  --luz-crema: #fff1c9;          /* anillo entre el centro blanco y el halo */
  /* Los mismos colores en canales RGB, para usarlos con transparencia */
  --texto-rgb: 255 239 184;
  --ciudad-rgb: 255 199 106;

  --fuente: "Varela Round", system-ui, sans-serif;

  /* Medidas de la composición, en unidades de la escena */
  --titulo-arriba: 3cqh;
  --titulo-izquierda: 3cqw;
  --titulo-cap: 3.4cqmin;       /* alto de las mayúsculas de NADAT; la polilla (última A) es un poco más alta */
  --nucleo-centro: 18cqh;        /* la polilla, entera en el cielo; la fila de luces va a esta misma altura */
  --nucleo-ancho: min(20cqh, 24cqw);
  --luz: calc(10.5cqmin - 3px);  /* diámetro base de una luz */
  --paso: calc(var(--nucleo-ancho) / 2 + var(--luz) * 1.1);  /* distancia entre luces de la fila */
  --luz-hover: 1.15;             /* cuánto crece al pasar el mouse */
  --icono: 30%;                  /* margen del ícono dentro de la luz (más = ícono más chico) */

  /* La foto de fondo: proporción y qué parte de la foto completa muestra.
     Las posiciones --x / --y de cada luz (home.php) se miden sobre la foto completa. */
  --foto-ar: 1.5028;             /* 4256 / 2832 */
  --foto-x0: 0;
  --foto-ancho: 1;
}

@font-face {
  font-family: "Varela Round";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/varela-round-latin.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--noche);
  color: var(--texto);
  font-family: var(--fuente);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Escena ---------- */

.escena {
  position: relative;
  width: 100%;
  height: 100vh;   /* respaldo para navegadores sin dvh */
  height: 100dvh;
  min-height: 320px;
  overflow: hidden;
  container-type: size;
  /* El planeta apagado, anclado arriba para que siempre se vea el cielo y el horizonte */
  background: var(--noche) url("../img/tierra-apagada-1920.webp") center top / cover no-repeat;
  --foto-encendida: url("../img/tierra-1920.webp");
}

@media (min-width: 1921px), (min-width: 961px) and (min-resolution: 2dppx) {
  .escena {
    background-image: url("../img/tierra-apagada-3840.webp");
    --foto-encendida: url("../img/tierra-3840.webp");
  }
}

/* Celular y pantallas verticales: recorte vertical de la foto, centrado en las ciudades */
@media (max-aspect-ratio: 4/5) {
  :root {
    --foto-ar: .6;               /* tierra-movil.webp: 1080 x 1800 */
    --foto-x0: .2998;            /* el recorte empieza en el píxel 1276 de 4256 */
    --foto-ancho: .3992;         /* y mide 1699 de 4256 */
    --titulo-izquierda: 5cqw;
    --titulo-cap: 5.2cqw;
    --nucleo-centro: 18cqh;
    --nucleo-ancho: min(30cqw, 14cqh);
    --luz: calc(9.5cqw - 3px);
    --paso: 20.5cqw;
  }

  .escena {
    background-image: url("../img/tierra-apagada-movil.webp");
    --foto-encendida: url("../img/tierra-movil.webp");
  }
}

/* Tamaño real de la foto en pantalla (equivale a background-size: cover) */
.escena {
  --foto-w: max(100cqw, 100cqh * var(--foto-ar));
  --foto-h: calc(var(--foto-w) / var(--foto-ar));
}

/* La foto con las ciudades encendidas, encima del planeta apagado.
   Oculta por defecto; main.js arma en --mascara un círculo difuso alrededor de cada luz cercana al planeta. */
.ciudades {
  position: absolute;
  inset: 0;
  background: var(--foto-encendida) center top / cover no-repeat;
  -webkit-mask-image: var(--mascara, linear-gradient(transparent, transparent));
  mask-image: var(--mascara, linear-gradient(transparent, transparent));
  pointer-events: none;
}

/* ---------- Planeta en WebGL (planeta.js) ----------
   main.js pone .con-planeta en la escena cuando el planeta arrancó bien.
   Sin esa clase todo queda como antes: la foto apagada y la máscara de ciudades. */

.planeta {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-out;
  pointer-events: none;
}

.escena.con-planeta {
  background-image: none;
}

.con-planeta .planeta {
  opacity: 1;
}

.con-planeta .ciudades {
  display: none;
}

.titulo {
  position: absolute;
  top: var(--titulo-arriba);
  left: var(--titulo-izquierda);
  display: flex;
  align-items: flex-end;         /* la palabra y la polilla apoyadas en la misma línea base */
  margin: 0;
  color: var(--texto);
}

/* Las medidas salen de los dibujos: en nadata-palabra-nadat.svg (alto 128) las mayúsculas van
   de 18 a 111; en nadata-isotipo.svg (alto 462) la polilla va de 17 a 446 */
.titulo__palabra svg {
  height: calc(var(--titulo-cap) * 128 / 93);
  width: calc(var(--titulo-cap) * 698 / 93);
  margin-bottom: calc(var(--titulo-cap) * -17 / 93);
}

.titulo__logo svg {
  --polilla: calc(var(--titulo-cap) * 1.25);   /* alto visible de la polilla */
  height: calc(var(--polilla) * 462 / 429);
  width: calc(var(--polilla) * 534 / 429);
  margin-bottom: calc(var(--polilla) * -16 / 429);
  margin-left: calc(var(--titulo-cap) * .02);
}

.titulo svg {
  display: block;
}

.nucleo svg {
  display: block;
  width: 100%;
  height: auto;
}

.nucleo {
  position: absolute;
  top: var(--nucleo-centro);
  left: 50%;
  width: var(--nucleo-ancho);
  transform: translate(-50%, -50%);
  color: var(--texto);
  filter: drop-shadow(0 0 1.5cqmin rgb(var(--texto-rgb) / .25));
  pointer-events: none;
}

.firma {
  position: absolute;
  bottom: 3cqh;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 10px;
  font-size: clamp(10px, 2.2cqmin, 22px);
  letter-spacing: .06em;
  opacity: .85;
  text-shadow: 0 0 6px var(--noche);
  pointer-events: none;
}

/* ---------- Luces del menú ---------- */

.luz {
  --tam: calc(var(--luz) * var(--escala, 1));

  position: absolute;
  /* Lugar inicial: fila horizontal a la altura de la polilla, --fila pasos desde el centro */
  /* Sin la polilla al centro, la fila se cierra: las luces quedan a ±0,5 y ±1,5 pasos del centro */
  left: calc(50% + (var(--fila, 0) - clamp(-1, var(--fila, 0) * 100, 1) * .5) * var(--paso));
  top: var(--nucleo-centro);
  width: var(--tam);
  height: var(--tam);
  margin: calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--noche);
  font: inherit;
  cursor: grab;
  touch-action: none;            /* el arrastre lo maneja escena.js */
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

/* Cuando el visitante la mueve, main.js le pone .libre y su posición --x / --y,
   medida de 0 a 1 sobre la foto completa (así queda sobre la misma ciudad al cambiar el tamaño de la ventana).
   clamp() la mantiene dentro de la escena cuando la foto se recorta (celular). */
.luz.libre {
  left: clamp(var(--tam) / 2, calc((100cqw - var(--foto-w)) / 2 + (var(--x) - var(--foto-x0)) / var(--foto-ancho) * var(--foto-w)), 100cqw - var(--tam) / 2);
  top: clamp(var(--tam) / 2, calc(var(--y) * var(--foto-h)), 100cqh - var(--tam) / 2);
}

/* Con el planeta, las luces soltadas son faros fijos en la pantalla: --x / --y son fracciones de la escena */
.con-planeta .luz.libre {
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
}

.luz.arrastrando {
  cursor: grabbing;
  z-index: 2;
}

/* Entrada: se prenden una tras otra, con un par de parpadeos */
.luz__cuerpo {
  position: absolute;
  inset: 0;
  transition: transform .35s ease-out;
  animation: encender .9s step-end both;
  animation-delay: calc(.5s + var(--orden, 0) * .45s);
}

@keyframes encender {
  0%       { opacity: 0; }
  1%       { opacity: .5; }
  20%      { opacity: .05; }
  40%      { opacity: .8; }
  60%      { opacity: .2; }
  80%,
  100%     { opacity: 1; }
}

.luz__brillo {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--luz-centro) 0%,
    var(--luz-centro) 26%,
    var(--luz-crema) 36%,
    rgb(var(--ciudad-rgb) / .5) 50%,
    rgb(var(--ciudad-rgb) / .14) 64%,
    transparent 74%);
  transition: transform .35s ease-out, filter .35s ease-out, box-shadow .35s ease-out;
}

.luz__icono {
  position: absolute;
  inset: var(--icono);
}

.luz__icono svg {
  display: block;
  width: 100%;
  height: 100%;
}

.luz__nombre {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  transform: translateX(-50%);
  color: var(--texto);
  font-size: 14px;
  font-size: clamp(14px, 2.2cqmin, 24px);
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 0 0 transparent;
  transition: opacity .4s ease-out, text-shadow .6s ease-out;
  pointer-events: none;
}

.luz--reservada .luz__brillo {
  opacity: .8;
}

/* ---------- Interacción ---------- */

/* Hover de menú: la luz crece levemente y brilla más; aparece el nombre */
@media (hover: hover) {
  .luz:hover .luz__cuerpo {
    transform: scale(var(--luz-hover));
  }

  /* Solo crece el mismo brillo: sin sombra aparte (se veía como una segunda luz) y sin filtro
     de brillo (volvía verdoso el amarillo de ciudad) */
  .luz:hover .luz__brillo {
    transform: scale(1.18);
  }

  .luz:not(.luz--reservada):hover .luz__nombre {
    opacity: 1;
    text-shadow: 0 0 10px rgb(var(--ciudad-rgb) / .8);
  }
}

/* Al hacer clic: brilla fuerte y el ícono da una vuelta */
.luz.toque .luz__brillo {
  transform: scale(1.35);       /* sin filtro de brillo: mantiene el amarillo de ciudad */
}

.luz.toque .luz__icono {
  animation: girar 1.1s cubic-bezier(.45, 0, .2, 1);
}

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

/* Mientras se arrastra: un poco más grande, sin nombre */
.luz.arrastrando .luz__cuerpo {
  transform: scale(1.25);
}

.luz.arrastrando .luz__nombre {
  opacity: 0;
}

/* El nombre también se enciende al mantener presionado (celular) o con el teclado */
.luz.nombre .luz__nombre,
.luz:focus-visible .luz__nombre {
  opacity: 1;
  text-shadow: 0 0 10px rgb(var(--ciudad-rgb) / .8);
}

.luz:focus {
  outline: none;
}

.luz:focus-visible {
  outline: 1px solid rgb(var(--texto-rgb) / .55);
  outline-offset: 8px;
}

.luz,
.luz * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- Movimiento reducido: entrada suave, sin parpadeos ni giros ---------- */

@media (prefers-reduced-motion: reduce) {
  .luz__cuerpo {
    animation: aparecer .6s ease-out both;
    animation-delay: calc(.2s + var(--orden, 0) * .15s);
  }

  .luz {
    will-change: auto;
  }

  .luz.toque .luz__icono {
    animation: none;
  }
}

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}