/* ==========================================================================
   MOBIX — Sistema de Pila de Tarjetas Premium (v30.138.21)
   Especializado en UX Táctil Móvil, Glassmorphism y Micro-animaciones 3D.
   ========================================================================== */

/* 1. Contenedor de la Pila (Card Stack) */
.mox-card-stack {
  position: relative;
  width: 90%;
  max-width: 380px;
  height: 520px; /* Incrementado para evitar colisión de textos */
  margin: 0 auto;
  perspective: 1000px;
  pointer-events: none; /* Deja pasar clicks al mapa si no hay tarjetas */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. Tarjeta del Stack (Individual) */
.mox-review-card {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000000 !important; /* Negro Absoluto Total */
  border: 0.5px solid rgba(220, 220, 225, 0.6) !important; /* Trazo Fino de Luz Gris Plateado (Hairline) */
  border-radius: 28px;
  padding: 24px;
  box-sizing: border-box;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 
              0 0 20px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transform-origin: center bottom;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), 
              opacity 0.4s ease, 
              box-shadow 0.3s ease;
  pointer-events: auto; /* Permite toques en la tarjeta */
  touch-action: none;   /* Evita el scroll nativo de Capacitor durante el arrastre */
  will-change: transform, opacity;
}

/* 3. Posicionamiento en Cascada 3D (Efecto Dominó Asomado por Debajo con Resorte Elástico) */
.mox-review-card.card-active {
  z-index: 10;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

@keyframes mox-spring-domino-1 {
  0%, 100% {
    transform: translate3d(-8px, 32px, -35px) rotate(1.8deg) scale(0.94);
  }
  50% {
    transform: translate3d(0, 46px, -30px) rotate(0deg) scale(0.95);
  }
}

@keyframes mox-spring-domino-2 {
  0%, 100% {
    transform: translate3d(8px, 64px, -70px) rotate(-1.8deg) scale(0.88);
  }
  50% {
    transform: translate3d(0, 84px, -65px) rotate(0deg) scale(0.89);
  }
}

.mox-review-card.card-background-1 {
  z-index: 9;
  opacity: 0.95; /* Máxima visibilidad nítida */
  pointer-events: none; /* Solo la de arriba recibe toques */
  animation: mox-spring-domino-1 3.2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.mox-review-card.card-background-2 {
  z-index: 8;
  opacity: 0.82; /* Alta visibilidad sin blur */
  pointer-events: none;
  animation: mox-spring-domino-2 3.2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
  animation-delay: 0.25s; /* Delay para desfase elegante de resorte */
}

.mox-review-card.card-background-hidden {
  z-index: 7;
  transform: translate3d(0, 84px, -105px) scale(0.81);
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
}

/* 4. Animaciones de Descarte (Salida Volando) */
.mox-review-card.animate-fly-out-up {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  transform: translate3d(0, -600px, 0) rotate(15deg) scale(0.9);
  opacity: 0;
}

.mox-review-card.animate-fly-out-down {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  transform: translate3d(0, 600px, 0) rotate(-15deg) scale(0.9);
  opacity: 0;
}

/* Regreso Elástico Inercial */
.mox-review-card.animate-elastic-back {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 5. Efectos de Aceptación Premium */

/* Destello Dorado */
@keyframes goldFlash {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 192, 0, 0.6);
    border-color: rgba(255, 192, 0, 1);
  }
  100% {
    box-shadow: 0 0 30px 40px rgba(255, 192, 0, 0);
    border-color: rgba(255, 215, 0, 0.15);
  }
}

.mox-review-card.gold-flash-active {
  animation: goldFlash 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  z-index: 20;
}

/* Desvanecimiento en Abanico 3D (Fan-Out) */
.mox-review-card.prm-fan-out {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
  transform: translate3d(80px, 120px, -60px) rotate(12deg) scale(0.85);
  opacity: 0;
}

.mox-review-card.card-background-1.prm-fan-out {
  transition-delay: 0.08s;
  transform: translate3d(-80px, 140px, -100px) rotate(-8deg) scale(0.8);
  opacity: 0;
}

.mox-review-card.card-background-2.prm-fan-out {
  transition-delay: 0.16s;
  transform: translate3d(40px, 160px, -140px) rotate(4deg) scale(0.75);
  opacity: 0;
}