.is-animating .draw-card {
  will-change: transform, opacity, filter;
}

.is-animating .deck-container {
  perspective: 1200px;
}

.draw-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 232, 192, 0.16), transparent 40%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 45%, rgba(0, 0, 0, 0.18));
  pointer-events: none;
  opacity: 0.34;
  transition: opacity 320ms ease;
}

.draw-card.is-revealed {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(212, 175, 55, 0.16);
}

.draw-card.is-revealed::before {
  opacity: 0.64;
}


.draw-card {
  perspective: 1200px;
}

.draw-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}

.draw-card__face,
.draw-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.draw-card__face {
  transform: rotateY(180deg);
}

.draw-card__back {
  transform: rotateY(0deg);
}

@keyframes softGlow {
  0%,
  100% {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  }
  50% {
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(200, 169, 106, 0.18);
  }
}

.draw-card.is-revealed {
  animation: softGlow 2.2s ease-in-out infinite;
}