/* ==========================================================================
   Bea Nails — "Our work" 3D ring gallery.
   The viewer stands inside a ring of photos that turns slowly and smoothly;
   cards at the sides come closer and turn toward you (like the reference video).
   ========================================================================== */
.bn-ring {
  --ring-card-w: 300px;
  --ring-card-h: 375px;
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: radial-gradient(120% 90% at 50% 20%, #241d1c 0%, #141111 70%);
  color: #fff;
  font-family: "Outfit", "Segoe UI", sans-serif;
}
.bn-ring__head { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 1rem; text-align: center; }
.bn-ring__kicker { margin: 0 0 1rem; color: #e7b8b0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; }
.bn-ring__title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 500; line-height: 1.05; }
.bn-ring__title em { color: #e7b8b0; font-style: normal; }
.bn-ring__sub { margin: 1.1rem auto 0; max-width: 34rem; color: rgba(255, 255, 255, 0.7); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; }

/* 3D stage */
.bn-ring__stage {
  position: relative;
  height: calc(var(--ring-card-h) + 120px);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  perspective: 1100px;
  perspective-origin: 50% 50%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /* soft fade at the far left and right */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.bn-ring__stage.is-dragging { cursor: grabbing; }
.bn-ring__spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.bn-ring__card {
  position: absolute;
  left: calc(var(--ring-card-w) / -2);
  top: calc(var(--ring-card-h) / -2);
  width: var(--ring-card-w);
  height: var(--ring-card-h);
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #2a2322;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.8);
  will-change: transform;
}
.bn-ring__card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* gentle sheen so the turning cards catch the light */
.bn-ring__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0.08), transparent 40%, rgba(0, 0, 0, 0.18)); pointer-events: none; }

.bn-ring__foot { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: clamp(1rem, 3vw, 2rem); }
.bn-ring__foot a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.6rem; border-radius: 999px;
  background: #7d1f1f; color: #fff; font-size: 0.98rem; font-weight: 500; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bn-ring__foot a:hover { background: #5d1614; transform: translateY(-2px); }
.bn-ring__foot svg { width: 1rem; height: 1rem; }
.bn-ring__hint { margin: 0.9rem 0 0; color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }

@media (max-width: 760px) {
  .bn-ring { --ring-card-w: 190px; --ring-card-h: 238px; }
  .bn-ring__stage { perspective: 700px; height: calc(var(--ring-card-h) + 70px); }
}

/* without JS or with reduced motion: a plain scrollable row */
.bn-ring.no-3d .bn-ring__stage { height: auto; perspective: none; cursor: auto; overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding: 0 1rem 1rem; }
.bn-ring.no-3d .bn-ring__spin { position: static; display: flex; gap: 14px; width: max-content; height: auto; transform: none; }
.bn-ring.no-3d .bn-ring__card { position: relative; left: auto; top: auto; transform: none !important; flex: 0 0 auto; }