/* ============================================================
   WEB ARTISANS — webartisans-fx.css
   Capa ADITIVA de efectos avanzados (no toca styles.css):
   cursor personalizado · barra de progreso · tilt 3D ·
   marquee reactivo a velocidad · intro del hero.
   Todo se desactiva con prefers-reduced-motion / touch.
   Se enlaza después de styles.css y pages.css.
   ============================================================ */

/* ---------- Barra de progreso de scroll ---------- */
.wa-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:250;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--brand) 0%, #5b5bff 55%, #00b4ff 100%);
  will-change:transform; pointer-events:none;
}

/* ---------- Cursor personalizado ---------- */
.wa-cursor-on, .wa-cursor-on *{ cursor:none !important; }
/* nunca robar el cursor de texto en campos */
.wa-cursor-on input, .wa-cursor-on textarea, .wa-cursor-on select,
.wa-cursor-on [contenteditable]{ cursor:auto !important; }

.wa-cur{ position:fixed; top:0; left:0; z-index:100000; pointer-events:none; will-change:transform; }
.wa-cur-dot{
  position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%;
  background:#fff; mix-blend-mode:difference; transform:translate(-50%,-50%);
  z-index:100001; pointer-events:none; will-change:transform;
}
.wa-cur-ring{
  position:fixed; top:0; left:0; width:42px; height:42px; border-radius:50%;
  border:1.5px solid #fff; mix-blend-mode:difference;
  transform:translate(-50%,-50%) scale(1); transition:width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s, opacity .3s;
  z-index:100000; pointer-events:none; will-change:transform; display:flex; align-items:center; justify-content:center;
}
.wa-cur-ring .lbl{
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#06070d; opacity:0; transform:scale(.6); transition:opacity .25s, transform .25s; mix-blend-mode:normal;
}
/* sobre enlaces / botones: anillo crece */
.wa-cur.is-link .wa-cur-ring{ width:64px; height:64px; background:rgba(255,255,255,.12); }
/* sobre media (cards/imágenes/video): anillo sólido con etiqueta */
.wa-cur.is-media .wa-cur-ring{ width:74px; height:74px; background:#fff; border-color:#fff; mix-blend-mode:normal; }
.wa-cur.is-media .wa-cur-ring .lbl{ opacity:1; transform:scale(1); }
.wa-cur.is-media .wa-cur-dot{ opacity:0; }
/* al presionar */
.wa-cur.is-down .wa-cur-ring{ transform:translate(-50%,-50%) scale(.82); }
.wa-cur.hide .wa-cur-ring, .wa-cur.hide .wa-cur-dot{ opacity:0; }

/* sobre ÁREAS CLARAS: cursor negro sólido (sin blend) para que no se pierda */
.wa-cur.on-light .wa-cur-dot{ background:#06070d; mix-blend-mode:normal; }
.wa-cur.on-light .wa-cur-ring{ border-color:#06070d; mix-blend-mode:normal; }
.wa-cur.on-light.is-link .wa-cur-ring{ background:rgba(6,7,13,.10); border-color:#06070d; }

/* ---------- Tilt 3D en tarjetas ---------- */
.tilt-wrap{ perspective:1100px; }
.tilt{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .18s var(--ease); transform-style:preserve-3d; will-change:transform; }
.tilt.tilt-reset{ transition:transform .6s var(--ease); }

/* ---------- Marquee reactivo a velocidad ---------- */
.tm-track{ transform:skewX(0deg); will-change:transform; }

/* ---------- Reveal de entrada del hero (lo maneja GSAP; sin estado oculto en CSS) ---------- */

@media (prefers-reduced-motion:reduce){
  .wa-progress{ display:none; }
  .wa-cur, .wa-cur-dot, .wa-cur-ring{ display:none !important; }
  .wa-cursor-on, .wa-cursor-on *{ cursor:auto !important; }
  .tilt{ transform:none !important; }
  .tm-track{ transform:none !important; }
}