/* =========================================================
   Team · Orbital Dance — Counter-Rotation
   Vanilla CSS · No dependencies · Continuous rotation
   Inner ring spins clockwise, outer ring counter-clockwise.
   ========================================================= */

.team-stage {
  --team-bg: transparent;
  --team-ink: #036c4d;

  width: 100%;
  aspect-ratio: 683 / 476;
  background: var(--team-bg);
  position: relative;
  overflow: hidden;
}

.team-stage svg {
  display: block;
  width: 100%;
  height: 100%;
}

.team-guide-ring {
  fill: none;
  stroke: var(--team-ink);
  stroke-width: 0.6;
  stroke-dasharray: 2 4;
  opacity: 0.3;
}

.team-member {
  fill: var(--team-ink);
}

.team-orbit-inner {
  transform-origin: 341.5px 238px;
  animation: team-rotate-cw 16s linear infinite;
}

.team-orbit-outer {
  transform-origin: 341.5px 238px;
  animation: team-rotate-ccw 24s linear infinite;
}

@keyframes team-rotate-cw {
  from { transform: rotate(0deg);   transform-origin: 341.5px 238px; }
  to   { transform: rotate(360deg); transform-origin: 341.5px 238px; }
}

@keyframes team-rotate-ccw {
  from { transform: rotate(0deg);    transform-origin: 341.5px 238px; }
  to   { transform: rotate(-360deg); transform-origin: 341.5px 238px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-orbit-inner,
  .team-orbit-outer {
    animation: none;
  }
}