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

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

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

@keyframes advent-door-flip-bottom {
  0% {
    transform: perspective(1200px) rotateX(0deg) scaleY(1);
    opacity: 1;
  }
  45% {
    transform: perspective(1200px) rotateX(-60deg) scaleY(0.9);
    opacity: 0.7;
  }
  100% {
    transform: perspective(1200px) rotateX(-110deg) scaleY(0.8);
    opacity: 0;
  }
}