/* ═══════════════════════════════════════════════════════════════════════════
   T13E LABS — SHARED CHROME
   Custom cursor + background texture, used by the main site AND the dashboard.
   Load after tokens.css/base.css, together with /shared/cursor.js.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── CUSTOM CURSOR ────────────────────────────────────────────────────── */
/* Only hide the native cursor on devices that actually have a mouse. */
@media (pointer: fine) {
  body {
    cursor: none;
  }
}

#cur {
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s;
}

#cur .cursor-logo {
  width: 100%;
  height: 100%;
  display: block;
}

#cur-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(248, 209, 6, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}

body.hov #cur {
  width: 40px;
  height: 40px;
}

body.hov #cur-ring {
  width: 56px;
  height: 56px;
  border-color: rgba(248, 209, 6, 0.7);
}

/* Touch devices: no mouse, no custom cursor. */
@media (pointer: coarse) {
  #cur,
  #cur-ring {
    display: none;
  }
}

/* ─── BACKGROUND TEXTURE ──────────────────────────────────────────────── */
/* Compact one-element variant (legal pages, wip.html) */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(248, 209, 6, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 209, 6, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
}

.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 20% 20%, rgba(248, 209, 6, 0.065) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 85% 80%, rgba(4, 178, 217, 0.04) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 4px);
}

/* Layered variant (index.html, showcase, dashboard) */
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(248, 209, 6, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 209, 6, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
}

.bg-glows {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 80% 10%, rgba(248, 209, 6, 0.065) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 5% 90%, rgba(4, 178, 217, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 110%, rgba(217, 20, 128, 0.03) 0%, transparent 60%);
}

.bg-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.07) 2px, rgba(0, 0, 0, 0.07) 4px);
}