/* ════════════ Arad — Sistema global de textura ════════════
   Capa ambiente fija (contornos topográficos + cruces de coordenada),
   presente en toda la web. Reacciona a mouse, scroll y touch vía
   variables CSS que actualiza /assets/arad-texture.js. No captura
   clics (pointer-events:none) y respeta prefers-reduced-motion. */

:root{
  --tex-x: 0px;
  --tex-y: 0px;
  --tex-scroll: 0px;
}

.arad-texture{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:multiply;
}

.arad-texture-contours{
  position:absolute;
  inset:-6%;
  opacity:.07;
  background-image:url("/assets/arad-contours.svg");
  background-size:cover;
  background-position:center;
  transform:translate3d(calc(var(--tex-x) * -1), calc((var(--tex-y) * -1) + var(--tex-scroll)), 0);
  transition:transform .5s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}

.arad-texture-crosshairs{
  position:absolute;
  inset:0;
  transform:translate3d(var(--tex-x), var(--tex-y), 0);
  transition:transform .6s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}

.tex-cross{
  position:absolute;
  width:14px;height:14px;
  opacity:.34;
}
.tex-cross::before,
.tex-cross::after{content:'';position:absolute;background:#8a8a8a;}
.tex-cross::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);}
.tex-cross::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%);}
.tex-cross.tc-dim{opacity:.2;}

/* ─── Easter eggs: coordenadas reales de las capitales de la Amazonía
   ecuatoriana — el territorio donde opera Arad. Cada marcador es un
   punto real, no decoración abstracta. ─── */
.tex-geo{
  position:absolute;
  font-family:'Courier New', ui-monospace, monospace;
  white-space:nowrap;
  opacity:.4;
}
.tex-geo .tg-cross{position:relative;width:12px;height:12px;margin-bottom:5px;}
.tex-geo .tg-cross::before,
.tex-geo .tg-cross::after{content:'';position:absolute;background:#8a8a8a;}
.tex-geo .tg-cross::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);}
.tex-geo .tg-cross::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%);}
.tex-geo .tg-city{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#171717;}
.tex-geo .tg-coords{font-size:8.5px;color:#8a8a8a;margin-top:1px;}
.tex-geo .tg-prov{font-size:7.5px;letter-spacing:.1em;color:#a8112c;margin-top:1px;text-transform:uppercase;}
.tex-geo.tg-right{text-align:right;}
.tex-geo.tg-right .tg-cross{margin-left:auto;}

/* ─── Textura tipográfica: marca de agua sutil, no una imagen ─── */
.tex-watermark{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:90px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#171717;
  opacity:.035;
  white-space:nowrap;
  user-select:none;
  writing-mode:vertical-rl;
}

@media (max-width:640px){
  .arad-texture-contours{opacity:.045;}
  .tex-cross{display:none;}
  .tex-cross.tc-mobile{display:block;}
  .tex-geo{display:none;}
  .tex-geo.tg-mobile{display:block;}
  .tex-watermark{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .arad-texture-contours,
  .arad-texture-crosshairs{transition:none;}
}