.opzio-logo-orbit,
.opzio-logo-orbit * {
  box-sizing: border-box;
}

.opzio-logo-orbit {
  --opzio-design-width: 560px;
  --opzio-design-height: 550px;
  --opzio-fluid-gap: 24px;
  --opzio-fluid-scale: min(
    1,
    calc((100vw - (var(--opzio-fluid-gap) * 2)) / var(--opzio-design-width))
  );

  position: relative;
  width: 100%;
  height: calc(var(--opzio-design-height) * var(--opzio-fluid-scale));
  min-height: calc(var(--opzio-design-height) * var(--opzio-fluid-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
  isolation: isolate;
}

.opzio-logo-orbit__stage {
  position: relative;
  width: var(--opzio-design-width);
  height: var(--opzio-design-height);
  min-width: var(--opzio-design-width);
  min-height: var(--opzio-design-height);
  transform: scale(var(--opzio-fluid-scale));
  transform-origin: center center;
}

.opzio-logo-orbit__glow {
  position: absolute;
  inset: 14%;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(255, 86, 56, 0.22),
    rgba(255, 86, 56, 0.05) 34%,
    transparent 66%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.opzio-logo-orbit__center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  border-radius: 50%;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  will-change: transform, box-shadow;
}

.opzio-logo-orbit__center:hover {
  transform: translate(-50%, -50%) scale(1.07) rotate(3deg);
}

.opzio-logo-orbit__center img {
  display: block;
  height: auto;
  object-fit: contain;
}

.opzio-logo-orbit__center-fallback {
  line-height: 1;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}

.opzio-logo-orbit__fallback-hidden {
  display: none;
}

.has-center-pulse .opzio-logo-orbit__center {
  animation: opzCenterPulse 3s ease-in-out infinite;
}

.opzio-logo-orbit__rotator {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-origin: center;
}

.has-orbit-rotation .opzio-logo-orbit__rotator {
  animation: opzOrbitRotate var(--opzio-orbit-speed, 34s) linear infinite;
  animation-direction: var(--opzio-orbit-direction, normal);
}

.opzio-logo-orbit__item {
  position: absolute;
  left: calc(50% + var(--item-x) - (var(--item-size) / 2));
  top: calc(50% + var(--item-y) - (var(--item-size) / 2));
  width: var(--item-size);
  height: var(--item-size);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  display: block;
  z-index: 4;
  transition: opacity 0.25s ease;
  will-change: transform, opacity;
}

.opzio-logo-orbit__item-counter,
.opzio-logo-orbit__item-inner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.has-orbit-rotation .opzio-logo-orbit__item-counter {
  animation: opzOrbitCounter var(--opzio-orbit-speed, 34s) linear infinite;
  animation-direction: var(--opzio-orbit-direction, normal);
}

.opzio-logo-orbit__item-inner {
  position: relative;
  transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  will-change: transform;
}

.has-float .opzio-logo-orbit__item-inner {
  animation: opzFloat var(--opzio-float-speed, 4s) ease-in-out infinite;
  animation-delay: var(--item-delay, 0s);
}

.has-hover-lift .opzio-logo-orbit__item:hover .opzio-logo-orbit__item-inner {
  transform: translateY(calc(var(--opzio-hover-lift, 14px) * -1)) scale(var(--opzio-hover-scale, 1.1));
  box-shadow: 0 24px 70px rgba(255, 86, 56, 0.38);
}

.has-hover-dim:hover .opzio-logo-orbit__item {
  opacity: var(--opzio-dim-opacity, 0.38);
}

.has-hover-dim:hover .opzio-logo-orbit__item:hover {
  opacity: 1;
}

.opzio-logo-orbit__item-inner img {
  display: block;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.opzio-logo-orbit__item-fallback {
  line-height: 1;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}

.opzio-logo-orbit__label {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%) translateY(8px) scale(0.94);
  opacity: 0;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.has-labels .opzio-logo-orbit__item:hover .opzio-logo-orbit__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.opzio-logo-orbit__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.opzio-logo-orbit__line {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  transform-origin: left center;
  background: repeating-linear-gradient(
    90deg,
    var(--opzio-line-color, rgba(255, 255, 255, 0.14)) 0 6px,
    transparent 6px 16px
  );
  opacity: 0.9;
}

.has-lines-animation .opzio-logo-orbit__line {
  animation: opzDashGlow 2.4s linear infinite;
}

.pause-on-hover:hover .opzio-logo-orbit__rotator,
.pause-on-hover:hover .opzio-logo-orbit__item-counter,
.pause-on-hover:hover .opzio-logo-orbit__item-inner,
.pause-on-hover:hover .opzio-logo-orbit__center,
.pause-on-hover:hover .opzio-logo-orbit__line {
  animation-play-state: paused;
}

.opzio-logo-orbit__center,
.opzio-logo-orbit__item,
.opzio-logo-orbit__line {
  backface-visibility: hidden;
}

@keyframes opzOrbitRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes opzOrbitCounter {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes opzFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 calc(var(--opzio-float-amount, 10px) * -1);
  }
}

@keyframes opzCenterPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(255, 86, 56, 0.28));
  }

  50% {
    filter: drop-shadow(0 0 55px rgba(255, 86, 56, 0.58));
  }
}

@keyframes opzDashGlow {
  0% {
    opacity: 0.18;
    filter: brightness(1);
  }

  50% {
    opacity: 0.48;
    filter: brightness(1.4);
  }

  100% {
    opacity: 0.18;
    filter: brightness(1);
  }
}

@media (max-width: 1199px) {
  .opzio-logo-orbit__center {
    width: 150px;
    height: 150PX;
  }
  .opzio-logo-orbit__item {
    left: calc(50% + var(--item-x) - (var(--item-size) / 2));
    top: calc(50% + var(--item-y) - (var(--item-size) / 2));
    width: calc(var(--item-size) - 10px);
    height: calc(var(--item-size) - 10px);
  }
}

@media (max-width: 1024px) {
  .opzio-logo-orbit {
    --opzio-fluid-gap: 20px;
  }
}

@media (max-width: 767px) {
  .opzio-logo-orbit {
    --opzio-fluid-gap: 10px;
  }

  .opzio-logo-orbit__label {
    bottom: -32px;
    font-size: 11px;
    padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .opzio-logo-orbit {
    --opzio-fluid-gap: 8px;
  }

  .has-hover-lift .opzio-logo-orbit__item:hover .opzio-logo-orbit__item-inner {
    transform: translateY(calc(var(--opzio-hover-lift, 10px) * -0.55)) scale(min(var(--opzio-hover-scale, 1.06), 1.06));
  }
}

@media (prefers-reduced-motion: reduce) {
  .opzio-logo-orbit *,
  .opzio-logo-orbit *::before,
  .opzio-logo-orbit *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}
