/* ============================================================
   HERO · CHIPS
   Floating UI chips that hover around the laptop, tilt with the
   cursor and fade in on their own scroll stage. Positioned with
   --x/--y; the live parallax offset is written by js/ui/chips.js.
   ============================================================ */
#chips{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}

.chip{
  position:absolute;left:var(--x);top:var(--y);
  display:flex;align-items:center;gap:9px;
  background:rgba(8,18,58,.72);
  border:1px solid rgba(138,163,255,.30);
  border-radius:11px;padding:10px 14px;
  font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:#D6DEFF;white-space:nowrap;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transition:opacity .55s var(--ease);
  will-change:transform,opacity;
}
@supports (backdrop-filter:blur(10px)){
  .chip{backdrop-filter:blur(10px);background:rgba(8,18,58,.52)}
}
.chip.on{opacity:1}

.chip svg{width:15px;height:15px;flex:0 0 auto;color:var(--b300)}
.chip b{font-weight:500;color:#fff}

/* accent variants */
.chip.good{border-color:rgba(52,211,153,.38)}
.chip.good svg{color:#34D399}
.chip.warm{border-color:rgba(255,214,138,.34)}
.chip.warm svg{color:#FFD68A}

/* the little counter chip reads as a live metric */
.chip.metric{font-size:12px;letter-spacing:.04em;text-transform:none}
.chip.metric b{font-family:Archivo,sans-serif;font-weight:700;font-size:16px}

/* too cluttered on small screens — the 3D already carries the story */
@media(max-width:900px){ #chips{display:none} }
@media(prefers-reduced-motion:reduce){
  .chip{transition:none}
}