/* A three-frame project deck that changes order instead of simply fading in. */
.project-deck {
  transform: translateY(-50%) rotateX(var(--deck-tilt-x, 0deg)) rotateY(var(--deck-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: opacity .35s ease, transform .22s ease-out;
}

.project-deck.is-shuffling span:nth-child(1) { animation: shuffle-one .66s cubic-bezier(.22,.8,.2,1) both; }
.project-deck.is-shuffling span:nth-child(2) { animation: shuffle-two .66s .045s cubic-bezier(.22,.8,.2,1) both; }
.project-deck.is-shuffling span:nth-child(3) { animation: shuffle-three .66s .09s cubic-bezier(.22,.8,.2,1) both; }

.project-deck.is-shuffling span { box-shadow: 16px 18px 0 var(--accent); }
.project-deck.is-shuffling span:nth-child(2) { z-index: 4; }

@keyframes shuffle-one {
  0%, 100% { transform: rotate(var(--card-angle)) translate(var(--card-x), var(--card-y)); }
  45% { transform: rotate(-24deg) translate(-58%, 24%) scale(1.05); }
}

@keyframes shuffle-two {
  0%, 100% { transform: rotate(var(--card-angle)) translate(var(--card-x), var(--card-y)); }
  48% { transform: rotate(25deg) translate(60%, -19%) scale(1.07); }
}

@keyframes shuffle-three {
  0%, 100% { transform: rotate(var(--card-angle)) translate(var(--card-x), var(--card-y)); }
  50% { transform: rotate(-12deg) translate(-4%, -28%) scale(1.12); }
}

.project:hover .project-deck.is-shuffling span,
.project:focus-visible .project-deck.is-shuffling span { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .project-deck.is-shuffling span { animation: none; }
}