.scd-spir {
  position: relative; width: 200px; height: 220px; margin: 0 auto;
  perspective: 700px;
  display: flex; align-items: center; justify-content: center;
}
.scd-spir__inner, .scd-spir {
  transform-style: preserve-3d;
}
.scd-spir::before {
  content: '';
  position: absolute; left: 50%; top: 14px; bottom: 14px;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent 0%, #3fd5a8 20%, #3fd5a8 80%, transparent 100%);
  opacity: 0.45;
}
.scd-spir__c {
  position: absolute; left: 50%; top: 50%;
  width: 70px; height: 38px; margin: -19px 0 0 -35px;
  background: linear-gradient(135deg, #0066cc 0%, #003d7a 100%);
  color: #3fd5a8;
  display: grid; place-items: center;
  font: 900 18px/1 ui-monospace, monospace;
  border-radius: 4px;
  border-left: 3px solid #3fd5a8;
  box-shadow: 0 4px 12px -4px rgba(0,102,204,0.5), inset 1px 0 0 rgba(255,255,255,0.12);
  backface-visibility: visible;
  transform-style: preserve-3d;
  animation: scd-spir-orbit 6s linear infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
@keyframes scd-spir-orbit {
  0%   { transform: translateY(70px)  rotateY(0deg)   translateZ(48px); }
  25%  { transform: translateY(35px)  rotateY(90deg)  translateZ(48px); }
  50%  { transform: translateY(0)     rotateY(180deg) translateZ(48px); }
  75%  { transform: translateY(-35px) rotateY(270deg) translateZ(48px); }
  100% { transform: translateY(-70px) rotateY(360deg) translateZ(48px); }
}
@media (prefers-reduced-motion: reduce) {
  .scd-spir__c { animation: none; transform: translateY(calc(var(--i) * -22px - 44px)) rotateY(calc(var(--i) * 36deg)) translateZ(48px); }
}