/* 07 / How we get there — 3D production line; the product changes as it moves */
.pl{position:relative;height:170px;margin:-6px 0 30px}
.pl-stage{position:absolute;left:0;right:0;bottom:0;height:170px;perspective:900px;perspective-origin:50% 0%}
.pl-belt{position:absolute;left:0;right:0;bottom:22px;height:60px;transform:rotateX(62deg);transform-origin:50% 100%;transform-style:preserve-3d;border-radius:30px;
  background:repeating-linear-gradient(90deg,rgba(203,208,255,.16) 0 2px,transparent 2px 26px),linear-gradient(#1d2160,#262a7a);
  border:1px solid rgba(203,208,255,.35);box-shadow:0 0 0 6px rgba(203,208,255,.05);animation:pl-move 1.3s linear infinite}
@keyframes pl-move{to{background-position:26px 0,0 0}}
.pl-box{position:absolute;left:0;top:50%;width:34px;height:34px;margin-top:-17px;transform-style:preserve-3d}
/* generic cube faces (size from the wrapper) */
.pl-box .f{position:absolute;inset:0}
.pl-box .t{transform:translateZ(var(--h))}
.pl-box .fr{transform:rotateX(-90deg);transform-origin:50% 100%}
.pl-box .bk{transform:rotateX(90deg);transform-origin:50% 0}
.pl-box .l{transform:rotateY(-90deg);transform-origin:0 50%}
.pl-box .r{transform:rotateY(90deg);transform-origin:100% 50%}
.pl-box .fr,.pl-box .bk{height:var(--h);top:auto}
.pl-box .fr{bottom:0;top:auto}.pl-box .bk{top:0;height:var(--h)}
.pl-box .l,.pl-box .r{width:var(--h)}.pl-box .r{left:auto;right:0}
/* the product inside — every property follows a 0→1 variable, so each change morphs smoothly */
.pl-box{--a:0;--b:0;--c:0;--d:0;--e:0}
.pl-prod{position:absolute;left:7px;top:7px;width:20px;height:20px;--h:20px;transform-style:preserve-3d;
  transform:scale(calc(.8 + .2 * var(--b)))}
.pl-prod .f{border-radius:calc((1 - var(--a)) * 50%);border:1px solid rgba(203,208,255,calc(.55 + .35 * var(--a)));
  background:rgba(91,95,224,calc(.08 + var(--b) * .87))}
.pl-prod .t{background:rgba(139,144,255,calc(var(--b) * .95))}
/* the packing drops down over the product */
.pl-pack{position:absolute;inset:0;--h:34px;transform-style:preserve-3d;opacity:min(1,calc(var(--c) * 3));
  transform:translateZ(calc((1 - var(--c)) * 70px + var(--e) * 10px))}
.pl-pack .f{background:rgba(203,208,255,.22);border:1px solid rgba(203,208,255,.85)}
.pl-pack .t{background:rgba(203,208,255,.3)}
.pl-pack .fr{background:rgba(203,208,255,.26)}.pl-pack .l,.pl-pack .r{background:rgba(203,208,255,.16)}
.pl-pack .ai-top{position:absolute;inset:0;display:grid;place-items:center;font:700 10px/1 'Poppins',Arial,sans-serif;color:#fff;transform:translateZ(34.5px)}
/* branding wraps on: a blue band grows across the front, the top turns blue, the mark fades in */
.pl-pack .brand-band{position:absolute;left:0;right:0;bottom:0;height:34px;background:#2a2d9f;transform-origin:0 100%;transform:rotateX(-90deg) translateZ(.5px) scaleX(var(--d))}
.pl-pack .brand{position:absolute;left:0;right:0;bottom:0;height:34px;display:grid;place-items:center;font:700 14px/1 'Poppins',Arial,sans-serif;font-style:normal;color:#fff;
  transform-origin:50% 100%;transform:rotateX(-90deg) translateZ(.7px);opacity:var(--d);z-index:1}
/* off to the client: lift and glow grow gradually */
.pl-pack .f{box-shadow:0 0 calc(var(--e) * 14px) rgba(139,144,255,calc(var(--e) * .75))}

/* a small caption that travels with the product, always facing you */
.pl-tag{position:absolute;left:50%;top:50%;transform:rotateX(-62deg) translate(-50%,-72px);transform-origin:0 0;white-space:nowrap}
.pl-tag span{display:inline-block;padding:5px 9px;border-radius:999px;font:500 9.5px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:#cbd0ff;background:rgba(203,208,255,.08);border:1px solid rgba(203,208,255,.25)}
.pl-box[data-l="5"] .pl-tag span{color:#fff;background:#2a2d9f;border-color:#8b90ff}
.pl-tag span{transition:background .6s ease,color .6s ease,border-color .6s ease}
@media(max-width:1100px){.pl{display:none}}
@media(prefers-reduced-motion:reduce){.pl-belt{animation:none}}

/* v2: a gem stands on the belt, facing you; each stage changes it smoothly (vars --a … --e) */
.pl-gemb .pl-gem{position:absolute;left:50%;top:50%;width:46px;height:50px;transform-origin:0 0;transform:rotateX(-62deg) translate(-50%,-100%)}
.pl-gem svg{width:100%;height:100%;overflow:visible}
.pl-gem .g-body{fill:rgba(203,208,255,calc(.14 + var(--b) * .2 + var(--e) * .45));stroke:#fff;stroke-width:1.5;stroke-linejoin:round;
  filter:drop-shadow(0 0 calc(var(--e) * 8px) rgba(203,208,255,.9))}
.pl-gem .g-mark{fill:none;stroke:#cbd0ff;stroke-width:1.1;stroke-dasharray:3 3;opacity:calc(var(--a) * (1 - var(--b)))}
.pl-gem .g-fac{fill:none;stroke:#fff;stroke-width:1;stroke-linejoin:round;opacity:calc(var(--c) * .85)}
.pl-gem .g-set{fill:none;stroke:#cbd0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:var(--d)}
.pl-gem .g-glint{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:var(--e);animation:pl-glint 1.6s ease-in-out infinite}
@keyframes pl-glint{50%{opacity:calc(var(--e) * .35)}}
.pl-gemb .pl-tag{transform:rotateX(-62deg) translate(-50%,-92px)}

/* v2 thread story: each picture fades into the next as the piece passes each stage */
.pl-thr svg *{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pl-thr .t1{opacity:calc(1 - var(--a))}
.pl-thr .t2{opacity:calc(var(--a) * (1 - var(--b)))}
.pl-thr .t3{opacity:calc(var(--b) * (1 - var(--c)))}
.pl-thr .t3 .st,.pl-thr .t6 .st{stroke-dasharray:3 3}
.pl-thr .t4{opacity:calc(var(--c) * (1 - var(--d)))}
.pl-thr .t4 .wv{stroke:#cbd0ff;stroke-width:1}
.pl-thr .t5{opacity:var(--d)}
.pl-thr .t5 .shirt{fill:rgba(203,208,255,calc(.12 + var(--e) * .3));filter:drop-shadow(0 0 calc(var(--e) * 7px) rgba(203,208,255,.85))}
.pl-thr .t6{opacity:var(--e)}

/* more detail: once the shape is set, four parts are added onto it one by one before it is packed */
.pl-els{position:absolute;inset:2px;display:grid;grid-template-columns:1fr 1fr;gap:2px;transform:translateZ(calc(20px + .6px));pointer-events:none}
.pl-els i{border-radius:1.5px;background:#fff;opacity:0;transform:scale(.3);transition:none}
.pl-els i:nth-child(1){opacity:clamp(0,calc(var(--b) * 4 - 0),1);transform:scale(clamp(.3,calc(var(--b) * 4),1))}
.pl-els i:nth-child(2){opacity:clamp(0,calc(var(--b) * 4 - 1),1);transform:scale(clamp(.3,calc(var(--b) * 4 - 1),1))}
.pl-els i:nth-child(3){opacity:clamp(0,calc(var(--b) * 4 - 2),1);transform:scale(clamp(.3,calc(var(--b) * 4 - 2),1))}
.pl-els i:nth-child(4){opacity:clamp(0,calc(var(--b) * 4 - 3),1);transform:scale(clamp(.3,calc(var(--b) * 4 - 3),1))}
.pl-els i{background:rgba(255,255,255,.9);box-shadow:0 0 4px rgba(203,208,255,.8)}

/* ---- six steps, one visible change each (v2 + main) ---- */
.pl-box{--g:0}
/* Understand: a scan ring sweeps around the idea, then fades */
.pl-scan{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;border:1px dashed rgba(203,208,255,.8);
  opacity:calc(1 - var(--a));animation:pl-scan 2.4s linear infinite;pointer-events:none}
@keyframes pl-scan{to{transform:rotate(360deg)}}
/* Connect: four links reach out across the belt to small nodes */
.pl-links{position:absolute;left:50%;top:50%;width:0;height:0;opacity:calc(var(--c) * (1 - var(--d)))}
.pl-links i{position:absolute;left:0;top:-.5px;width:34px;height:1px;background:linear-gradient(90deg,rgba(203,208,255,.9),#fff);transform-origin:0 50%}
.pl-links i::after{content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:#fff}
.pl-links i:nth-child(1){transform:rotate(-35deg) scaleX(var(--c))}
.pl-links i:nth-child(2){transform:rotate(35deg) scaleX(var(--c))}
.pl-links i:nth-child(3){transform:rotate(145deg) scaleX(var(--c))}
.pl-links i:nth-child(4){transform:rotate(215deg) scaleX(var(--c))}
/* Adopt: packing drops on (was Connect), then the ✓ band wraps */
.pl-pack{opacity:min(1,calc(var(--d) * 3));transform:translateZ(calc((1 - var(--d)) * 70px + var(--e) * 10px))}
.pl-pack .brand-band{transform:rotateX(-90deg) translateZ(.5px) scaleX(var(--g))}
.pl-pack .brand{opacity:var(--g)}
/* Improve: three outcome bars rise beside it, facing you */
.pl-meter{position:absolute;left:50%;top:50%;display:flex;align-items:flex-end;gap:3px;height:22px;transform-origin:0 0;
  transform:rotateX(-62deg) translate(26px,-44px);opacity:var(--e)}
.pl-meter i{width:5px;border-radius:1.5px 1.5px 0 0;background:#fff}
.pl-meter i:nth-child(1){height:calc(6px + var(--e) * 4px)}
.pl-meter i:nth-child(2){height:calc(8px + var(--e) * 8px)}
.pl-meter i:nth-child(3){height:calc(10px + var(--e) * 12px)}