/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Ente vivo (fondo + células) ---------- */

.ente {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.ente-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Telaraña de hexágonos (encima del fondo, detrás de todo lo demás) ---------- */

.hex-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28.56' height='49.47' viewBox='0 0 56 97'><g fill='none' stroke='%23baff2e' stroke-width='1'><path d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/><path d='M28 64 L56 80 L56 97 M28 64 L0 80 L0 97 M28 0 L28 -16'/></g></svg>");
  background-repeat: repeat;
  animation: hex-neon-parpadeo 4s infinite alternate;
}

@keyframes hex-neon-parpadeo {
  0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 0.0898; }
  20%, 22%, 55% { opacity: 0.0334; }
}

@media (prefers-reduced-motion: reduce) {
  .hex-grid { animation: none; opacity: 0.075; }
}

/* Capa brillante que se enciende solo cerca de la célula/orbe que se toca con el mouse */
.hex-grid-brillo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28.56' height='49.47' viewBox='0 0 56 97'><g fill='none' stroke='%23baff2e' stroke-width='1.4'><path d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/><path d='M28 64 L56 80 L56 97 M28 64 L0 80 L0 97 M28 0 L28 -16'/></g></svg>");
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent var(--gr, 22%));
  mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent var(--gr, 22%));
}

.hex-grid-brillo.activo {
  animation: hex-brillo-flicker 3.6s linear infinite 0.2s;
}

@keyframes hex-brillo-flicker {
  0%, 100% { opacity: 0.748; }
  3%       { opacity: 0.3; }
  6%       { opacity: 0.748; }
  7%       { opacity: 0.2; }
  8%       { opacity: 0.748; }
  20%      { opacity: 0.748; }
  22%      { opacity: 0.15; }
  24%      { opacity: 0.748; }
  55%      { opacity: 0.748; }
  57%      { opacity: 0.4; }
  58%      { opacity: 0.748; }
  60%      { opacity: 0.1; }
  62%      { opacity: 0.748; }
  85%      { opacity: 0.748; }
  86%      { opacity: 0.3; }
  88%      { opacity: 0.748; }
}

@media (prefers-reduced-motion: reduce) {
  .hex-grid-brillo { transition: none; }
  .hex-grid-brillo.activo { animation: none; opacity: 0.6; }
}

.ente-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.celula {
  position: absolute;
  display: block;
  text-decoration: none;
  box-sizing: border-box;
  z-index: 1;
  animation: celula-deambula 10s ease-in-out infinite;
}

.celula-empuje {
  position: relative;
  display: block;
  line-height: 0;
  transition: transform 0.5s ease-out;
  will-change: transform;
}

.celula img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1), filter 0.35s ease;
  animation: celula-respira 4.2s ease-in-out infinite;
}

/* Latido ocasional: pulso sutil que rompe el loop parejo, sin brincos abruptos */
@keyframes celula-latido {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.05); }
  65%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

.celula img.latido,
.orbe img.latido {
  animation: celula-latido 1.6s ease-in-out 1;
}

/* Respiración/palpitación + wobble tipo gelatina: vive en la imagen de adentro */
@keyframes celula-respira {
  0%, 100% { transform: scale(1, 1); }
  25%      { transform: scale(1.03, 0.985); }
  50%      { transform: scale(1.04, 1.04); }
  75%      { transform: scale(0.985, 1.03); }
}

/* Deambular: vive en el link de afuera, un camino orgánico corto que
   siempre vuelve a su lugar original, nunca se aleja mucho */
@keyframes celula-deambula {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(4.5px, -3.4px); }
  40%  { transform: translate(-3.4px, 3.4px); }
  60%  { transform: translate(3.4px, 4.5px); }
  80%  { transform: translate(-4.5px, -2.3px); }
  100% { transform: translate(0, 0); }
}

/* Respeta a quien tiene "reducir movimiento" activado en su dispositivo */
@media (prefers-reduced-motion: reduce) {
  .celula,
  .celula img,
  .particula {
    animation: none;
  }
}

/* ---------- Partículas (colores de la referencia EVA-08) ---------- */

.particula {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: particula-emite var(--dur, 3s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes particula-emite {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.9; }
  70%  { opacity: 0.45; }
  100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.15); opacity: 0; }
}

.p-rosa    { background: #ff2e88; box-shadow: 0 0 6px #ff2e88; }
.p-blanco  { background: #ffffff; box-shadow: 0 0 6px #ffffff; }
.p-naranja { background: #ff8a2e; box-shadow: 0 0 6px #ff8a2e; }
.p-verde   { background: #baff2e; box-shadow: 0 0 6px #baff2e; }
.p-morado  { background: #8a2eff; box-shadow: 0 0 6px #8a2eff; }
.p-rosaoscuro { background: #a3134f; box-shadow: 0 0 6px #a3134f; }

/* Brillo reforzado solo para las interiores (deambulantes) de morado/naranja/rosa oscuro,
   porque su tono se "come" el brillo normal al mezclarse con los magentas del fondo */
.p-morado.interior     { box-shadow: 0 0 4px #fff, 0 0 10px #8a2eff, 0 0 16px #8a2eff; }
.p-naranja.interior    { box-shadow: 0 0 4px #fff, 0 0 10px #ff8a2e, 0 0 16px #ff8a2e; }
.p-rosaoscuro.interior { box-shadow: 0 0 4px #fff, 0 0 10px #a3134f, 0 0 16px #a3134f; }

/* ---------- Panel de datos (arriba a la izquierda) ---------- */

.panel-datos {
  position: absolute;
  z-index: 20;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(0.62rem, 1.15vw, 0.85rem);
  line-height: 1.4;
  color: #baff2e;
  text-shadow: 0 0 4px #baff2e;
  pointer-events: none;
}

.panel-datos p {
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- Letrero de neón ---------- */

.neon-texto {
  position: absolute;
  z-index: 5;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(0.7rem, 2.3vw, 1.6rem);
  letter-spacing: 3px;
  color: #baff2e;
  text-shadow: 0 0 4px #baff2e;
  animation: neon-parpadeo 4s infinite alternate;
  pointer-events: none;
}

@keyframes neon-parpadeo {
  0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 55% { opacity: 0.4; }
}

/* ---------- Orbe musical ---------- */

.orbe {
  position: absolute;
  z-index: 3;
  line-height: 0;
  animation: orbe-vaga 11s ease-in-out infinite;
}

.orbe img {
  display: block;
  width: 100%;
  height: auto;
  animation: orbe-respira 5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(217, 6, 83, 0.55));
}

@keyframes orbe-vaga {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(10px, -14px); }
  50%  { transform: translate(-6px, -22px); }
  75%  { transform: translate(-12px, -6px); }
  100% { transform: translate(0, 0); }
}

@keyframes orbe-respira {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .neon-texto { animation: none; opacity: 1; }
  .orbe, .orbe img { animation: none; }
}

/* Partículas que viajan/dan vueltas dentro de un espacio contenido
   (por ejemplo el "agujerito" de una célula), en vez de salir disparadas */
@keyframes particula-viaja {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) translate(0, 0); }
  25%  { opacity: 1;    transform: translate(-50%, -50%) translate(var(--tx), calc(-1 * var(--ty))); }
  50%  { opacity: 0.85; transform: translate(-50%, -50%) translate(calc(-1 * var(--tx)), var(--ty)); }
  75%  { opacity: 1;    transform: translate(-50%, -50%) translate(calc(-0.6 * var(--tx)), calc(-0.6 * var(--ty))); }
  100% { opacity: 0.85; transform: translate(-50%, -50%) translate(0, 0); }
}

.celula:hover,
.celula:focus-visible {
  z-index: 10;
}

.celula:hover img,
.celula:focus-visible img {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 18px #ff2e88) brightness(1.15) saturate(1.3);
  animation: celula-tiembla 1.8s ease-in-out infinite;
}

@keyframes celula-tiembla {
  0%, 100% { transform: scale(1.12) rotate(-3deg); }
  50%      { transform: scale(1.17) rotate(3deg); }
}

.celula:focus-visible {
  outline: 2px solid #baff2e;
  outline-offset: 6px;
  border-radius: 50%;
}

.orbe:hover {
  z-index: 10;
}

.orbe:hover img {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 18px #ff2e88) brightness(1.15) saturate(1.3);
  animation: celula-tiembla 1.8s ease-in-out infinite;
}

/* ---------- Textura CRT (grano + scanlines, muy sutil, encima de todo) ---------- */

.textura-crt {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.75;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.09) 0px,
      rgba(255, 255, 255, 0.09) 1px,
      transparent 1px,
      transparent 3px
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 100% 3px, 120px 120px;
  transition: opacity 0.4s ease;
}

body.cargando .textura-crt {
  opacity: 1;
}

/* ---------- Título de la canción (texto vertical, borde izquierdo) ---------- */

.titulo-cancion-caja {
  position: fixed;
  left: 6px;
  top: 6%;
  bottom: 145px;
  z-index: 21;
  display: flex;
  pointer-events: none;
}

.titulo-cancion-ventana {
  width: 1.5em;
  height: 100%;
  overflow: hidden;
}

.titulo-cancion-cinta {
  display: flex;
  flex-direction: column;
  animation: titulo-marquee-vertical 14s linear infinite;
}

.titulo-cancion {
  writing-mode: vertical-rl;
  white-space: nowrap;
  margin: 0;
  padding-bottom: 100%;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(0.75rem, 1.6vw, 1.05rem);
  letter-spacing: 2px;
  color: #ff2e88;
  text-shadow: 0 0 4px #ff2e88;
}

@keyframes titulo-marquee-vertical {
  from { transform: translateY(0%); }
  to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .titulo-cancion-cinta { animation: none; }
}

/* ---------- Reacción del orbe a la música (pulso aproximado, no sincronizado a la pista real) ---------- */

.orbe.sonando img {
  animation: orbe-pulso-musical 0.6s ease-in-out infinite;
}

@keyframes orbe-pulso-musical {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ---------- Burbuja del orbe ---------- */

.burbuja-orbe {
  position: absolute;
  left: 50%;
  bottom: 78%;
  transform: translateX(-50%);
  z-index: 15;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(0.65rem, 1.3vw, 0.95rem);
  color: #ffffff;
  text-shadow: 0 0 4px #ffffff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  cursor: default;
}

.burbuja-orbe.visible {
  opacity: 1;
  animation: burbuja-deambula 5s ease-in-out infinite;
}

.burbuja-orbe.pop {
  animation: burbuja-pop 0.5s cubic-bezier(.34, 1.56, .64, 1), burbuja-deambula 5s ease-in-out infinite 0.5s;
}

@keyframes burbuja-pop {
  0%   { transform: translateX(-50%) scale(0.3); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes burbuja-deambula {
  0%, 100% { margin: 0 0 0 0; }
  50%      { margin: -4px 0 0 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbe.sonando img { animation: none; }
  .burbuja-orbe.visible, .burbuja-orbe.pop { animation: none; opacity: 1; }
}

/* ---------- Pantallas de carga (superpuestas, antes de entrar al menú) ---------- */

body.cargando .ente,
body.cargando .panel-datos,
body.cargando .titulo-cancion-caja {
  filter: blur(5px);
  transition: filter 0.4s ease;
}

.pantalla-carga {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  cursor: pointer;
}

.pantalla-carga[hidden] {
  display: none;
}

/* Aparición secuencial tipo pop: mientras espera su turno, invisible y sin animar */
#pantallaBienvenida .oculto {
  opacity: 0;
  transform: scale(0.3);
  animation: none !important;
}

#pantallaBienvenida .pop-entrada {
  animation: texto-pop-entra 0.5s cubic-bezier(.34, 1.56, .64, 1) forwards !important;
}

@keyframes texto-pop-entra {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #pantallaBienvenida .oculto { opacity: 1; transform: none; }
  #pantallaBienvenida .pop-entrada { animation: none !important; }
}

.texto-hola {
  font-family: 'VT323', 'Courier New', monospace;
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 7rem);
  color: transparent;
  -webkit-text-stroke: 1.5px #ff2e88;
  text-stroke: 1.5px #ff2e88;
  text-shadow: 0 0 4px rgba(255, 46, 136, 0.45);
  margin: 0;
  letter-spacing: 4px;
  line-height: 1;
}

.texto-hola-sub {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  color: #ffffff;
  margin: -8px 0 0 0;
  letter-spacing: 2px;
}

.texto-hola-sub::after {
  content: '▮';
  display: inline-block;
  margin-left: 4px;
  animation: texto-parpadea 0.9s steps(1) infinite;
}

.texto-continuar {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(1rem, 3vw, 1.8rem);
  color: #baff2e;
  text-shadow: 0 0 4px #baff2e, 0 0 10px #baff2e;
  letter-spacing: 3px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: texto-parpadea 1.2s ease-in-out infinite;
}

.texto-f11 {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(0.77rem, 1.98vw, 1.16rem);
  color: #ff8a2e;
  text-shadow: 0 0 4px #ff8a2e;
  letter-spacing: 1px;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  animation: neon-muriendo 4s linear infinite;
}

.texto-disclaimer {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(0.77rem, 1.98vw, 1.16rem);
  color: #ffffff;
  text-shadow: 0 0 4px #ffffff;
  letter-spacing: 1px;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  animation: neon-muriendo 2.6s linear infinite;
}

@keyframes neon-muriendo {
  0%, 100% { opacity: 1; }
  3%       { opacity: 0.4; }
  6%       { opacity: 1; }
  7%       { opacity: 0.25; }
  8%       { opacity: 1; }
  20%      { opacity: 1; }
  22%      { opacity: 0.15; }
  24%      { opacity: 1; }
  55%      { opacity: 1; }
  57%      { opacity: 0.5; }
  58%      { opacity: 1; }
  60%      { opacity: 0.1; }
  62%      { opacity: 1; }
  85%      { opacity: 1; }
  86%      { opacity: 0.3; }
  88%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .texto-f11, .texto-disclaimer { animation: none; }
}

.flechas-continuar {
  font-size: 0.65em;
  letter-spacing: 1px;
  animation: none !important;
}

.flechas-continuar span {
  display: inline-block;
  animation: texto-parpadea 1.2s ease-in-out infinite;
}

.flechas-continuar span:nth-child(1) { animation-delay: 0s; }
.flechas-continuar span:nth-child(2) { animation-delay: 0.15s; }
.flechas-continuar span:nth-child(3) { animation-delay: 0.3s; }
.flechas-continuar span:nth-child(4) { animation-delay: 0.45s; }

@keyframes texto-parpadea {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.texto-sistema {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: #baff2e;
  text-shadow: 0 0 4px #baff2e, 0 0 10px #baff2e;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.punto-verde {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #baff2e;
  box-shadow: 0 0 8px #baff2e;
  animation: texto-parpadea 1s ease-in-out infinite;
}

.spinner-carga {
  position: relative;
  width: 44px;
  height: 44px;
}

.spinner-carga span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 44px;
  margin-left: -1.5px;
  transform-origin: 50% 50%;
  animation: spinner-tick 1.2s linear infinite;
}

.spinner-carga span::before {
  content: '';
  display: block;
  width: 100%;
  height: 9px;
  background: #baff2e;
  border-radius: 2px;
  box-shadow: 0 0 4px #baff2e;
}

@keyframes spinner-tick {
  0%   { opacity: 1; }
  100% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .texto-continuar, .punto-verde, .spinner-carga { animation: none; }
}

.log-carga {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 6.5em;
}

.linea-log {
  margin: 0;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(0.75rem, 1.8vw, 1.05rem);
  color: #baff2e;
  letter-spacing: 1px;
  white-space: pre;
}

.linea-log .estado-estable {
  text-shadow: 0 0 6px #baff2e, 0 0 12px #baff2e;
  animation: texto-parpadea 0.6s ease-in-out infinite;
}

.linea-log.parpadea {
  animation: texto-parpadea 0.15s ease-in-out 2;
}

/* ---------- Título de la célula 5 (aparece al hover) ---------- */

.titulo-celula {
  position: absolute;
  z-index: 30;
  white-space: nowrap;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(1.1rem, 2.34vw, 1.69rem);
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 0 4px #ffffff;
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
}

.titulo-celula.visible {
  opacity: 1;
}

.titulo-celula.pop {
  animation: titulo-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) forwards,
             neon-parpadeo 4s 0.4s infinite alternate;
}

@keyframes titulo-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .titulo-celula.pop { animation: none; }
  .titulo-celula.visible { opacity: 1; transform: scale(1); }
}

/* ---------- Botón de play ---------- */

.boton-play {
  position: fixed;
  left: 15px;
  bottom: 97px;
  z-index: 22;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #ff2e88;
  color: #ff2e88;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 46, 136, 0.6);
  transition: transform 0.2s ease;
}

.boton-play:hover {
  transform: scale(1.1);
}

.boton-play:active {
  transform: scale(0.94);
}