/* ============================================================
   KOVANTA — jarvis.css
   ============================================================ */

/* ── Canvas — BEHIND everything, NO pointer events ── */
#jarvis-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* NEVER block clicks */
}

/* ── HUD overlay ─────────────────────── */
#hud-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hud-corner {
  position: absolute;
  width: 56px;
  height: 56px;
  opacity: .38;
  pointer-events: none;
}
.hud-corner.tl { top:18px; left:18px;  border-top:1px solid #00ffc8; border-left:1px solid #00ffc8; }
.hud-corner.tr { top:18px; right:18px; border-top:1px solid #00ffc8; border-right:1px solid #00ffc8; }
.hud-corner.bl { bottom:18px; left:18px;  border-bottom:1px solid #00ffc8; border-left:1px solid #00ffc8; }
.hud-corner.br { bottom:18px; right:18px; border-bottom:1px solid #00ffc8; border-right:1px solid #00ffc8; }

.hud-label {
  position: absolute;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 3px;
  color: #00ffc8;
  opacity: .26;
  text-transform: uppercase;
  pointer-events: none;
}
.hud-label.tl { top:26px;    left:82px; }
.hud-label.tr { top:26px;    right:82px; }
.hud-label.bl { bottom:26px; left:82px; }
.hud-label.br { bottom:26px; right:82px; }

/* ── Scan lines — pointer-events: none always ── */
#hud-scan-h {
  position: fixed; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,255,200,.3), transparent);
  animation: scanH 4.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
#hud-scan-v {
  position: fixed; left:0; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, transparent, rgba(0,255,200,.18), transparent);
  animation: scanV 8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes scanH { 0%{transform:translateX(-100%)} 100%{transform:translateX(100vw)} }
@keyframes scanV { 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} }

/* ── Centre rings — pointer-events: none ── */
#center-rings {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.c-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  pointer-events: none;
}
.c-ring.r1 { width:130px;  height:130px;  border:1px solid rgba(0,255,200,0.10); animation:spinRing 22s  linear infinite; }
.c-ring.r2 { width:220px;  height:220px;  border:1px solid rgba(0,180,255,0.07); animation:spinRing 40s  linear infinite reverse; }
.c-ring.r3 { width:360px;  height:360px;  border:1px solid rgba(0,255,200,0.04); animation:spinRing 70s  linear infinite; }
.c-ring.r4 { width:520px;  height:520px;  border:1px solid rgba(0,180,255,0.03); animation:spinRing 100s linear infinite reverse; }

@keyframes spinRing {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}

/* ── Stack order ─────────────────────── */
nav      { position: relative; z-index: 100; }
section  { position: relative; z-index: 10; }
footer   { position: relative; z-index: 10; }
#chatbot { position: fixed;    z-index: 200; }

/* ── Cursor always on top ── */
#cursor      { z-index: 99999 !important; }
#cursor-ring { z-index: 99998 !important; }

/* ── Page background ─────────────────── */
body { background: #020408; }

/* ── Section transparency so Jarvis shows through ── */
#hero     { background: transparent; }
#stats    { background: rgba(7,11,24,0.82);  backdrop-filter: blur(8px);  }
#services { background: rgba(7,11,24,0.88);  backdrop-filter: blur(12px); }
#process  { background: rgba(5,5,8,0.84);    backdrop-filter: blur(10px); }
#portfolio{ background: rgba(7,11,24,0.88);  backdrop-filter: blur(12px); }
#ai       { background: rgba(5,5,8,0.84);    backdrop-filter: blur(10px); }
#why      { background: rgba(10,15,30,0.88); backdrop-filter: blur(12px); }
#cta      { background: rgba(5,5,8,0.75);    backdrop-filter: blur(8px);  }
footer    { background: rgba(7,11,24,0.95);  backdrop-filter: blur(16px); }
nav       { background: rgba(2,4,8,0.75);    backdrop-filter: blur(24px); }