/* One-shot cover icon motion: plays when a cover scrolls into view and again when it slides back down.
   Uses the same 650ms-ish vocabulary as the existing line-mark icons. No layout change. */
.project-cover[class*="motion-"] svg { transform-origin: 50% 50%; }
.project-cover .motion-part { transform-box: view-box; }
.project-cover.motion-spin .motion-part { transform-origin: 48px 44px; }
.project-cover.motion-tilt .motion-part { transform-origin: 48px 30px; }

.project-cover.is-playing.motion-spin .motion-part { animation: cover-spin 1400ms cubic-bezier(.2,.7,.2,1); }
.project-cover.is-playing.motion-tilt .motion-part { animation: cover-tilt 900ms ease-in-out; }
.project-cover.is-playing.motion-tilt:not(:has(.motion-part)) svg { animation: cover-tilt 900ms ease-in-out; }
.project-cover.is-playing.motion-wiggle svg { animation: cover-wiggle 700ms ease-in-out; }
.project-cover.is-playing.motion-bob svg { animation: cover-bob 800ms ease-in-out; }
.project-cover.is-playing.motion-roll svg { animation: cover-roll 900ms ease-in-out; }
.project-cover.is-playing.motion-snap svg { animation: cover-snap 500ms ease-out; }
.project-cover.is-playing.motion-scan svg { animation: cover-scan 900ms ease-in-out; }

@keyframes cover-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes cover-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 65% { transform: rotate(5deg); } }
@keyframes cover-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes cover-bob { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-8px); } 75% { transform: translateY(-4px); } }
@keyframes cover-roll { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-10px); } 70% { transform: translateX(8px); } }
@keyframes cover-snap { 0%, 100% { transform: scale(1); } 30% { transform: scale(.9); } 60% { transform: scale(1.04); } }
@keyframes cover-scan { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-6px, -3px); } 65% { transform: translate(6px, 3px); } }

@media (prefers-reduced-motion: reduce) {
  .project-cover.is-playing svg, .project-cover.is-playing .motion-part { animation: none !important; }
}