/* Device-preview motion belongs to the public website, never the learning app. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .device-preview .device-shell{transition:transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .6s ease}
  .device-preview:hover .device-shell,.device-preview:focus-visible .device-shell{transform:translateY(-7px) rotateY(0) rotateX(0);box-shadow:12px 28px 42px #163f3535}
}
@keyframes saaful-device-float{
  0%,100%{transform:translateY(0) rotateY(-4deg) rotateX(1deg)}
  50%{transform:translateY(-7px) rotateY(-1deg) rotateX(0)}
}
@media (hover:none) and (prefers-reduced-motion:no-preference),(pointer:coarse) and (prefers-reduced-motion:no-preference){
  .device-preview.is-visible .device-shell{animation:saaful-device-float 5s ease-in-out infinite}
  .device-preview:active .device-shell{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .device-preview .device-shell{animation:none!important;transition:none!important;transform:none!important}
}