/* ============ SHARED MOTION LAYER — home, web-apps, social ============ */
body { overflow-x:hidden; }
#pagebar { position:fixed; top:0; left:0; height:2px; width:0; z-index:90;
  background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 12px rgba(0,187,255,.8); }
#rail { position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:80; display:flex; flex-direction:column; gap:22px; }
#rail a { display:flex; align-items:center; gap:10px; justify-content:flex-end; }
#rail .lbl { font-family:var(--disp); font-size:9px; letter-spacing:.24em; color:var(--dim); opacity:0; transform:translateX(6px); transition:opacity .3s,transform .3s,color .3s; }
#rail i { width:8px; height:8px; border:1px solid var(--dim); transform:rotate(45deg); transition:background .3s,border-color .3s,box-shadow .3s; }
#rail a.on .lbl { opacity:1; transform:none; color:var(--cyan); }
#rail a.on i { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px rgba(0,187,255,.9); }
#rail a:hover .lbl { opacity:1; transform:none; }
@media (max-width:920px){ #rail { display:none; } }

/* hero: side panel settles in from 3D, services line scrambles */
.hero-grid { perspective:1400px; }
.hero-side .settle { width:100%; }
.hero-services { min-height:1.6em; }
.hero-services .ghost { color:var(--cyan); }
.work-grid, .svc-grid, .steps, .mini-work, .ind-grid { perspective:1200px; }

/* scroll-scrubbed assembly (JS-gated: nothing hidden without JS or with reduced motion) */
@media (prefers-reduced-motion:no-preference) {
  .js .fly { opacity:0; will-change:transform,opacity; }
  .js .fly.flown { opacity:1; transform:none; will-change:auto; }
  .js .settle { opacity:0; transform:rotateY(-18deg) translateX(40px) scale(.94); transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .1s,opacity .8s ease .1s; }
  .js .settle.settled { opacity:1; transform:none; }
}

/* stats: count-up over a kinetic type strip */
.stats { position:relative; overflow:hidden; }
.stats .wrap { position:relative; z-index:2; }
.stats .kinetic { position:absolute; white-space:nowrap; font-family:var(--disp); font-weight:900;
  font-size:clamp(64px,9vw,120px); letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px rgba(0,187,255,.16);
  top:50%; left:0; transform:translateY(-50%); will-change:transform; user-select:none; pointer-events:none; }

/* cta: generative ribbons drawn live */
.cta { position:relative; overflow:hidden; }
.cta .wrap { position:relative; z-index:2; }
#ctaGen { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.static .stats .kinetic { display:none; }