Orbital Particle Animation

.orbital-container {
  width: 300px;
  height: 300px;
  perspective: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbital-core {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6b81 0%, #ff4757 100%);
  box-shadow: 0 0 30px rgba(255, 71, 87, 0.8);
  position: relative;
  animation: core-pulse 2s infinite ease-in-out;
}
.orbital-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  border: 2px solid rgba(108, 99, 255, 0.5);
  border-radius: 50%;
  animation: orbit 10s linear infinite;
}
.orbital-ring-1 {
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  animation-duration: 8s;
}
.orbital-ring-2 {
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  animation-duration: 12s;
  animation-direction: reverse;
  border-color: rgba(0, 242, 96, 0.5);
}
.orbital-particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #70a1ff;
  top: -6px;
  left: 50%;
  margin-left: -6px;
  box-shadow: 0 0 15px rgba(112, 161, 255, 0.8);
}
.orbital-ring-2 .orbital-particle {
  background: #2ed573;
  box-shadow: 0 0 15px rgba(46, 213, 115, 0.8);
}
@keyframes orbit {
  0% { transform: rotateZ(0deg) rotateX(60deg); }
  100% { transform: rotateZ(360deg) rotateX(60deg); }
}
@keyframes core-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 71, 87, 0.8); }
  50% { transform: scale(1.1); box-shadow: 0 0 40px rgba(255, 71, 87, 1); }
}