.hero-card-animation {
  position: relative;
  display: grid;
  place-items: start center;
  width: min(100%, 560px);
  height: 350px;
  margin-inline: auto;
  overflow: visible;
}

.hero-card-stack {
  position: relative;
  width: min(100%, 430px);
  height: 350px;
  transform: translateZ(0);
}

.hero-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 230px;
  height: 350px;
  padding: 22px;
  border-radius: 1rem;
  /* border: 3px solid #171717; */
  color: #171717;
  /* box-shadow: 10px 10px 0 #171717; */
  opacity: 0;
  transform-origin: center bottom;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.hero-card__eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-card h3 {
  margin: 0;
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

/* Initial stack positions */
.hero-card:nth-child(1) {
  z-index: 6;
  opacity: 1;
  transform: translateX(-75%) scale(1);
  animation: hero-card-exit 0.4s ease-in-out 2.5s forwards;
}

.hero-card:nth-child(2) {
  z-index: 5;
  opacity: 1;
  transform: translateX(-38%) scale(0.76);
  animation:
    hero-card-slot-2-to-1 0.4s ease-in-out 2.5s forwards,
    hero-card-exit 0.4s ease-in-out 3.8s forwards;
  bottom: 1rem;
}

.hero-card:nth-child(3) {
  z-index: 4;
  opacity: 1;
  transform: translateX(-6%) scale(0.58);
  animation:
    hero-card-slot-3-to-2 0.4s ease-in-out 2.5s forwards,
    hero-card-slot-2-to-1 0.4s ease-in-out 3.8s forwards,
    hero-card-exit 0.4s ease-in-out 5.2s forwards;
  bottom: 2rem;
}

.hero-card:nth-child(4) {
  z-index: 3;
  opacity: 0;
  transform: translateX(22%) scale(0.46);
  animation:
    hero-card-slot-4-to-3 0.4s ease-in-out 2.5s forwards,
    hero-card-slot-3-to-2 0.4s ease-in-out 3.8s forwards,
    hero-card-slot-2-to-1 0.4s ease-in-out 5.2s forwards;
}

.hero-card:nth-child(5) {
  z-index: 2;
  opacity: 0;
  transform: translateX(22%) scale(0.46);
  animation:
    hero-card-slot-4-to-3 0.4s ease-in-out 3.8s forwards,
    hero-card-slot-3-to-2 0.4s ease-in-out 5.2s forwards;
}

.hero-card:nth-child(6) {
  z-index: 1;
  opacity: 0;
  transform: translateX(22%) scale(0.46);
  animation: hero-card-slot-4-to-3 0.4s ease-in-out 5.2s forwards;
}

.hero-card--yellow {
  background: #f9d25d;
}

.hero-card--green {
  background: #5ff6bc;
}

.hero-card--purple {
  background: #d3b8ff;
}

.hero-card--pink {
  background: #ff9fcb;
}

.hero-card--blue {
  background: #a8d8ff;
}

.hero-card--orange {
  background: #ffb86b;
}

@keyframes hero-card-exit {
  from {
    opacity: 1;
    transform: translateX(-75%) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(-86%) translateY(-18px) scale(1.04);
  }
}

@keyframes hero-card-slot-2-to-1 {
  from {
    opacity: 1;
    transform: translateX(-38%) scale(0.76);
    bottom: 1rem;
  }

  to {
    opacity: 1;
    transform: translateX(-75%) scale(1);
    bottom: 0rem;
  }
}

@keyframes hero-card-slot-3-to-2 {
  from {
    opacity: 1;
    transform: translateX(-6%) scale(0.58);
    bottom: 2rem;
  }

  to {
    opacity: 1;
    transform: translateX(-38%) scale(0.76);
    bottom: 1rem;
  }
}

@keyframes hero-card-slot-4-to-3 {
  from {
    opacity: 0;
    transform: translateX(22%) scale(0.46);
    bottom: 3rem;
  }

  to {
    opacity: 1;
    transform: translateX(-6%) scale(0.58);
    bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .hero-card-animation {
    place-items: center;
    height: 560px;
  }

  .hero-card-stack {
    width: min(100%, 520px);
    height: 510px;
  }

  .hero-card {
    width: 300px;
    height: 470px;
    padding: 28px;
    border-radius: 2.35rem;
  }

  .hero-card h3 {
    font-size: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card {
    animation: none !important;
  }

  .hero-card:nth-child(1),
  .hero-card:nth-child(2),
  .hero-card:nth-child(3) {
    opacity: 1;
  }
}