.scene-track{position:absolute;inset:0 0 0 47%;z-index:-1;pointer-events:none}.scene{position:sticky;top:100px;height:calc(100svh - 120px);max-height:850px;min-height:550px;overflow:hidden;perspective:1100px}.scene:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 76%)}.scene-glow{position:absolute;width:90%;height:70%;left:6%;top:13%;background:radial-gradient(ellipse,#83a84c25,transparent 65%);filter:blur(30px)}.scene-grid{position:absolute;inset:0;background-image:linear-gradient(#87a9680a 1px,transparent 1px),linear-gradient(90deg,#87a9680a 1px,transparent 1px);background-size:65px 65px;mask-image:radial-gradient(ellipse,#000,transparent 65%);transform:perspective(600px) rotateX(58deg) rotateZ(-36deg) scale(1.4);opacity:.8}.orbit{position:absolute;border:1px solid #667f431f;border-radius:50%;left:11%;top:15%;width:80%;height:70%;transform:rotate(-30deg) scaleY(.78)}.orbit-two{transform:rotate(48deg) scaleY(.85);width:90%;left:6%}
.object{position:absolute;left:50%;top:45%;width:290px;height:290px;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(calc(56deg - var(--progress)*8deg)) rotateZ(calc(-36deg + var(--progress)*24deg));z-index:1}.plate{position:absolute;inset:0;border-radius:24px;transform-style:preserve-3d;border:1px solid #c3d99544;box-shadow:1px 1px 0 #718955,2px 2px 0 #718955,3px 3px 0 #4a5f37,4px 4px 0 #4a5f37,5px 5px 0 #34442c,6px 6px 0 #34442c,15px 20px 35px #0008;background:linear-gradient(140deg,#4e6341,#19291d 70%);display:flex;align-items:flex-start;justify-content:space-between;padding:22px}.plate:before{content:'';position:absolute;inset:9px;border:1px solid #bad59e23;border-radius:17px;pointer-events:none}.plate>span{font:7px Consolas,monospace;letter-spacing:1.5px;color:#c2d8ad;position:relative;z-index:2}.plate-top{transform:translateZ(calc(70px + var(--progress)*90px));background:radial-gradient(ellipse at 30% 20%,#b0cc85aa,transparent 70%),linear-gradient(145deg,#779157,#3c542e 70%);border-color:#b6d58a;box-shadow:1px 1px 0 #bad292,2px 2px 0 #a8bf82,3px 3px 0 #8ba366,4px 4px 0 #80965f,5px 5px 0 #65794b,6px 6px 0 #576a40,16px 24px 40px #0005}.plate-top:after{content:'';position:absolute;inset:0;background-image:url('./assets/grain.svg');opacity:.13;border-radius:24px}.plate-logo{position:absolute;left:101px;top:96px;box-shadow:0 4px 10px #19250f44;border-radius:18px}.top-label{position:absolute;left:23px;bottom:23px;font:7px Consolas,monospace;letter-spacing:1.4px;color:#d7e6c3}.plate-middle{transform:translateZ(calc(-5px - var(--progress)*2px));background:linear-gradient(140deg,#526542,#1c2e20 75%)}.plate-bottom{transform:translateZ(calc(-80px - var(--progress)*70px));background:linear-gradient(140deg,#334b2f,#12231a 80%)}.plate-base{transform:translateZ(calc(-130px - var(--progress)*120px));background:linear-gradient(140deg,#263a28,#101d15);border-color:#5e745140;box-shadow:1px 1px 0 #394e34,2px 2px 0 #34442d,3px 3px 0 #2a3c24,4px 4px 0 #25351f,20px 30px 70px #000}.plate-base>span{align-self:flex-end;color:#647c57;font-size:7px}.circuit{position:absolute;left:66px;top:90px;width:160px;height:135px;background:repeating-linear-gradient(0deg,transparent,transparent 31px,#b9d98b33 32px),repeating-linear-gradient(90deg,transparent,transparent 31px,#b9d98b33 32px);border:1px solid #bddf8644;border-radius:8px}.circuit:after{content:'';position:absolute;left:50px;top:35px;width:55px;height:55px;background:#c5ef7b;border:7px solid #384f29;box-shadow:0 0 25px #c5ef7b22;border-radius:6px}.plate-bottom i{position:absolute;left:55px;top:85px;width:180px;height:30px;background:linear-gradient(90deg,#69874e,#2d452a);border:1px solid #b3d18a33;border-radius:5px;box-shadow:1px 4px 0 #20361d}.plate-bottom i:nth-of-type(2){top:130px}.plate-bottom i:nth-of-type(3){top:175px}.object-axis{position:absolute;left:50%;top:50%;width:1px;height:1px;transform-style:preserve-3d}.object-axis:after{content:'';position:absolute;height:430px;width:1px;background:linear-gradient(transparent,#c5ef7b66,transparent);transform:rotateX(90deg) translateY(-50%);transform-origin:top}
.scene-label{position:absolute;bottom:11%;left:18%;right:12%;display:flex;gap:10px;align-items:center;font:7px Consolas,monospace;letter-spacing:1px;color:#a4bb91;z-index:2}.scene-coordinate{margin-left:auto;color:#60764f;font-size:6px}.scene{animation:scene-in 1.2s ease-out both}@keyframes scene-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}