/* Touch previews animate when visible; desktop retains its hover interaction. */
@keyframes showcase-drift {
  from { transform: translate3d(0, 4px, 0) rotate(var(--showcase-tilt, -2deg)) scale(1); }
  to { transform: translate3d(0, -7px, 0) rotate(0deg) scale(1.018); }
}
@media (max-width:700px), (hover:none), (pointer:coarse) {
  .bode { --showcase-tilt:-3deg; }
  .astrojoe { --showcase-tilt:3deg; --showcase-delay:-1.4s; }
  .cloudvision { --showcase-tilt:-1.5deg; --showcase-delay:-2.8s; }
  .rabbithole-preview { --showcase-tilt:-2deg; --showcase-delay:-.8s; }
  .koneku-preview { --showcase-tilt:2deg; --showcase-delay:-2.2s; }
  .showcase-motion :is(.project-preview, .app-preview) .browser-preview {
    animation: showcase-drift 5.5s cubic-bezier(.45,0,.55,1) var(--showcase-delay,0s) infinite alternate both;
    animation-play-state:paused;
    transition:none;
    transform-origin:50% 50%;
  }
  .showcase-motion :is(.project-preview, .app-preview).showcase-in-view .browser-preview {
    animation-play-state:running;
    will-change:transform;
  }
  .showcase-suspended :is(.project-preview, .app-preview) .browser-preview,
  body:has(dialog[open]) :is(.project-preview, .app-preview) .browser-preview {
    animation-play-state:paused!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  :is(.project-preview, .app-preview) .browser-preview { animation:none!important; }
}