/* Approved device, project and navigation motion. The homepage hero is excluded. */
@media(prefers-reduced-motion:no-preference){
 html.wtm-motion-ready .cinematic-site #work .project.reveal{opacity:1;transform:none;transition:none}
 html.wtm-motion-ready .device-lineup[data-drift]{--drift:0px!important}
 html.wtm-motion-ready details.mobile-menu>summary::before,
 html.wtm-motion-ready details.mobile-menu>summary::after,
 html.wtm-motion-ready .wtm-menu>summary::before,
 html.wtm-motion-ready .wtm-menu>summary::after{transition:transform .3s cubic-bezier(.22,.75,.2,1)}
 html.wtm-motion-ready details.wtm-motion-closing>summary::before{transform:translateY(-3.5px)}
 html.wtm-motion-ready details.wtm-motion-closing>summary::after{transform:translateY(3.5px)}
 html.wtm-motion-ready #msheet{transform:translateY(-8px);transition:transform .3s cubic-bezier(.22,.75,.2,1),opacity .18s ease,visibility .3s}
 html.wtm-motion-ready #msheet.open{transform:none}
 html.wtm-motion-ready :is(.case-play-overlay,.header-cta,.header-contact,.wtm-contact,a.btn-primary){transition:scale .16s ease,background-color .18s ease,color .18s ease}
 html.wtm-motion-ready :is(.case-play-overlay,.header-cta,.header-contact,.wtm-contact,a.btn-primary):active{scale:.98}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html.wtm-motion-ready .case-preview-poster img,
 html.wtm-motion-ready .case-page .case-showcase img,
 html.wtm-motion-ready .webdesign-page .project-image img{transition:scale .5s cubic-bezier(.22,.75,.2,1)}
 html.wtm-motion-ready .case-preview:not(.case-playing):hover .case-preview-poster img,
 html.wtm-motion-ready .case-page .case-showcase:hover img,
 html.wtm-motion-ready .webdesign-page .project-image:hover img{scale:1.015}
}

@media(prefers-reduced-motion:no-preference){
 html.wtm-motion-ready dialog#mobile-menu[open] .menu-close::before{animation:wtm-close-first .3s cubic-bezier(.22,.75,.2,1)}
 html.wtm-motion-ready dialog#mobile-menu[open] .menu-close::after{animation:wtm-close-second .3s cubic-bezier(.22,.75,.2,1)}
}
@keyframes wtm-close-first{from{transform:translateY(-3.5px)}to{transform:rotate(45deg)}}
@keyframes wtm-close-second{from{transform:translateY(3.5px)}to{transform:rotate(-45deg)}}