/* A conceptual exploded fixation assembly: physical precision becomes a knowledge system. */
.fixation-object{position:absolute;right:10%;top:15%;width:min(36vw,550px);height:min(63vh,650px);perspective:1100px;transform-style:preserve-3d;z-index:2}
.device-plate{position:absolute;left:52%;top:12%;width:86px;height:76%;border:1px solid rgba(255,255,255,.45);border-radius:44px 34px 38px 36px;background:linear-gradient(100deg,#111 0%,#756f69 42%,#242321 72%,#b7afa8 100%);box-shadow:18px 22px 38px rgba(0,0,0,.38),inset 3px 0 5px rgba(255,255,255,.42),inset -8px 0 12px rgba(0,0,0,.55);transform:rotateY(-29deg) rotateZ(9deg);transition:transform .85s cubic-bezier(.2,.75,.2,1),filter .7s ease}
.device-plate:before{content:'';position:absolute;inset:12px 18px;border-radius:38px;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(255,255,255,.16),rgba(0,0,0,.5))}.device-plate i{position:absolute;z-index:1;left:24px;width:34px;height:20px;border-radius:50%;background:#141414;box-shadow:inset 3px 2px 4px rgba(255,255,255,.22),0 1px 1px rgba(255,255,255,.3)}.device-plate i:nth-child(1){top:12%}.device-plate i:nth-child(2){top:29%}.device-plate i:nth-child(3){top:46%}.device-plate i:nth-child(4){top:63%}.device-plate i:nth-child(5){top:80%}
.screw{position:absolute;z-index:3;width:205px;height:29px;transform-origin:right center;filter:drop-shadow(10px 10px 10px rgba(0,0,0,.42));transition:transform .85s cubic-bezier(.2,.75,.2,1),opacity .5s ease}.screw:before{content:'';position:absolute;right:-10px;top:9px;width:27px;height:11px;background:linear-gradient(90deg,#b3aaa4,#413d3a 60%,#cfc6bd);clip-path:polygon(0 0,100% 50%,0 100%)}.screw b{display:block;width:100%;height:100%;border-radius:15px 4px 4px 15px;background:repeating-linear-gradient(106deg,#77716d 0 5px,#dfd7cf 6px 9px,#4a4642 10px 14px);box-shadow:inset 0 5px 5px rgba(255,255,255,.35),inset 0 -7px 7px rgba(0,0,0,.4)}.screw-a{left:2%;top:17%;transform:translate3d(-90px,-82px,-240px) rotate(-29deg)}.screw-b{left:4%;top:32%;transform:translate3d(-120px,-34px,-130px) rotate(-15deg)}.screw-c{left:1%;top:48%;transform:translate3d(-110px,10px,-200px) rotate(7deg)}.screw-d{left:7%;top:65%;transform:translate3d(-100px,60px,-150px) rotate(19deg)}.screw-e{left:12%;top:78%;transform:translate3d(-80px,105px,-250px) rotate(29deg)}
.knowledge-path{position:absolute;z-index:1;width:35%;height:28%;border:1px solid rgba(104,225,226,.0);border-left:2px solid rgba(104,225,226,.0);border-bottom:2px solid rgba(104,225,226,.0);transition:all .8s cubic-bezier(.2,.75,.2,1)}.path-a{left:10%;top:18%;transform:translateZ(-300px) rotate(14deg)}.path-b{left:26%;top:40%;transform:translateZ(-380px) rotate(-8deg)}.path-c{left:14%;top:60%;transform:translateZ(-480px) rotate(18deg)}
.device-label{position:absolute;z-index:5;padding:9px 11px;background:rgba(22,22,21,.9);border:1px solid rgba(255,255,255,.17);color:#ddd7ce;font:500 clamp(8px,.75vw,11px)/1.35 var(--mono);letter-spacing:.05em;opacity:0;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.75,.2,1)}.label-a{right:-4%;top:18%;transform:translateY(-14px)}.label-b{left:4%;bottom:26%;transform:translateY(14px)}.label-c{right:3%;bottom:6%;transform:translateY(14px)}
.system[data-step="1"] .device-plate{transform:translateX(-3%) rotateY(-19deg) rotateZ(4deg)}.system[data-step="1"] .screw-a{transform:translate3d(10px,0,-45px) rotate(-9deg)}.system[data-step="1"] .screw-b{transform:translate3d(20px,0,-35px) rotate(-5deg)}.system[data-step="1"] .screw-c{transform:translate3d(12px,0,-35px) rotate(4deg)}.system[data-step="1"] .screw-d{transform:translate3d(22px,0,-35px) rotate(8deg)}.system[data-step="1"] .screw-e{transform:translate3d(28px,0,-50px) rotate(13deg)}
.system[data-step="2"] .device-plate{filter:hue-rotate(150deg) saturate(1.25);transform:translateX(-3%) rotateY(-8deg) rotateZ(0)}.system[data-step="2"] .screw{opacity:.76}.system[data-step="2"] .screw-a{transform:translate3d(35px,0,40px) rotate(0deg)}.system[data-step="2"] .screw-b{transform:translate3d(35px,0,20px) rotate(0deg)}.system[data-step="2"] .screw-c{transform:translate3d(35px,0,10px) rotate(0deg)}.system[data-step="2"] .screw-d{transform:translate3d(35px,0,15px) rotate(0deg)}.system[data-step="2"] .screw-e{transform:translate3d(35px,0,25px) rotate(0deg)}.system[data-step="2"] .knowledge-path{border-color:rgba(104,225,226,.45);border-left-color:#63d6d5;border-bottom-color:#63d6d5}.system[data-step="2"] .path-a{transform:translateZ(-70px) rotate(14deg)}.system[data-step="2"] .path-b{transform:translateZ(-130px) rotate(-8deg)}.system[data-step="2"] .path-c{transform:translateZ(-190px) rotate(18deg)}
.system[data-step="3"] .device-plate{filter:hue-rotate(150deg) saturate(1.3) brightness(1.15);transform:translateX(-3%) rotateY(0) rotateZ(0)}.system[data-step="3"] .screw{opacity:.34}.system[data-step="3"] .screw-a{transform:translate3d(-100px,-50px,-120px) rotate(-20deg)}.system[data-step="3"] .screw-b{transform:translate3d(-75px,-20px,-80px) rotate(-10deg)}.system[data-step="3"] .screw-c{transform:translate3d(-90px,12px,-80px) rotate(6deg)}.system[data-step="3"] .screw-d{transform:translate3d(-70px,52px,-60px) rotate(15deg)}.system[data-step="3"] .screw-e{transform:translate3d(-58px,90px,-110px) rotate(24deg)}.system[data-step="3"] .knowledge-path{border-color:rgba(104,225,226,.65);border-left-color:#79efee;border-bottom-color:#79efee}.system[data-step="3"] .path-a{transform:translateZ(40px) rotate(14deg)}.system[data-step="3"] .path-b{transform:translateZ(-10px) rotate(-8deg)}.system[data-step="3"] .path-c{transform:translateZ(-60px) rotate(18deg)}.system[data-step="3"] .device-label{opacity:1;transform:translateY(0)}
@media(max-width:760px){.fixation-object{width:83vw;height:44vh;right:-17%;top:auto;bottom:9%;transform:scale(.9);transform-origin:bottom right}.device-label{display:none}}