/* Base viewport context for 3D layout calculations */
.perspective {
  perspective: 1400px;
}

/* Structural blueprint for stacked slides */
.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Layer hardware optimization & ease mechanics */
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.7s ease, z-index 0.7s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* STATE 1: Active Card (Front & Center Focus) */
.card.active {
  transform: translateX(0) translateZ(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}

/* STATE 2: Next Card Slide (Right Flank Peeking Element) */
.card.next {
  transform: translateX(45px) translateZ(-100px) scale(0.88);
  opacity: 0.6;
  z-index: 5;
}

@media (min-width: 640px) {
  .card.next {
    transform: translateX(92px) translateZ(-100px) scale(0.88);
  }
}

/* STATE 3: Prev Card Slide (Left Flank Peeking Element) */
.card.prev {
  transform: translateX(-45px) translateZ(-100px) scale(0.88);
  opacity: 0.4;
  z-index: 4;
}

@media (min-width: 640px) {
  .card.prev {
    transform: translateX(-92px) translateZ(-100px) scale(0.88);
  }
}

/* Progress Indicators (Pills Framework) */
.pill {
  height: 10px;
  width: 24px;
  border-radius: 999px;
  background: #ffffff40;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 640px) {
  .pill {
    width: 28px;
  }
}

/* EDIT HERE: Active indicator state accent color & expanded layout width */
.pill.active {
  width: 60px;
  background: #DF0000;
}

@media (min-width: 640px) {
  .pill.active {
    width: 90px;
  }
}

/* Review Grid Cards Structural Design */
.review {
  width: 100%;
  min-height: 280px;
  border-radius: 32px;
  padding: 26px 27px 49px 26px;
  background: linear-gradient(180deg, #00000063 0%, #161616 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .review {
    height: 305px;
  }
}