/* ==========================================================================
   Fortune Group — Laser Cut Products: parts on a turning 3D ring
   ========================================================================== */
.gf-ring {
  --r-ink: #1b1f24;
  --r-soft: #5a636d;
  --r-red: #d90a0a;
  --r-grad: linear-gradient(100deg, #ff3b2f 0%, #d90a0a 45%, #7e0606 100%);
  --r-font: "Archivo", "Manrope", system-ui, sans-serif;
  --card: 250px;
  --radius: 420px;
  position: relative;
  padding: clamp(80px, 9vw, 130px) 0 clamp(60px, 7vw, 100px);
  background:
    radial-gradient(60% 55% at 50% 62%, rgba(217, 10, 10, 0.10), rgba(217, 10, 10, 0) 70%),
    linear-gradient(180deg, #fff 0%, #eef1f4 100%);
  overflow: hidden;
  color: var(--r-ink);
}
.gf-ring::before { /* faint machinist grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(27, 31, 36, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 31, 36, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 60%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 60%, #000, transparent 75%);
}

/* header */
.gf-ring__head { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.gf-ring__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 600 15px/1 var(--r-font); color: var(--r-red); }
.gf-ring__eyebrow::before, .gf-ring__eyebrow::after { content: ""; width: 34px; height: 2px; background: var(--r-grad); }
.gf-ring__eyebrow::after { transform: scaleX(-1); }
.gf-ring .gf-ring__title {
  margin: 0 0 18px;
  font-family: var(--r-font); font-variation-settings: "wdth" 116; font-weight: 800;
  font-size: clamp(36px, 4.6vw, 70px); line-height: 1; letter-spacing: -0.03em;
  color: var(--r-ink); text-transform: none;
}
.gf-ring__text { margin: 0 auto; max-width: 56ch; font-size: 17px; line-height: 1.7; color: var(--r-soft); }

/* the 3D stage */
.gf-ring__scene {
  position: relative;
  height: calc(var(--card) * 1.9);
  margin-top: clamp(20px, 3vw, 40px);
  perspective: 1500px;
  perspective-origin: 50% 30%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.gf-ring__scene.is-dragging { cursor: grabbing; }
.gf-ring__tilt { position: absolute; left: 50%; top: 42%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-9deg); }
.gf-ring__spin { position: absolute; transform-style: preserve-3d; transform: rotateY(var(--angle, 0deg)); }
.gf-ring__item {
  position: absolute;
  left: calc(var(--card) / -2); top: calc(var(--card) / -2);
  width: var(--card); height: var(--card);
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transform: rotateY(calc(var(--i) * 36deg)) translateZ(var(--radius));
  box-shadow: 0 30px 50px -28px rgba(27, 31, 36, 0.55);
  filter: brightness(calc(0.55 + var(--face, 1) * 0.45)) saturate(calc(0.4 + var(--face, 1) * 0.6));
  -webkit-box-reflect: below 10px linear-gradient(transparent 65%, rgba(255, 255, 255, 0.35));
  transition: box-shadow 0.4s;
}
.gf-ring__item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gf-ring__item::after { /* thin red edge, brightest on the part facing you */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--r-grad); opacity: calc(var(--face, 0) * var(--face, 0));
}
.gf-ring__item.is-front { box-shadow: 0 40px 60px -28px rgba(217, 10, 10, 0.55); }

/* soft red glow and a polished floor disc under the ring */
.gf-ring__glow { position: absolute; left: 50%; top: 52%; width: 70%; height: 40%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(217, 10, 10, 0.16), rgba(217, 10, 10, 0)); filter: blur(10px); pointer-events: none; }
.gf-ring__floor {
  position: absolute; left: 50%; bottom: 4%;
  width: min(1100px, 92%); height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(27, 31, 36, 0.16), rgba(27, 31, 36, 0) 70%);
  pointer-events: none;
}

.gf-ring__hint { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; font: 600 14px/1 var(--r-font); color: var(--r-soft); }
.gf-ring__hint-icon { width: 34px; height: 2px; background: var(--r-grad); position: relative; }
.gf-ring__hint-icon::before, .gf-ring__hint-icon::after { content: ""; position: absolute; top: -3px; width: 6px; height: 6px; border-top: 2px solid var(--r-red); border-left: 2px solid var(--r-red); }
.gf-ring__hint-icon::before { left: -2px; transform: rotate(-45deg); }
.gf-ring__hint-icon::after { right: -2px; transform: rotate(135deg); }

@media (max-width: 991px) { .gf-ring { --card: 200px; --radius: 330px; } }
@media (max-width: 600px) {
  .gf-ring { --card: 150px; --radius: 240px; }
  .gf-ring__scene { perspective: 900px; }
  .gf-ring__item { -webkit-box-reflect: unset; border-radius: 12px; }
}
/* more breathing room under the ring */
.gf-ring { --card: 230px; --radius: 440px; }
.gf-ring__scene { height: calc(var(--card) * 2.35); }
.gf-ring__tilt { top: 40%; }
@media (max-width: 991px) { .gf-ring { --card: 190px; --radius: 340px; } }
@media (max-width: 600px) { .gf-ring { --card: 140px; --radius: 240px; } .gf-ring__scene { height: calc(var(--card) * 2.6); } }