/* Vaho · Moxen — los estilos del efecto y de la demostración. */
:root {
  --vh-fondo: #0a0a0a;
  --vh-texto: #f4f4f4;
  --vh-pista: rgba(255, 255, 255, .6);
  --vh-velo-pista: rgba(0, 0, 0, .55);    /* un velo bajo la pista, para leerla sobre el vidrio */
  /* lo que lee vaho.js (r, g, b): la ciudad de noche detrás del vidrio */
  --vh-cielo: 1, 1, 1;            /* el cielo arriba: negro */
  --vh-horizonte: 44, 44, 44;     /* sobre los techos, el resplandor de la ciudad */
  --vh-lejos: 8, 8, 8;            /* las torres del fondo */
  --vh-cerca: 3, 3, 3;            /* los edificios de delante y la calle */
  --vh-luces: 1;                  /* cuánto brillan ventanas, faroles y autos (0: de día) */
  --vh-vaho: 34, 34, 34;          /* el color del vaho */
  --vh-vaho-k: .1;                /* cuánto tapa: de noche, poco (el negro sigue negro) */
  --vh-suaviza: .22;              /* cuánto desenfoca lo que hay detrás */
  --vh-halo: .14;                 /* cuánto brilla el vapor alrededor de cada luz */
  --vh-resto: .55;                /* en un rastro angosto, lo que queda del bokeh */
}

/* ── el efecto ─────────────────────────────────────────────────────── */
/* touch-action: none para que el dedo limpie sin mover la página */
[data-vaho] { position: relative; overflow: hidden; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; }
.vh-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-vaho]:focus-visible { box-shadow: inset 0 0 0 2px var(--vh-pista); }
.vh-sin-webgl .vh-pista::after { content: " (Este navegador no tiene WebGL 2: el vidrio queda quieto.)"; }

/* ── la demostración ───────────────────────────────────────────────── */
.vh-escena { height: 100%; cursor: crosshair; }
.vh-escena::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; pointer-events: none;
  background: linear-gradient(to top, var(--vh-velo-pista), transparent);
}
.vh-pista {
  position: absolute; left: 1rem; right: 1rem; bottom: 1.5rem; margin: 0; z-index: 2;
  text-align: center; text-wrap: balance; pointer-events: none;
  color: var(--vh-pista); font-size: .95rem; font-weight: 600; letter-spacing: -.02em;
}
@media (max-width: 560px) { .vh-pista { font-size: .85rem; bottom: 1.1rem; } }