.card-container {
  --rx: 0deg;
  --ry: 0deg;
  --f: 0deg;
  --s: 1;
  width: 100%;
  aspect-ratio: 987 / 416;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(600px) rotateY(var(--f)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform; /* Performance optimization */
}

.card-container.--is-moving {
  transition: transform 0.1s linear;
}

.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.card-face--back {
  transform: rotateY(180deg);
}

.specular {
  border-radius: 0.5rem;
  mix-blend-mode: multiply;
  background-color: #EEE;
  z-index: 10;
}

.glow-overlay {
  --glow-x: 50%;
  --glow-y: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  mix-blend-mode: multiply;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), #fff 0%, #e6e6e6 40%);
  pointer-events: none;
  z-index: 10;
  transform: translateZ(1px);
  will-change: background;
}