/* DEMO STOKER: a single stepped signal scan, with a tactile console key. */
.v4-demo .demo-motion-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;border-radius:inherit}
.v4-demo .demo-motion-scan>i{position:absolute;inset:0 0 auto;height:14%;background:linear-gradient(transparent,#a8f7ff33 80%,#c8fcff9c 96%,transparent);opacity:0;transform:translateY(-100%)}
.v4-demo .demo-motion-boot{position:absolute;right:15px;bottom:15px;display:flex;gap:5px;pointer-events:none;z-index:2}
.v4-demo .demo-motion-boot>i{width:12px;height:5px;border-radius:1px;background:#a9edf3;opacity:.35}
.v4-demo .demo-control-rows article>span{position:relative;overflow:hidden}
.v4-demo .demo-motion-channel{position:absolute;inset:0 auto 0 0;width:3px;background:#b9fdff;opacity:0;transform-origin:center top;pointer-events:none}
.v4-demo .demo-start .play-link{transform:none;box-shadow:0 7px 0 #854728,0 0 0 5px #242840;transition:transform 100ms cubic-bezier(.23,1,.32,1),box-shadow 100ms cubic-bezier(.23,1,.32,1)}
.v4-demo .demo-start .play-link::after{content:none}
.v4-demo .demo-start .play-link>span{transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.v4-demo .demo-header-help{transition:transform 160ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .v4-demo:not([data-motion-input="keyboard"]) .demo-start .play-link:hover{transform:translateY(1px);box-shadow:0 6px 0 #854728,0 0 0 5px #242840}
  .v4-demo:not([data-motion-input="keyboard"]) .demo-start .play-link:hover>span{transform:translateX(3px)}
  .v4-demo:not([data-motion-input="keyboard"]) .demo-header-help:hover{transform:translateX(2px)}
}
@media(prefers-reduced-motion:no-preference){
  .v4-demo:not([data-motion-input="keyboard"]) .demo-start .play-link:active{transform:translateY(5px);box-shadow:0 2px 0 #854728,0 0 0 5px #242840}
}
@media(prefers-reduced-motion:reduce){
  .v4-demo .demo-motion-scan,.v4-demo .demo-motion-boot,.v4-demo .demo-motion-channel{display:none}
  .v4-demo .demo-start .play-link,.v4-demo .demo-start .play-link>span,.v4-demo .demo-header-help{transition:none;transform:none}
}