/* ============================================================
   LaRa — Hero variant B: slow 3D carousel ring
   Product cards orbit gently like a jewellery display.
   Used together with 3d.css (soft mode).
   ============================================================ */

.ring-stage {
  position: relative;
  height: clamp(340px, 38vw, 480px);
  perspective: 1300px;
  display: grid;
  place-items: center;
}
.ring-glow {
  position: absolute; inset: 10% 6%;
  background: radial-gradient(circle at 50% 55%, rgba(200, 154, 61, 0.32), rgba(200, 154, 61, 0.04) 65%);
  border-radius: 50%;
  filter: blur(8px);
}

.ring {
  position: relative;
  width: var(--ring-card, 150px);
  height: var(--ring-card, 150px);
  transform-style: preserve-3d;
  animation: ring-spin 32s linear infinite;
}
.ring:hover { animation-play-state: paused; }
@keyframes ring-spin {
  from { transform: rotateX(-6deg) rotateY(0deg); }
  to   { transform: rotateX(-6deg) rotateY(-360deg); }
}

.ring-item {
  position: absolute; inset: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid rgba(255, 249, 244, 0.95);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  backface-visibility: hidden;   /* far-side cards fade away cleanly */
  background: var(--cream);
}
.ring-item img { width: 100%; height: 100%; object-fit: cover; }
.ring-item::after {
  /* soft glass sheen */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 45%);
}
/* six cards around the ring */
.ring-item:nth-child(1) { transform: rotateY(0deg)   translateZ(var(--ring-r, 250px)); }
.ring-item:nth-child(2) { transform: rotateY(60deg)  translateZ(var(--ring-r, 250px)); }
.ring-item:nth-child(3) { transform: rotateY(120deg) translateZ(var(--ring-r, 250px)); }
.ring-item:nth-child(4) { transform: rotateY(180deg) translateZ(var(--ring-r, 250px)); }
.ring-item:nth-child(5) { transform: rotateY(240deg) translateZ(var(--ring-r, 250px)); }
.ring-item:nth-child(6) { transform: rotateY(300deg) translateZ(var(--ring-r, 250px)); }

.ring-floor {
  position: absolute;
  left: 50%; bottom: 6%;
  width: 68%; height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.38), transparent 68%);
  filter: blur(7px);
}

@media (max-width: 860px) {
  .ring-stage { height: 320px; --ring-card: 118px; --ring-r: 185px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring { animation: none; }
}