/**
 * floating-products.css — Estilos de los productos flotantes (FloatingProducts.tsx).
 *
 * Depende de: tokens.css. Las variables de recorrido (--sx, --ex, --sr, etc.)
 * las define cada producto inline en template-parts/floating-products.php.
 *
 * Cómo funciona el scroll-driven:
 *   assets/js/floating-products.js publica --p (progreso 0→1) en .lm-fp.
 *   Aquí interpolamos posición/rotación/escala con calc(), igual que el
 *   useTransform de Framer Motion. --rest = 1 - --p atenúa la flotación a
 *   medida que los productos llegan a la canasta (asentamiento suave).
 */

/* ==========================================================================
   Contenedor circular
   ========================================================================== */
.lm-fp {
  position: relative;
  width: 75vw; /* w-[75vw] */
  height: 75vw;
  max-width: 550px;
  max-height: 550px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;

  --p: 0; /* progreso de scroll, lo actualiza floating-products.js */
  --rest: calc(1 - var(--p)); /* amplitud restante de flotación */
}

/* ==========================================================================
   Canasta (trasera z-10 / delantera z-20)
   ========================================================================== */
.lm-fp__basket {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lm-fp__basket--back {
  z-index: 10;
}
.lm-fp__basket--front {
  z-index: 20;
}
.lm-fp__basket img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); /* drop-shadow-2xl */
}

/* ==========================================================================
   Capa de productos (z-15, desplazada 8% hacia abajo)
   ========================================================================== */
.lm-fp__layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(8%);
}

/* --- Recorrido de scroll (equivale al useTransform del TSX) ---
 * Interpola de (--sx,--sy,--sr, escala 1) a (--ex,--ey,--er, escala 0.7)
 * según --p. Los hijos absolutos del flex centrado nacen en el centro. */
.lm-fp__item {
  position: absolute;
  transform:
    translate(
      calc(var(--sx) + (var(--ex) - var(--sx)) * var(--p)),
      calc(var(--sy) + (var(--ey) - var(--sy)) * var(--p))
    )
    rotate(calc(var(--sr) + (var(--er) - var(--sr)) * var(--p)))
    scale(calc(1 - 0.3 * var(--p)));
}

/* --- Entrada "caída del cielo" (initial y:-1000 → spring) --- */
.lm-fp__drop {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03))
    drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)); /* drop-shadow-xl */
  animation: lm-drop 1.3s cubic-bezier(0.22, 1.1, 0.36, 1)
    var(--drop-delay, 2s) both; /* curva con leve rebote ≈ spring 70/20 */
}
@keyframes lm-drop {
  from {
    transform: translateY(-1000px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Flotación idle ---
 * La amplitud (--amp) se multiplica por --rest: al llegar a la canasta
 * (--p → 1) la oscilación se desvanece y el producto queda en reposo. */
.lm-fp__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  animation: lm-float var(--float-dur, 8s) ease-in-out infinite;
}
@keyframes lm-float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--base-rot, 0deg));
  }
  50% {
    transform: translateY(calc(-1 * var(--amp, 12px) * var(--rest, 1)))
      rotate(calc(var(--base-rot, 0deg) + var(--rot-amp, 0deg) * var(--rest, 1)));
  }
}

/* ==========================================================================
   Tamaños por producto (clases responsive del TSX)
   ========================================================================== */
.lm-fp__item--cafe {
  width: 6rem; /* w-24 */
}
.lm-fp__item--tibito {
  width: 8rem; /* w-32 */
}
.lm-fp__item--equiori {
  width: 5rem; /* w-20 */
}
.lm-fp__item--miel {
  width: 15rem; /* w-60 */
}
.lm-fp__item--ancestrales {
  width: 16rem; /* w-64 */
}
.lm-fp__item--corelia {
  width: 7rem; /* w-28 */
}

@media (min-width: 768px) {
  .lm-fp {
    width: 45vw; /* md:w-[45vw] */
    height: 45vw;
  }
  .lm-fp__item--cafe {
    width: 20rem; /* md:w-80 */
  }
  .lm-fp__item--tibito {
    width: 18rem; /* md:w-72 */
  }
  .lm-fp__item--equiori {
    width: 8rem; /* md:w-32 */
  }
  .lm-fp__item--miel {
    width: 16rem; /* md:w-64 */
  }
  .lm-fp__item--ancestrales {
    width: 14rem; /* md:w-56 */
  }
  .lm-fp__item--corelia {
    width: 16rem; /* md:w-64 */
  }
}

@media (min-width: 1024px) {
  .lm-fp__item--cafe {
    width: 24rem; /* lg:w-96 */
  }
  .lm-fp__item--tibito {
    width: 20rem; /* lg:w-80 */
  }
  .lm-fp__item--equiori {
    width: 11rem; /* lg:w-44 */
  }
  .lm-fp__item--miel {
    width: 18rem; /* lg:w-72 */
  }
  .lm-fp__item--ancestrales {
    width: 18rem; /* lg:w-72 */
  }
  .lm-fp__item--corelia {
    width: 18rem; /* lg:w-72 */
  }
}

/* ==========================================================================
   Accesibilidad: usuarios con movimiento reducido
   Los productos quedan directamente en reposo dentro de la canasta.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lm-fp {
    --p: 1 !important; /* gana sobre el estilo inline que pone el JS */
  }
  .lm-fp__drop {
    animation: none;
  }
  .lm-fp__img {
    animation: none;
    transform: rotate(var(--base-rot, 0deg));
  }
}