/* Gbit Sight motion kit v1. Pure CSS, no libraries. Navy ground only.
   Honors reduced motion. Colors: heavy cyan #00D4FF, hairline white, navy #0A192F. */
:root{--gb-h:#00D4FF;--gb-l:#FFFFFF;--gb-navy:#0A192F;--gb-dim:#7F92AB;--gb-hair:#1C304E}

/* 1. SWITCH: ports light as devices are added. Toggle .on on a port; new ones get .pop */
.gb-switch .port{fill:none;stroke:#7F92AB;stroke-width:1;transition:fill .25s,stroke .25s}
.gb-switch .port.on{fill:var(--gb-h);stroke:var(--gb-h)}
.gb-switch .port.pop{animation:gb-pop .7s cubic-bezier(.2,.8,.2,1)}
@keyframes gb-pop{0%{fill:#fff;stroke:#fff;transform:scale(1.9)}35%{fill:#fff;stroke:#fff;transform:scale(1)}100%{fill:var(--gb-h);stroke:var(--gb-h);transform:scale(1)}}
.gb-switch .port{transform-box:fill-box;transform-origin:center}
.gb-switch .halo{fill:none;stroke:var(--gb-h);stroke-width:1;opacity:0}
.gb-switch .halo.run{animation:gb-halo .7s ease-out}
@keyframes gb-halo{0%{opacity:.9}100%{opacity:0;transform:scale(1.35)}}
.gb-switch .halo{transform-box:fill-box;transform-origin:center}

/* 2. LENS LOADER: the logo lens. Ring A turns one way, ring B the other, core breathes */
.gb-lens .a{transform-origin:32px 32px;animation:gb-spin 2.4s linear infinite}
.gb-lens .b{transform-origin:32px 32px;animation:gb-spin 1.6s linear infinite reverse}
.gb-lens .core{transform-origin:32px 32px;animation:gb-breathe 1.2s ease-in-out infinite}
@keyframes gb-spin{to{transform:rotate(360deg)}}
@keyframes gb-breathe{0%,100%{transform:scale(.8);opacity:.75}50%{transform:scale(1.15);opacity:1}}

/* 3. LOT-LINE PROGRESS: heavy cyan segment, hairline track, lens node rides the joint */
.gb-ll{position:relative;height:12px}
.gb-ll .trk{position:absolute;left:0;right:0;top:5.5px;height:1px;background:#1C304E}
.gb-ll .seg{position:absolute;left:0;top:4px;height:4px;width:var(--p,0%);background:var(--gb-h);transition:width .5s cubic-bezier(.3,.7,.2,1)}
.gb-ll .node{position:absolute;top:0;left:var(--p,0%);width:12px;height:12px;margin-left:-6px;border-radius:50%;border:2px solid var(--gb-h);background:var(--gb-navy);transition:left .5s cubic-bezier(.3,.7,.2,1)}
.gb-ll.indet .seg{width:30%;animation:gb-slide 1.5s ease-in-out infinite}
.gb-ll.indet .node{display:none}
@keyframes gb-slide{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}

/* 4. CABLE DRAW: a run is pulled across the map, lot ticks land at each end */
.gb-run path{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);animation:gb-draw 1.2s ease-out forwards}
@keyframes gb-draw{to{stroke-dashoffset:0}}

/* 5. SKELETON: flat navy blocks with one cyan sweep, for Jobs list and Pack sections */
.gb-skel{position:relative;overflow:hidden;background:#0D203A;border:1px solid #1C304E;border-radius:10px}
.gb-skel:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(0,212,255,.10) 50%,transparent 70%);transform:translateX(-100%);animation:gb-sweep 1.4s ease-in-out infinite}
@keyframes gb-sweep{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  .gb-lens .a,.gb-lens .b{animation:none}
  .gb-lens .core{animation:none}
  .gb-ll.indet .seg{animation:none;width:40%}
  .gb-skel:after{animation:none;opacity:0}
  .gb-run path{animation:none;stroke-dashoffset:0}
  .gb-switch .port.pop,.gb-switch .halo.run{animation:none}
}