@layer animations {
  @keyframes coinFlip{
    0%   { transform: translateY(0) rotateX(0deg) rotateZ(0deg); }
    16%  { transform: translateY(-95px) rotateX(360deg) rotateZ(8deg); }
    70%  { transform: translateY(-95px) rotateX(calc(var(--flip-rot) - 240deg)) rotateZ(-10deg); }
    88%  { transform: translateY(6px) rotateX(calc(var(--flip-rot) + 16deg)) rotateZ(3deg); }
    100% { transform: translateY(0) rotateX(var(--flip-rot)) rotateZ(0deg); }
  }

  @keyframes shine{
    0%   { opacity:0; transform: translateZ(20px) translateX(-30px); }
    30%  { opacity:.9; }
    100% { opacity:0; transform: translateZ(20px) translateX(40px); }
  }

  @keyframes diceRoll {
    0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    15%  { transform: translateY(-120px) rotateX(180deg) rotateY(180deg) rotateZ(45deg); }
    70%  { transform: translateY(-120px) rotateX(var(--roll-x)) rotateY(var(--roll-y)) rotateZ(var(--roll-z)); }
    88%  { transform: translateY(8px) rotateX(var(--final-x)) rotateY(var(--final-y)) rotateZ(calc(var(--roll-z) + 10deg)); }
    100% { transform: translateY(0) rotateX(var(--final-x)) rotateY(var(--final-y)) rotateZ(var(--roll-z)); }
  }
}