/* Motion only: the existing colours, glass surfaces and layout stay in charge. */
html{overflow-x:clip}
.motion-line{display:block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
.motion-line-inner{display:block}

@media (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .hero-machine{transform:translate3d(0,var(--depth-y,0px),0) rotate(calc(-3deg + var(--depth-turn,0deg)))}
  html[data-motion="on"] .hero-halo{transform:translate3d(0,var(--depth-y,0px),0)}
  html[data-motion="on"] .hero-visual .top-label{transform:translate3d(0,var(--depth-y,0px),0)}
  html[data-motion="on"] .hero-visual .bottom-label{transform:translate3d(0,var(--depth-y,0px),0) rotate(4deg)}
  html[data-motion="on"] .story-image>img{transform:translate3d(0,var(--depth-y,0px),0) rotate(calc(-8deg + var(--depth-turn,0deg)))}
  html[data-motion="on"] .story-disc{transform:translate3d(0,var(--depth-y,0px),0)}
  html[data-motion="on"] .story-stamp{transform:translate3d(0,var(--depth-y,0px),0) rotate(17deg)}
  html[data-motion="on"] .robot-card-image>img{transition:scale .7s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover) and (pointer:fine){
    html[data-motion="on"] .robot-card:hover .robot-card-image>img{scale:1.025}
    html[data-motion="on"] .text-link>span{transition:translate .4s cubic-bezier(.16,1,.3,1)}
    html[data-motion="on"] .text-link:hover>span{translate:3px -3px}
  }
}

@media (prefers-reduced-motion:reduce){
  .motion-line{overflow:visible}
}
@media print{
  .motion-line{overflow:visible}
  [data-motion-item]{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;animation:none!important}
}