/* Reward, match tag, and card-flight animations. */

@keyframes rewardFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tagIn {
  from {
    opacity: 0;
    transform: scale(1.14);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.combo-deck-app .fly-card {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: var(--fly-width);
  height: var(--fly-height);
  overflow: hidden;
  border: 1px solid var(--gold-2);
  background: linear-gradient(145deg, #222838, #11141c);
  box-shadow:
    0 0 24px rgba(255, 229, 154, 0.32),
    0 18px 42px rgba(0, 0, 0, 0.46);
  pointer-events: none;
  animation: flyToSlot 420ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.combo-deck-app .fly-card.legendary {
  border-color: var(--gold-2);
  box-shadow:
    0 0 0 1px rgba(255, 229, 154, 0.7),
    0 0 34px rgba(255, 229, 154, 0.5),
    0 18px 42px rgba(0, 0, 0, 0.46);
}

.combo-deck-app .fly-card img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
}

@keyframes flyToSlot {
  from {
    opacity: 0.95;
    transform: translate3d(var(--from-x), var(--from-y), 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate3d(var(--to-x), var(--to-y), 0) scale(0.72);
  }
}