/* =========================================================
   VBS Hero · Video-based interactive visual   (prefix: vbsv-)
   replaces <canvas id="vbsxCanvas">
   ========================================================= */
.vbsv-card{
  --vbsv-blue:#2f7bff;
  --vbsv-cyan:#5fd0ff;
  --vbsv-ink:#0d2f7a;
  --vbsv-ease:cubic-bezier(.22,.61,.36,1);
  position:relative;
}
.vbsv-stage{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;
  border-radius:24px;background:#07152e;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.45),
    0 40px 80px -36px rgba(16,60,160,.55),
    0 12px 28px -16px rgba(16,60,160,.35);
  cursor:crosshair;user-select:none;-webkit-user-select:none;
  transform:translateZ(0);
}
.vbsv-scene{
  position:absolute;inset:0;
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.045);
  transition:transform .8s var(--vbsv-ease);
  will-change:transform
}
.vbsv-video,.vbsv-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.vbsv-video{object-fit:cover;background:#07152e}
.vbsv-fx{pointer-events:none;mix-blend-mode:screen}

/* glass sheen + vignette */
.vbsv-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:4;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 22%),
    radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(4,14,36,.45) 100%);
}
.vbsv-vignette::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.45)
}
.vbsv-spot{
  position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(140,200,255,.18),transparent 65%);
  mix-blend-mode:screen
}
.vbsv-stage:hover .vbsv-spot{opacity:1}

/* glass cover over the video's info panel */
.vbsv-cover{
  position:absolute;left:66.5%;top:25.8%;width:16.5%;height:8.6%;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 10px;border-radius:8px;
  background:linear-gradient(160deg,rgba(20,50,100,.72),rgba(10,30,70,.62));
  border:1px solid rgba(140,215,255,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 18px -4px rgba(95,208,255,.5),inset 0 1px 0 rgba(255,255,255,.2);
  font-family:"IBM Plex Sans",system-ui,sans-serif;color:#eaf4ff
}
.vbsv-cover b{font-size:clamp(7px,.8vw,11px);letter-spacing:.18em;font-weight:700}
.vbsv-cover small{display:flex;align-items:center;gap:5px;font-size:clamp(6.5px,.65vw,9.5px);letter-spacing:.08em;color:#9fdcff}
.vbsv-cover small i{width:5px;height:5px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}
.vbsv-cover em{font-style:normal;font-variant-numeric:tabular-nums;color:#fff;font-weight:700}

/* ---------- top HUD ---------- */
.vbsv-top{
  position:absolute;left:14px;right:14px;top:12px;z-index:6;
  display:flex;align-items:center;gap:8px;pointer-events:none
}
.vbsv-chip{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;
  font:600 11px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.08em;color:#eaf4ff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)
}
.vbsv-live{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:vbsvLive 1.8s infinite}
.vbsv-stage.is-paused .vbsv-live{background:#fbbf24;animation:none}
@keyframes vbsvLive{70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.vbsv-tc{font-variant-numeric:tabular-nums;opacity:.85}
.vbsv-sp{flex:1}
.vbsv-steps{display:inline-flex;gap:5px;pointer-events:auto}
.vbsv-steps button{
  all:unset;box-sizing:border-box;cursor:pointer;width:22px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.3);transition:all .4s var(--vbsv-ease)
}
.vbsv-steps button:hover{background:rgba(255,255,255,.6)}
.vbsv-steps button.is-on{width:34px;background:linear-gradient(90deg,#5fd0ff,#2f7bff);box-shadow:0 0 10px rgba(95,208,255,.7)}
.vbsv-btn{
  all:unset;box-sizing:border-box;pointer-events:auto;cursor:pointer;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:all .3s
}
.vbsv-btn:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.vbsv-btn:focus-visible,.vbsv-steps button:focus-visible{outline:2px solid #5fd0ff;outline-offset:2px}

.vbsv-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:6;background:rgba(255,255,255,.12)}
.vbsv-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5fd0ff,#2f7bff);box-shadow:0 0 10px rgba(95,208,255,.8)}

/* ---------- phase layers ---------- */
.vbsv-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.vbsv-layer > *{opacity:0;transform:scale(.94);transition:opacity .55s var(--vbsv-ease),transform .6s var(--vbsv-ease);transition-delay:0s}
.vbsv-stage[data-phase="0"] .vbsv-layer[data-layer="0"] > *,
.vbsv-stage[data-phase="1"] .vbsv-layer[data-layer="1"] > *,
.vbsv-stage[data-phase="2"] .vbsv-layer[data-layer="2"] > *,
.vbsv-stage[data-phase="3"] .vbsv-layer[data-layer="3"] > *{
  opacity:1;transform:none;transition-delay:var(--d,0s)
}
.vbsv-pos{position:absolute;left:var(--x);top:var(--y);width:var(--w,auto);height:var(--h,auto)}

/* frames (phase 0) */
.vbsv-frame{
  pointer-events:auto;cursor:pointer;border-radius:8px;
  --c:rgba(140,215,255,.95);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/12px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/2px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/12px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/2px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/12px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/2px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/12px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/2px 12px no-repeat,
    rgba(95,208,255,.06);
  box-shadow:inset 0 0 0 1px rgba(140,215,255,.28);
  overflow:hidden
}
.vbsv-frame::after{
  content:"";position:absolute;left:0;right:0;height:30%;top:-30%;
  background:linear-gradient(180deg,transparent,rgba(140,215,255,.35),transparent);
  animation:vbsvScan 2.6s linear infinite;animation-delay:var(--d,0s)
}
@keyframes vbsvScan{to{top:100%}}
.vbsv-frame:hover,.vbsv-frame.is-hit{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9),0 0 24px rgba(95,208,255,.6);background-color:rgba(95,208,255,.14)}
.vbsv-flabel{
  position:absolute;left:var(--x);top:calc(var(--y) - 22px);
  display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:5px;white-space:nowrap;
  font:700 9.5px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.06em;color:#06203f;
  background:rgba(220,242,255,.92);box-shadow:0 4px 12px -4px rgba(95,208,255,.8)
}
.vbsv-flabel b{color:#1552d6}
.vbsv-flabel.below{top:calc(var(--y) + var(--h) + 4px)}

/* tags & detections (phase 1) */
.vbsv-det{
  border:1.5px solid #4ade80;border-radius:4px;box-shadow:0 0 12px rgba(74,222,128,.55)
}
.vbsv-det span{
  position:absolute;left:-1.5px;top:-17px;padding:2px 5px;border-radius:3px 3px 3px 0;white-space:nowrap;
  font:700 9.5px/1.2 "IBM Plex Sans",system-ui,sans-serif;color:#052e16;background:#4ade80
}
.vbsv-det.blue{border-color:#5fd0ff;box-shadow:0 0 12px rgba(95,208,255,.6)}
.vbsv-det.blue span{background:#5fd0ff;color:#04203f}
.vbsv-tag{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;white-space:nowrap;
  font:600 10.5px/1.2 "IBM Plex Sans",system-ui,sans-serif;color:#eaf4ff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 10px 24px -12px rgba(0,20,60,.8),inset 0 1px 0 rgba(255,255,255,.3)
}
.vbsv-tag i{color:#5fd0ff;font-size:10px}
.vbsv-tag em{font-style:normal;color:#9fdcff;font-variant-numeric:tabular-nums}
.vbsv-tag.lg{padding:8px 12px;font-size:11.5px;background:rgba(10,30,70,.55)}

/* HUD (phase 2) */
.vbsv-hud{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;transform:translate(-50%,-50%) scale(.9)!important
}
.vbsv-stage[data-phase="2"] .vbsv-hud{transform:translate(-50%,-50%) scale(1)!important}
.vbsv-hud svg{width:100%;height:100%;overflow:visible}
.vbsv-hud .r1{fill:none;stroke:rgba(140,215,255,.55);stroke-width:1;stroke-dasharray:2 6;transform-origin:50% 50%;animation:vbsvSpin 18s linear infinite}
.vbsv-hud .r2{fill:none;stroke:rgba(140,215,255,.25);stroke-width:6;stroke-dasharray:1 5;transform-origin:50% 50%;animation:vbsvSpin 30s linear infinite reverse}
.vbsv-hud .trk{fill:none;stroke:rgba(255,255,255,.14);stroke-width:4;stroke-linecap:round}
.vbsv-hud .val{fill:none;stroke:url(#vbsvGauge);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset 1s var(--vbsv-ease);filter:drop-shadow(0 0 6px rgba(95,208,255,.9))}
@keyframes vbsvSpin{to{transform:rotate(360deg)}}
.vbsv-meter{min-width:128px}
.vbsv-meter .bar{display:block;height:3px;margin-top:5px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.vbsv-meter .bar i{display:block;height:100%;width:var(--p,50%);background:linear-gradient(90deg,#5fd0ff,#2f7bff);transition:width .9s var(--vbsv-ease)}
.vbsv-meter{flex-direction:column;align-items:stretch}

/* fusion (phase 3) */
.vbsv-proto{
  position:absolute;left:0;top:0;padding:4px 8px;border-radius:999px;white-space:nowrap;
  font:700 10px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.06em;color:#04203f;
  background:linear-gradient(160deg,#e8f6ff,#9fdcff);box-shadow:0 0 14px rgba(95,208,255,.8);
  transform:translate(-50%,-50%);will-change:left,top
}
.vbsv-stage[data-phase="3"] .vbsv-layer[data-layer="3"] > .vbsv-proto{transform:translate(-50%,-50%)}
.vbsv-pulse{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;margin-left:calc(var(--w) / -2);margin-top:calc(var(--w) / -2);
  border-radius:50%;border:2px solid rgba(140,215,255,.9);
}
.vbsv-stage[data-phase="3"] .vbsv-pulse{animation:vbsvPulse 2s var(--vbsv-ease) infinite;animation-delay:var(--d,0s)}
@keyframes vbsvPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* click ripple */
.vbsv-ripple{
  position:absolute;z-index:5;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(190,235,255,.95);box-shadow:0 0 20px rgba(95,208,255,.9);
  animation:vbsvRipple .9s var(--vbsv-ease) forwards
}
@keyframes vbsvRipple{to{transform:scale(8);opacity:0}}

/* badge text transition (existing .vbsx-visual-badge) */
.vbsv-card .vbsx-visual-badge strong,.vbsv-card .vbsx-visual-badge .vbsx-badge-label{transition:opacity .3s,filter .3s}
.vbsv-card .vbsx-visual-badge.is-swap strong,.vbsv-card .vbsx-visual-badge.is-swap .vbsx-badge-label{opacity:0;filter:blur(3px)}

@media (max-width:640px){
  .vbsv-stage{border-radius:18px}
  .vbsv-tag,.vbsv-flabel,.vbsv-det span{font-size:8.5px}
  .vbsv-tag{padding:4px 7px}
  .vbsv-meter{min-width:0}
  .vbsv-hide-sm{display:none!important}
  .vbsv-tc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vbsv-card *{animation:none!important;transition:none!important}
}