/* ══════════════════════════════════════════════
   Showcase: Orbital Tech Stack — Circular Rings
   ══════════════════════════════════════════════ */
.showcase-section {
  margin: 0 auto;
  padding: 60px 0 80px;
  text-align: center;
  max-width: 900px;
}

.showcase-label {
  font-family: "Share Tech Mono", monospace;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ll-amber);
  margin-bottom: 3rem;
  filter: drop-shadow(0 0 8px rgba(255, 180, 0, 0.3));
}

/* ── Container ── */
.orbit-container {
  position: relative;
  width: 640px;
  height: 640px;
  margin: 0 auto;
  --r1: 130px;
  --r2: 220px;
  --r3: 300px;
}

/* Centre glow + icon */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 0, 0.25) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.orbit-center-icon {
  width: 42px;
  height: 42px;
  color: var(--ll-gold);
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.6));
}

/* ── Ring wrappers (spinning circles) ── */
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 2px solid rgba(255, 180, 0, 0.3);
}

.orbit-ring--1 {
  width: calc(var(--r1) * 2);
  height: calc(var(--r1) * 2);
  margin-left: calc(var(--r1) * -1);
  margin-top: calc(var(--r1) * -1);
  animation: orbit-spin 20s linear infinite;
  border-color: rgba(255, 180, 0, 0.4);
}

.orbit-ring--2 {
  width: calc(var(--r2) * 2);
  height: calc(var(--r2) * 2);
  margin-left: calc(var(--r2) * -1);
  margin-top: calc(var(--r2) * -1);
  animation: orbit-spin 35s linear infinite reverse;
  border-color: rgba(120, 100, 255, 0.35);
}

.orbit-ring--3 {
  width: calc(var(--r3) * 2);
  height: calc(var(--r3) * 2);
  margin-left: calc(var(--r3) * -1);
  margin-top: calc(var(--r3) * -1);
  animation: orbit-spin 50s linear infinite;
  border-color: rgba(255, 100, 100, 0.3);
}

/* ── Orbiting nodes — icon only, no background ── */
.orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  --angle: calc(360deg / var(--total) * var(--i));
}

.orbit-ring--1 .orbit-node {
  transform: rotate(var(--angle)) translateX(var(--r1)) rotate(calc(-1 * var(--angle)));
  animation: counter-spin-1 20s linear infinite;
}

.orbit-ring--2 .orbit-node {
  transform: rotate(var(--angle)) translateX(var(--r2)) rotate(calc(-1 * var(--angle)));
  animation: counter-spin-2 35s linear infinite;
}

.orbit-ring--3 .orbit-node {
  transform: rotate(var(--angle)) translateX(var(--r3)) rotate(calc(-1 * var(--angle)));
  animation: counter-spin-3 50s linear infinite;
}

.orbit-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  transition: filter 0.2s;
}

.orbit-node:hover .orbit-img {
  filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.4));
}

/* ── Decorative glow rings ── */
.orbit-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.orbit-glow--1 {
  width: calc(var(--r1) * 2);
  height: calc(var(--r1) * 2);
  margin-left: calc(var(--r1) * -1);
  margin-top: calc(var(--r1) * -1);
  box-shadow: 0 0 40px rgba(255, 180, 0, 0.25), inset 0 0 40px rgba(255, 180, 0, 0.18);
}

.orbit-glow--2 {
  width: calc(var(--r2) * 2);
  height: calc(var(--r2) * 2);
  margin-left: calc(var(--r2) * -1);
  margin-top: calc(var(--r2) * -1);
  box-shadow: 0 0 45px rgba(120, 100, 255, 0.22), inset 0 0 45px rgba(120, 100, 255, 0.15);
}

.orbit-glow--3 {
  width: calc(var(--r3) * 2);
  height: calc(var(--r3) * 2);
  margin-left: calc(var(--r3) * -1);
  margin-top: calc(var(--r3) * -1);
  box-shadow: 0 0 50px rgba(255, 100, 100, 0.18), inset 0 0 50px rgba(255, 100, 100, 0.12);
}

/* ── Spin + counter-spin ── */
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes counter-spin-1 {
  from { transform: rotate(var(--angle)) translateX(var(--r1)) rotate(calc(-1 * var(--angle) + 0deg)); }
  to   { transform: rotate(var(--angle)) translateX(var(--r1)) rotate(calc(-1 * var(--angle) - 360deg)); }
}

@keyframes counter-spin-2 {
  from { transform: rotate(var(--angle)) translateX(var(--r2)) rotate(calc(-1 * var(--angle) - 0deg)); }
  to   { transform: rotate(var(--angle)) translateX(var(--r2)) rotate(calc(-1 * var(--angle) + 360deg)); }
}

@keyframes counter-spin-3 {
  from { transform: rotate(var(--angle)) translateX(var(--r3)) rotate(calc(-1 * var(--angle) + 0deg)); }
  to   { transform: rotate(var(--angle)) translateX(var(--r3)) rotate(calc(-1 * var(--angle) - 360deg)); }
}

/* ── Centre pulse ── */
.orbit-center::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 0, 0.1) 0%, transparent 70%);
  animation: center-pulse 3s ease-in-out infinite alternate;
}

@keyframes center-pulse {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 0.8; }
}