@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes flip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  50% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
  90% { transform: translateX(-5px); }
}

@keyframes bounce {
  0%, 20% { transform: translateY(0); }
  40% { transform: translateY(calc(var(--tile-size) * -0.35)); }
  100% { transform: translateY(0); }
}

.tile.flip {
  animation: flip 500ms ease forwards;
}

.board-row.shake {
  animation: shake 600ms ease;
}

.tile.bounce {
  animation: bounce 600ms ease;
}

.tile.flip.correct,
.tile.flip.present,
.tile.flip.absent {
  color: #fff;
}

.tile.flip:nth-child(1) { animation-delay: 0ms; }
.tile.flip:nth-child(2) { animation-delay: 250ms; }
.tile.flip:nth-child(3) { animation-delay: 500ms; }
.tile.flip:nth-child(4) { animation-delay: 750ms; }
.tile.flip:nth-child(5) { animation-delay: 1000ms; }

.tile.bounce:nth-child(1) { animation-delay: 0ms; }
.tile.bounce:nth-child(2) { animation-delay: 100ms; }
.tile.bounce:nth-child(3) { animation-delay: 200ms; }
.tile.bounce:nth-child(4) { animation-delay: 300ms; }
.tile.bounce:nth-child(5) { animation-delay: 400ms; }

@keyframes menu-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes menu-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes menu-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes menu-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.modal-menu.is-open,
  dialog.modal-menu.is-closing,
  .menu-backdrop.is-open,
  .menu-backdrop.is-closing {
    animation: none !important;
  }

  dialog.modal-menu.is-open,
  .menu-backdrop.is-open {
    transform: none;
    opacity: 1;
  }
}

.tile {
  transform-style: preserve-3d;
}