.door-card.animation-flip .door-front,
.door-card.animation-flip-left .door-front,
.door-preview-card.animation-flip .door-front,
.door-preview-card.animation-flip-left .door-front {
  transform-origin: left center;
  backface-visibility: visible;
}

.door-card.animation-flip .door-front::after,
.door-card.animation-flip-left .door-front::after,
.door-preview-card.animation-flip .door-front::after,
.door-preview-card.animation-flip-left .door-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: inherit;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.door-card.animation-flip.open .door-front,
.door-card.animation-flip-left.open .door-front,
.door-preview-card.animation-flip.is-playing .door-front,
.door-preview-card.animation-flip-left.is-playing .door-front {
  animation: advent-door-flip-left var(--door-animation-duration, 0.85s)
    cubic-bezier(0.23, 1, 0.32, 1) forwards;
  pointer-events: none;
}

@keyframes advent-door-flip-left {
  0% {
    transform: perspective(1200px) rotateY(0deg) scaleX(1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }
  60% {
    transform: perspective(1200px) rotateY(-90deg) scaleX(0.75);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  }
  100% {
    transform: perspective(1200px) rotateY(-110deg) scaleX(0.6);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  }
}