/* Each device shares the creator scene's camera and its own floating depth. */
.hero-art.hero-depth{--tool-depth-scale:1;--tool-motion-scale:1}
.hero-depth .hero-tool-plane{position:absolute;display:block;transform-style:preserve-3d;transform:translateZ(calc(var(--tool-depth) * var(--tool-depth-scale))) rotate(var(--tool-roll));z-index:2;pointer-events:none}
.hero-depth .hero-tool-plane img{display:block;width:100%;max-width:none;height:auto;filter:drop-shadow(0 7px 7px #03040d66);pointer-events:none}
.hero-depth .hero-tool-tablet{--tool-depth:22px;--tool-roll:3deg;--tool-lift:2px;left:80%;top:77%;width:13%}
.hero-depth .hero-tool-keyboard{--tool-depth:38px;--tool-roll:-4deg;--tool-lift:2px;left:8%;top:60%;width:18%}
.hero-depth .hero-tool-mouse{--tool-depth:46px;--tool-roll:7deg;--tool-lift:2.5px;left:90%;top:52%;width:5.5%}
@media(prefers-reduced-motion:no-preference){
  html.motion-enabled .hero-depth .hero-tool-plane{animation:hero-tool-hover 9s ease-in-out infinite}
  html.motion-enabled .hero-depth .hero-tool-tablet{animation-duration:11s;animation-delay:-3s}
  html.motion-enabled .hero-depth .hero-tool-keyboard{animation-delay:-5s}
  html.motion-enabled .hero-depth .hero-tool-mouse{animation-duration:8s;animation-delay:-2s}
  @keyframes hero-tool-hover{
    0%,100%{transform:translate3d(0,0,calc(var(--tool-depth) * var(--tool-depth-scale))) rotate(var(--tool-roll))}
    50%{transform:translate3d(0,calc(0px - var(--tool-lift) * var(--tool-motion-scale)),calc(var(--tool-depth) * var(--tool-depth-scale))) rotate(calc(var(--tool-roll) + 1deg))}
  }
}
@media(max-width:1100px){
  .hero-art.hero-depth{--tool-depth-scale:.6;--tool-motion-scale:.7}
}
@media(max-width:760px){
  .hero-art.hero-depth{--tool-depth-scale:.28;--tool-motion-scale:.45}
  .hero-depth .hero-tool-plane img{filter:drop-shadow(0 3px 4px #03040d55)}
}
@media(prefers-reduced-motion:reduce){
  .hero-depth .hero-tool-plane{transform:none}
}