/* ── LENS CARD — vanilla JS magnifier (inspired by 21st.dev LensCard) ── */
/* Works on static HTML sites. No React, no Tailwind, no build step. */

.lens-card{
  position:relative;overflow:hidden;border-radius:12px;
  background:var(--ink,#0a1622);cursor:none;
  isolation:isolate;
}
.lens-card .lc-content{position:relative;z-index:2}
.lens-card .lc-magnify{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  clip-path:circle(0px at -200px -200px);
  background:var(--ink,#0a1622);
}
.lens-card .lc-magnify-inner{
  position:absolute;inset:0;transform-origin:0 0;will-change:transform;
}
.lens-card .lc-chroma{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  clip-path:circle(0px at -200px -200px);
  opacity:.18;mix-blend-mode:multiply;
  filter:hue-rotate(150deg) saturate(1.6);
}
.dark .lens-card .lc-chroma,.bg-dark .lens-card .lc-chroma,.bg-navy .lens-card .lc-chroma{
  opacity:.45;mix-blend-mode:screen;
}
.lens-card .lc-ring{
  position:absolute;left:0;top:0;z-index:5;pointer-events:none;
  width:208px;height:208px;border-radius:50%;
  transform:translate3d(-999px,-999px,0);will-change:transform;
  border:1px solid rgba(79,124,255,.6);
  box-shadow:
    inset 0 0 0 1.5px rgba(34,199,217,.35),
    inset 0 0 26px rgba(79,124,255,.22),
    0 0 34px rgba(79,124,255,.3);
  background-image:radial-gradient(circle at 32% 28%,rgba(248,250,252,.14),transparent 42%);
}
.lens-card .lc-canvas{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  width:100%;height:100%;display:block;
}

/* Equipment lens showcase grid */
.equip-lens-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;margin-top:24px;
}
.equip-lens-card{
  border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#0a1622 0%,#0f1d33 100%);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
}
.equip-lens-card .elc-label{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  padding:12px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,transparent 100%);
}
.equip-lens-card .elc-title{
  font-family:var(--t-display,'Barlow Condensed',sans-serif);
  font-size:18px;font-weight:700;color:#fff;letter-spacing:.01em;
}
.equip-lens-card .elc-meta{
  font-family:var(--t-mono,monospace);
  font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.1em;
  text-transform:uppercase;margin-top:2px;
}
.equip-lens-card .elc-visual{
  height:240px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.equip-lens-card .elc-visual .cctv-scope{
  width:180px;height:180px;border-radius:50%;
  border:2px solid rgba(79,124,255,.4);
  background:radial-gradient(circle at 35% 30%,rgba(79,124,255,.15),transparent 50%),
             radial-gradient(circle at 50% 50%,#0a1622,#050a14);
  position:relative;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8),0 0 20px rgba(79,124,255,.2);
}
.equip-lens-card .elc-visual .cctv-scope::before{
  content:"";position:absolute;inset:20%;border-radius:50%;
  border:1px dashed rgba(79,124,255,.2);
}
.equip-lens-card .elc-visual .cctv-scope::after{
  content:"";position:absolute;top:50%;left:50%;width:60px;height:1px;
  background:rgba(79,124,255,.3);transform:translate(-50%,-50%);
}
.equip-lens-card .elc-visual .cctv-crosshair{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;pointer-events:none;
}
.equip-lens-card .elc-visual .cctv-crosshair::before,
.equip-lens-card .elc-visual .cctv-crosshair::after{
  content:"";position:absolute;background:rgba(79,124,255,.15);
}
.equip-lens-card .elc-visual .cctv-crosshair::before{
  top:50%;left:0;right:0;height:1px;
}
.equip-lens-card .elc-visual .cctv-crosshair::after{
  left:50%;top:0;bottom:0;width:1px;
}
.equip-lens-card .elc-visual .cctv-readout{
  position:absolute;top:8px;left:8px;
  font-family:var(--t-mono,monospace);font-size:9px;
  color:rgba(79,124,255,.6);letter-spacing:.1em;
}
.equip-lens-card .elc-visual .cctv-readout-r{
  position:absolute;top:8px;right:8px;
  font-family:var(--t-mono,monospace);font-size:9px;
  color:rgba(255,107,107,.6);letter-spacing:.1em;
}
.equip-lens-card:hover .elc-visual .cctv-scope{
  border-color:rgba(79,124,255,.8);
  box-shadow:inset 0 0 30px rgba(0,0,0,.8),0 0 30px rgba(79,124,255,.4);
}

@media(max-width:640px){
  .equip-lens-grid{grid-template-columns:1fr}
}

/* 2026-09-09: real-photo mode — inner magnify visual hidden, outer photo shows clean */
.lens-card .lc-magnify .elc-visual{background:transparent !important;visibility:hidden}