/*
  The held card being picked up, which is the same dip the travelling card makes over the top of
  it: it is spaced the same eased way for the same reason, so the two halves of one pickup agree.
*/
@keyframes hand-play {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  3.5% {
    opacity: 1;
    transform: translateY(0.9px) scale(0.997);
  }

  7% {
    opacity: 1;
    transform: translateY(4.5px) scale(0.985);
  }

  10.5% {
    opacity: 1;
    transform: translateY(8.1px) scale(0.973);
  }

  14% {
    opacity: 1;
    transform: translateY(9px) scale(0.97);
  }

  19.5% {
    opacity: 0.9;
    transform: translateY(6.7px) scale(0.975);
  }

  25% {
    opacity: 0.5;
    transform: translateY(-2.5px) scale(0.995);
  }

  30.5% {
    opacity: 0.1;
    transform: translateY(-11.7px) scale(1.015);
  }

  36%,
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(1.02);
  }
}

/* Press, give, settle - spaced the same eased way as the arc it belongs to. */
@keyframes deck-press {
  0% {
    transform: translate(0) rotate(0) scale(1);
  }

  3.25% {
    transform: translate(0, 0.5px) rotate(0) scale(0.996);
  }

  6.5% {
    transform: translate(0, 2.5px) rotate(0) scale(0.98);
  }

  9.75% {
    transform: translate(0, 4.5px) rotate(0) scale(0.964);
  }

  13% {
    transform: translate(0, 5px) rotate(0) scale(0.96);
  }

  17.75% {
    transform: translate(1.6px, 3.4px) rotate(0.5deg) scale(0.964);
  }

  22.5% {
    transform: translate(8px, -3px) rotate(2.5deg) scale(0.98);
  }

  27.25% {
    transform: translate(14.4px, -9.4px) rotate(4.5deg) scale(0.996);
  }

  32% {
    transform: translate(16px, -11px) rotate(5deg) scale(1);
  }

  49% {
    transform: translate(14.4px, -9.9px) rotate(4.5deg) scale(1);
  }

  66% {
    transform: translate(8px, -5.5px) rotate(2.5deg) scale(1);
  }

  83% {
    transform: translate(1.6px, -1.1px) rotate(0.5deg) scale(1);
  }

  100% {
    transform: translate(0) rotate(0) scale(1);
  }
}

/* From straight above, growing and casting further is the only thing that says a card went OVER
   the far pile rather than through it. Distances are shares of the card's own box. */
@keyframes riffle-left {
  0% {
    transform: translate(0, 0) rotate(0) scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }

  15% {
    transform:
      translate(calc(var(--riffle-split-left, 59%) * -0.424), 0)
      rotate(-1.5deg)
      scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }

  30% {
    transform:
      translate(calc(var(--riffle-split-left, 59%) * -0.881), 0)
      rotate(-3deg)
      scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }

  44% {
    transform: translate(calc(var(--riffle-split-left, 59%) * -1), 0) rotate(-3.4deg) scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }

  59% {
    transform:
      translate(calc(var(--riffle-split-left, 59%) * -0.881), -1.6%)
      rotate(-2.6deg)
      scale(1.04);
    filter: drop-shadow(0 4px 5px rgb(0 0 0 / 45%));
  }

  74% {
    transform:
      translate(calc(var(--riffle-split-left, 59%) * -0.508), -3.2%)
      rotate(-1.4deg)
      scale(1.07);
    filter: drop-shadow(0 7px 9px rgb(0 0 0 / 58%));
  }

  89% {
    transform:
      translate(calc(var(--riffle-split-left, 59%) * -0.153), -1.6%)
      rotate(-0.4deg)
      scale(1.03);
    filter: drop-shadow(0 4px 5px rgb(0 0 0 / 45%));
  }

  100% {
    transform: translate(0, 0) rotate(0) scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }
}

@keyframes riffle-right {
  0% {
    transform: translate(0, 0) rotate(0) scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }

  15% {
    transform: translate(calc(var(--riffle-split-right, 59%) * 0.424), 0) rotate(1.5deg) scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }

  30% {
    transform: translate(calc(var(--riffle-split-right, 59%) * 0.881), 0) rotate(3deg) scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }

  44% {
    transform: translate(var(--riffle-split-right, 59%), 0) rotate(3.4deg) scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }

  59% {
    transform:
      translate(calc(var(--riffle-split-right, 59%) * 0.881), -1.6%)
      rotate(2.6deg)
      scale(1.04);
    filter: drop-shadow(0 4px 5px rgb(0 0 0 / 45%));
  }

  74% {
    transform:
      translate(calc(var(--riffle-split-right, 59%) * 0.508), -3.2%)
      rotate(1.4deg)
      scale(1.07);
    filter: drop-shadow(0 7px 9px rgb(0 0 0 / 58%));
  }

  89% {
    transform:
      translate(calc(var(--riffle-split-right, 59%) * 0.153), -1.6%)
      rotate(0.4deg)
      scale(1.03);
    filter: drop-shadow(0 4px 5px rgb(0 0 0 / 45%));
  }

  100% {
    transform: translate(0, 0) rotate(0) scale(1);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  }
}

/* And the stack is squared up against the table once every card is back in it. */
@keyframes deck-square-up {
  0% {
    transform: translate(0);
  }

  34% {
    transform: translateY(-5px) scale(1.03);
  }

  68% {
    transform: translateY(2px) scale(0.98);
  }

  100% {
    transform: translate(0);
  }
}