/* Subtle scene depth; the game controls and text remain still and readable. */
.motion-card > img {
  translate: var(--art-x, 0px) var(--art-y, 0px);
  transition: transform .7s cubic-bezier(.16,1,.3,1), translate .65s cubic-bezier(.16,1,.3,1);
}
.motion-card .round-arrow svg { transition: translate .4s cubic-bezier(.2,1.5,.5,1); }
.motion-card:focus-visible .round-arrow svg { translate: 3px 0; }
/* A brief curious lean, then a long rest. Hands remain anchored at the edge. */
.hero.hero-peek .peek-art.motion-character-visible {
  animation: peek-in 900ms var(--ease) both, amnyam-curious 9.5s 1.2s ease-in-out infinite;
}
@keyframes amnyam-curious {
  0%, 48%, 100% { translate: 0 0; rotate: 0deg; }
  57% { translate: 7px 2px; rotate: .8deg; }
  65% { translate: -3px -2px; rotate: -.7deg; }
  73%, 86% { translate: 0 0; rotate: 0deg; }
}
body.motion-background .peek-art { animation-play-state: paused !important; }
body.reduce-motion .motion-card > img,
body.reduce-motion .motion-card .round-arrow svg,
body.reduce-motion .hero.hero-peek .peek-art {
  translate: none !important; rotate: none !important; transition: none !important; animation: none !important;
}
@media (prefers-reduced-motion:reduce) {
  .motion-card > img, .motion-card .round-arrow svg, .hero.hero-peek .peek-art {
    translate: none !important; rotate: none !important; transition: none !important; animation: none !important;
  }
}