/* Social orbit hero — replaces the old social icon cluster.
   Icon sizes match the previous site: 68px desktop, 62px tablet, 58px mobile.
   Hero height is unchanged (420 / 350 / 325px), the orbit is centred inside it. */
.hero-art .so-orbit {
  --icon: 68px;
  --dia: 400px;
  --r: 160px;
  --ring: 36s;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, var(--dia));
  aspect-ratio: 1 / 1;
  z-index: 3;
  pointer-events: auto;
}
.hero-art .so-orbit::before {
  content: "";
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.42) 0%, rgba(196,181,253,.18) 45%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  animation: so-breathe 6s ease-in-out infinite;
}
@keyframes so-breathe { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }

.hero-art .so-ring {
  position: absolute; inset: 0;
  animation: so-spin var(--ring) linear infinite;
}
.hero-art .so-orbit:hover .so-ring { animation-play-state: paused; }

.hero-art .so-links {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.hero-art .so-links .so-link {
  fill: none; stroke: #a855f7; stroke-opacity: .6; stroke-width: 1.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(168,85,247,.55));
  animation: so-pulse 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * .3s);
}
.hero-art .so-links .so-flow {
  fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: 1.2 9;
  animation: so-flow 1.6s linear infinite;
  animation-delay: calc(var(--i) * -.2s);
}
@keyframes so-pulse { 0%,100% { stroke-opacity: .35; } 50% { stroke-opacity: .8; } }
@keyframes so-flow  { to { stroke-dashoffset: -10.2; } }

.hero-art .so-slot {
  position: absolute; inset: 0;
  transform: rotate(var(--a));
}
.hero-art .so-icon {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--icon); height: var(--icon);
  margin: calc(var(--icon) / -2) 0 0 calc(var(--icon) / -2);
  transform: translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}
.hero-art .so-spin {
  width: 100%; height: 100%;
  animation: so-counter var(--ring) linear infinite;
}
.hero-art .so-pop {
  width: 100%; height: 100%;
  animation:
    so-enter .6s cubic-bezier(.2,1.4,.4,1) both calc(var(--i) * .12s),
    so-wave 3s ease-in-out infinite calc(1.2s + var(--i) * .3s);
}
.hero-art .so-pop img {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 8px 14px rgba(76,29,149,.25)) drop-shadow(0 2px 4px rgba(76,29,149,.18));
}

/* centre card */
.hero-art .so-center {
  position: absolute;
  left: 50%; top: 50%;
  width: 34%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid transparent;
  background-image:
    radial-gradient(circle at 30% 22%, #ffffff 0%, #f7f3ff 42%, #e6dbff 100%),
    linear-gradient(135deg, #7c3aed, #ec4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 0 8px rgba(255,255,255,.55), 0 18px 44px rgba(124,58,237,.38), inset 0 -10px 24px rgba(236,72,153,.10);
  z-index: 2;
}
.hero-art .so-center::before {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: so-sheen 5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.hero-art .so-center::after {
  content: "";
  position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid rgba(168,85,247,.35);
  animation: so-ripple 3s ease-out infinite;
  pointer-events: none;
}
.hero-art .so-tag {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  opacity: 0;
  animation: so-cycle 12s infinite;
  animation-delay: calc(var(--i) * 2s);
}
.hero-art .so-tag svg { width: 30px; height: 30px; }
.hero-art .so-tag b {
  font-size: 14px; font-weight: 800; line-height: 1.1;
  background: linear-gradient(90deg, #4338ca, #db2777);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-art .so-tag small { font-size: 12px; color: #7c6f9a; font-weight: 500; }

@keyframes so-spin    { to { transform: rotate(360deg); } }
@keyframes so-counter { to { transform: rotate(-360deg); } }
@keyframes so-enter {
  from { opacity: 0; transform: scale(0) rotate(-120deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes so-wave {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.22); }
  16%      { transform: scale(1); }
}
@keyframes so-ripple {
  0%   { transform: scale(.92); opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes so-sheen {
  0%   { background-position: 120% 0; }
  60%, 100% { background-position: -60% 0; }
}
@keyframes so-cycle {
  0%   { opacity: 0; transform: translateY(14px) scale(.9); }
  5%   { opacity: 1; transform: translateY(0) scale(1); }
  14%  { opacity: 1; transform: translateY(0) scale(1); }
  19%  { opacity: 0; transform: translateY(-14px) scale(.9); }
  100% { opacity: 0; }
}

/* responsive: same icon sizes as the old cluster */
@media (max-width: 900px) {
  .hero-art .so-orbit { --icon: 62px; --dia: 330px; --r: 128px; }
  .hero-art .so-tag b { font-size: 13px; }
}
@media (max-width: 560px) {
  .hero-art .so-orbit { --icon: 58px; --dia: 320px; --r: 124px; }
  .hero-art .so-center { width: 36%; }
  .hero-art .so-tag b { font-size: 12px; }
  .hero-art .so-tag small { font-size: 11px; }
  .hero-art .so-tag svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .so-ring, .hero-art .so-spin, .hero-art .so-pop,
  .hero-art .so-links .so-link, .hero-art .so-links .so-flow,
  .hero-art .so-tag, .hero-art .so-center::before, .hero-art .so-center::after,
  .hero-art .so-orbit::before { animation: none !important; }
  .hero-art .so-tag:first-child { opacity: 1; }
}