/* The process, in real CSS 3D: a floor plane tilted away from the viewer, and
   objects standing on it. One 8-second cycle drives everything - the packet,
   the stations lighting in turn, the block dropping - so it all stays in step. */
.process{padding:100px 0 60px;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(60% 50% at 50% 60%,rgba(61,123,255,.10),transparent 70%),var(--bg)}
.scene{position:relative;height:560px;perspective:1500px;perspective-origin:50% 20%;margin-top:-10px}
.world{position:absolute;left:50%;top:52%;width:1100px;height:380px;margin:-190px 0 0 -550px;
  transform-style:preserve-3d;transform:translate(var(--dx,0),var(--dy,0)) scale(var(--k,1)) rotateX(62deg) rotateZ(-22deg)}
/* 3D only where geometry needs it; every extra 3D layer costs the GPU */
.ptrack,.rail,.st,.up,.tphone,.blocks,.cube,.gate{transform-style:preserve-3d}

/* floor: a glowing grid that fades at the edges */
.floor{position:absolute;inset:-160px -120px;border-radius:50%;
  background-image:linear-gradient(rgba(156,195,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(156,195,255,.16) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}

/* the track and the packet riding it */
.ptrack{position:absolute;left:10%;right:12%;top:50%;height:4px;margin-top:-2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(156,195,255,.5),rgba(234,179,0,.9) 70%,rgba(31,203,155,.8));
  box-shadow:0 0 18px rgba(234,179,0,.5)}
/* the packet rides a full-width rail that slides by transform, never by left:
   a moving left re-lays-out the page every frame */
.rail{position:absolute;inset:0;animation:ride 8s linear infinite}
.rail.r2{animation-delay:-4s;opacity:.5}
.packet{position:absolute;left:0;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:radial-gradient(circle,#fff,var(--gold2) 35%,rgba(234,179,0,0) 70%);transform:translateZ(14px)}
@keyframes ride{0%{transform:translateX(0);opacity:0}5%{opacity:1}75%{transform:translateX(100%);opacity:1}80%,100%{transform:translateX(100%);opacity:0}}

/* stations */
.st{position:absolute;top:50%;width:0;height:0}
.st1{left:10%}.st2{left:36%}.st3{left:62%}.st4{left:88%}
.pad{position:absolute;left:-85px;top:-85px;width:170px;height:170px;border-radius:50%;
  border:1px solid rgba(156,195,255,.35);
  background:radial-gradient(circle,rgba(61,123,255,.25),rgba(61,123,255,.04) 60%,transparent 70%);
  box-shadow:0 0 0 14px rgba(156,195,255,.04),0 0 0 15px rgba(156,195,255,.18);
}
.pad::after{content:"";position:absolute;inset:-2px;border-radius:50%;opacity:0;
  border:1px solid rgba(234,179,0,.95);
  background:radial-gradient(circle,rgba(234,179,0,.45),rgba(234,179,0,.08) 60%,transparent 70%);
  box-shadow:0 0 0 15px rgba(234,179,0,.10),0 0 80px rgba(234,179,0,.55);
  animation:lit 8s infinite}
.st2 .pad::after{animation-delay:2s}.st3 .pad::after{animation-delay:4s}.st4 .pad::after{animation-delay:6s}
@keyframes lit{0%,22%{opacity:1}30%,100%{opacity:0}}

/* anything standing up: rotate about its bottom edge, then sit on the point */
.up{position:absolute;left:0;top:0;transform-origin:50% 100%;transform:translate(-50%,-100%) rotateX(-90deg)}

/* 1 - a modern phone with real thickness: metal frame, one-piece screen,
   camera island, home bar. 118 x 244 x 12. The sides and top are inset by
   the corner radius so the rounded corners do not show square edges. */
.tphone{position:relative;width:118px;height:244px;animation:hover 4s ease-in-out infinite}
.tphone .f{position:absolute;display:block}
.tphone .front{inset:0;transform:translateZ(6px);border-radius:26px;padding:5px;
  background:linear-gradient(145deg,#4a5363 0%,#1a1f28 32%,#0d1016 58%,#363d4a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 40px rgba(61,123,255,.35)}
.tphone .scr{position:relative;display:flex;flex-direction:column;height:100%;border-radius:21px;overflow:hidden;padding:0 8px;
  background:radial-gradient(120% 60% at 50% 0%,#16243f,#070B14 62%)}
.tphone .sb{display:flex;align-items:center;justify-content:space-between;height:22px;padding:2px 4px 0}
.tphone .sb em{font:600 7px/1 var(--body);font-style:normal;color:var(--text);letter-spacing:.02em}
.tphone .isl{width:34px;height:10px;border-radius:6px;background:#000}
.tphone .thumb{display:block;height:74px;margin-top:6px;border-radius:9px;
  background:#0D2638 url('/app/assets/ai-vs-original.webp') 100% 20%/200% auto no-repeat}
.tphone b{display:block;margin-top:9px;font:600 9px/1 var(--mono);color:var(--text)}
.tphone .tag{display:block;margin-top:6px;font:600 7.5px/1 var(--mono);font-style:normal;letter-spacing:.12em;color:var(--seal)}
.tphone .hb{position:absolute;left:50%;bottom:6px;width:36px;height:3px;margin-left:-18px;border-radius:2px;background:rgba(255,255,255,.55)}
/* a shutter flash when its station lights up */
.tphone .scr::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:shutter 8s infinite}
@keyframes shutter{0%{opacity:0}2%{opacity:.85}9%,100%{opacity:0}}
.tphone .back{inset:0;transform:rotateY(180deg) translateZ(6px);border-radius:26px;
  background:linear-gradient(160deg,#2c333f,#11151c)}
.tphone .side{top:22px;bottom:22px;width:12px;left:53px;
  background:linear-gradient(180deg,#59637a,#262c37 40%,#3c4454)}
.tphone .side.l{transform:rotateY(-90deg) translateZ(59px)}
.tphone .side.r{transform:rotateY(90deg) translateZ(59px)}
.tphone .cap{left:22px;right:22px;height:12px;top:116px;background:linear-gradient(90deg,#3c4454,#6a7590,#3c4454);
  transform:rotateX(90deg) translateZ(122px)}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* 2 - the scanning gate */
.gate{position:relative;width:170px;height:200px;border-radius:26px;
  border:2px solid rgba(156,195,255,.7);
  box-shadow:0 0 30px rgba(61,123,255,.6),0 0 30px rgba(61,123,255,.4) inset;
  background:linear-gradient(180deg,rgba(61,123,255,.12),rgba(61,123,255,.02))}
.gate::before{content:"";position:absolute;inset:-14px;border-radius:34px;border:1px solid rgba(156,195,255,.25);transform:translateZ(-18px)}
.gate::after{content:"";position:absolute;inset:-28px;border-radius:42px;border:1px dashed rgba(234,179,0,.35);transform:translateZ(-36px)}
.beam{position:absolute;left:8px;right:8px;top:10px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);box-shadow:0 0 16px var(--gold);
  animation:scan 1.6s ease-in-out infinite alternate}
@keyframes scan{to{transform:translateY(174px)}}
.hash{position:absolute;inset:34px 14px;display:grid;align-content:center;gap:9px;transform:translateZ(10px)}
.hash span{font:600 15px/1 var(--mono);letter-spacing:.06em;color:var(--gold2);text-align:center;
  text-shadow:0 0 12px rgba(234,179,0,.8);opacity:.25;animation:hashin 8s infinite}
.hash span:nth-child(2){animation-delay:.25s}.hash span:nth-child(3){animation-delay:.5s}.hash span:nth-child(4){animation-delay:.75s}
.st2 .hash span{animation-name:hashin}
@keyframes hashin{0%,24%{opacity:.25}27%,50%{opacity:1}60%,100%{opacity:.25}}

/* 3 - blocks on a chain, lying on the floor and rising out of it */
.blocks{position:absolute;left:-150px;top:-35px;width:300px;height:70px}
.cube{position:absolute;top:0;width:70px;height:70px}
.c1{left:0}.c2{left:115px}.c3{left:230px}
.cube i{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(61,123,255,.35),rgba(12,19,34,.9));border:1px solid rgba(156,195,255,.6)}
.cube .t{transform:translateZ(70px);background:linear-gradient(160deg,rgba(156,195,255,.45),rgba(61,123,255,.25))}
.cube .fr{transform-origin:50% 100%;transform:rotateX(-90deg)}
.cube .bk{transform-origin:50% 0;transform:rotateX(90deg)}
.cube .rt{transform-origin:100% 50%;transform:rotateY(90deg)}
.cube .lf{transform-origin:0 50%;transform:rotateY(-90deg)}
.cube.new i{background:linear-gradient(160deg,rgba(255,213,74,.75),rgba(234,179,0,.35));border-color:var(--gold2);
  box-shadow:0 0 24px rgba(234,179,0,.6)}
.cube.new .fr img{width:38px;height:38px;transform:none}
/* the drop moves by transform only. Fading the cube itself would flatten it -
   any opacity below 1 squashes a 3D group into a plane - so the faces fade. */
.cube.new{animation:drop 8s infinite}
.cube.new i{animation:faces 8s infinite}
@keyframes drop{0%,44%{transform:translateZ(190px)}56%{transform:translateZ(0)}58%{transform:translateZ(8px)}60%,100%{transform:translateZ(0)}}
@keyframes faces{0%,44%{opacity:0}50%,94%{opacity:1}100%{opacity:0}}
/* the links between blocks */
.blocks::before{content:"";position:absolute;left:35px;right:35px;top:33px;height:4px;transform:translateZ(35px);
  background:repeating-linear-gradient(90deg,var(--ice) 0 10px,transparent 10px 16px);opacity:.7}

/* 4 - the seal, standing in a column of light */
.sealwrap{position:relative;width:170px;height:200px;display:grid;place-items:end center;animation:hover 5s ease-in-out infinite}
.sealwrap::before{content:"";position:absolute;left:10%;right:10%;bottom:0;height:120%;
  background:linear-gradient(0deg,rgba(31,203,155,.35),transparent);clip-path:polygon(20% 100%,80% 100%,100% 0,0 0);opacity:.6}
.sealwrap img{position:relative;width:150px;height:150px;filter:drop-shadow(0 0 30px rgba(234,179,0,.55))}
.okmark{position:absolute;right:6px;bottom:6px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font:700 22px/1 var(--body);color:#03140e;background:var(--seal);box-shadow:0 0 24px rgba(31,203,155,.8);
  animation:okpop 8s infinite}
@keyframes okpop{0%,74%{transform:scale(.4);opacity:0}80%,96%{transform:scale(1);opacity:1}100%{opacity:0}}

/* legend under the scene, lit in step with the stations */
.legend{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:x}
.legend li{position:relative;padding:20px;border-radius:16px;border:1px solid var(--line);background:rgba(12,19,34,.7)}
.legend li::after{content:"";position:absolute;inset:-1px;border-radius:16px;pointer-events:none;opacity:0;
  border:1px solid rgba(234,179,0,.6);box-shadow:0 0 40px -10px rgba(234,179,0,.5);animation:lit 8s infinite}
.legend .lg2::after{animation-delay:2s}.legend .lg3::after{animation-delay:4s}.legend .lg4::after{animation-delay:6s}
.legend .k{font:700 12px/1 var(--mono);color:var(--gold);letter-spacing:.12em}
.legend b{display:block;margin:12px 0 6px;font:600 18px/1.2 var(--display)}
.legend p{font-size:14px}
@media (max-width:800px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.legend{gap:10px}.legend li{padding:14px}.legend b{font-size:16px;margin:8px 0 4px}.legend p{font-size:13px}}
@media (prefers-reduced-motion:reduce){.rail{display:none}.tphone,.sealwrap,.beam,.cube.new{animation:none}}
/* the section heading, sized up to match the scene */
.process .shead{max-width:1060px}
.process h2{font-size:clamp(40px,6.6vw,88px);line-height:1.02;text-wrap:balance}
.process .shead .lead{font-size:clamp(18px,1.9vw,23px)}

/* on a phone the scene zooms in and the camera follows the active station */
.scene.follow .world{transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.scene.measuring .world{transition:none}