/**
 * Orbiting Circles Animation - CSS Styles
 * WordPress Compatible
 */

/* Container styles */
.orbiting-circles-container {
  position: relative;
  max-width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Transparent background support */
.orbiting-circles-container.transparent-bg {
  background: transparent !important;
}

/* Gradient overlays - only show when with-gradient class is present */
.orbiting-circles-container.with-gradient::before,
.orbiting-circles-container.with-gradient::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 20;
}

.orbiting-circles-container.with-gradient::before {
  top: 0;
  background: linear-gradient(to bottom, var(--background-color, #ffffff) 0%, transparent 100%);
}

.orbiting-circles-container.with-gradient::after {
  bottom: 0;
  background: linear-gradient(to top, var(--background-color, #ffffff) 0%, transparent 100%);
}

/* Hide gradients on transparent backgrounds */
.orbiting-circles-container.transparent-bg.with-gradient::before,
.orbiting-circles-container.transparent-bg.with-gradient::after {
  display: none;
}

/* Dark mode support */
.dark .orbiting-circles-container.with-gradient::before {
  background: linear-gradient(to bottom, var(--background-color, #000000) 0%, transparent 100%);
}

.dark .orbiting-circles-container.with-gradient::after {
  background: linear-gradient(to top, var(--background-color, #000000) 0%, transparent 100%);
}

/* Orbit path */
.orbit-path {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dark .orbit-path {
  border-color: rgba(249, 250, 251, 0.07) !important;
  background: linear-gradient(to bottom, rgba(249, 250, 251, 0.03) 0%, transparent 54.76%) !important;
}

/* Orbit animation keyframes */
@keyframes orbit {
  0% {
    transform: rotate(calc(var(--angle) * 1deg))
      translateY(calc(var(--radius) * 1px))
      rotate(calc(var(--angle) * -1deg));
  }
  100% {
    transform: rotate(calc(var(--angle) * 1deg + 360deg))
      translateY(calc(var(--radius) * 1px))
      rotate(calc((var(--angle) * -1deg) - 360deg));
  }
}

/* Orbiting icons */
.orbit-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  z-index: 20;
}

.orbit-icon.orbiting {
  animation: orbit calc(var(--duration) * 1s) linear infinite;
}

.orbit-icon.reverse {
  animation-direction: reverse;
}

/* Center logo */
.orbit-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: var(--secondary-color, #7a0a58);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(122, 10, 88, 0.5);
  z-index: 30;
  color: white;
}

/* Icon styling */
.orbit-icon img,
.orbit-icon svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .orbiting-circles-container {
    /* height: 400px;*/
  }
  
  .orbit-center {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .orbiting-circles-container {
    height: 350px;
    width: 300px;
    overflow: visible;
  }
  
  .orbit-center {
    width: 40px;
    height: 40px;
  }
}

/* Loading state */
.orbiting-circles-container.loading {
  opacity: 0.5;
}

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}