/* All layers use the same 1672 × 941 coordinate space, including on mobile. */
.scene{isolation:isolate;overflow:hidden;background-image:url('/motion/solana-background.png')}
.machine-stage{position:absolute;left:50%;top:50%;width:max(100vw,177.6833vh);height:max(100vh,56.2799vw);transform:translate(-50%,-50%);visibility:hidden}
.motion-ready .machine-stage{visibility:visible}
.machine-background,.machine-foreground{position:absolute;width:100%;height:100%;inset:0;object-fit:fill;pointer-events:none}
.machine-background{z-index:0}
.prize-lift,.claw-lift{position:absolute;inset:0;pointer-events:none;will-change:transform}
.prize-lift{z-index:1}
.machine-prize{position:absolute;left:41%;top:28%;width:18%;height:auto;transform-origin:50% 15%;filter:drop-shadow(0 10px 12px #20332412)}
.claw-lift{z-index:2}
.claw-rig{position:absolute;left:36%;top:-21.5%;width:28%;aspect-ratio:2/3}
.claw-part{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.claw-motor{clip-path:polygon(0 0,100% 0,100% 59.1%,69% 59.1%,64% 61.5%,59% 63.1%,57% 70%,43% 70%,41% 63.1%,36% 61.5%,31% 59.1%,0 59.1%)}
.claw-left{clip-path:polygon(0 59.1%,31% 59.1%,36% 60%,40.5% 61.5%,40.5% 64%,35% 69%,35% 100%,0 100%);transform-origin:36% 61%;transform:rotate(-7deg)}
.claw-right{clip-path:polygon(100% 59.1%,69% 59.1%,64% 60%,59.5% 61.5%,59.5% 64%,65% 69%,65% 100%,100% 100%);transform-origin:64% 61%;transform:rotate(12deg)}
.machine-foreground{z-index:3;clip-path:polygon(0 78%,7% 79%,13% 77%,19% 77%,25% 79%,32% 77%,39% 81%,41% 76%,42% 71%,44% 67%,47% 64.5%,50% 64.5%,53% 66%,55% 70%,56% 75%,59% 80%,64% 78%,69% 75%,73% 76%,78% 78%,83% 76%,91% 77%,100% 80%,100% 100%,0 100%)}
.motion-playing .claw-lift{animation:crane-descent 8.04s both}
.motion-playing .claw-left{animation:clamp-left 8.04s both}
.motion-playing .claw-right{animation:clamp-right 8.04s both}
.motion-playing .prize-lift{animation:prize-rise 8.04s both}
.motion-playing .machine-prize{animation:prize-settle 8.04s both}
@keyframes crane-descent{
  0%{transform:translateY(-13%);animation-timing-function:cubic-bezier(.3,0,.5,1)}
  34%{transform:translateY(22%)}
  66%{transform:translateY(22%);animation-timing-function:cubic-bezier(.42,0,.22,1)}
  94%{transform:translateY(-.5%);animation-timing-function:ease-out}
  100%{transform:translateY(0)}
}
@keyframes clamp-left{
  0%,33%{transform:rotate(10deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  49%,100%{transform:rotate(-7deg)}
}
@keyframes clamp-right{
  0%,33%{transform:rotate(-10deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  49%,100%{transform:rotate(12deg)}
}
@keyframes prize-rise{
  0%,66%{transform:translateY(22%);animation-timing-function:cubic-bezier(.42,0,.22,1)}
  94%{transform:translateY(-.5%);animation-timing-function:ease-out}
  100%{transform:translateY(0)}
}
@keyframes prize-settle{
  0%,66%{transform:rotate(-3deg);animation-timing-function:ease-in-out}
  82%{transform:rotate(1.6deg);animation-timing-function:ease-in-out}
  94%{transform:rotate(-.7deg);animation-timing-function:ease-out}
  100%{transform:rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.machine-stage *{animation:none!important;will-change:auto!important}}
