.clx-orb-wrap{
  position:relative;
  width:var(--orb-size,520px);
  height:var(--orb-size,520px);
  display:flex;align-items:center;justify-content:center;
  margin-inline:auto;
  pointer-events:none;
}

.clx-orb{
  position:relative;
  width:100%;height:100%;
  border-radius:50%;
  animation:clxOrbBreathe 4s ease-in-out infinite;
  filter:drop-shadow(0 0 12% rgba(250,73,0,.25));
  will-change:transform;
}
.clx-orb svg{width:100%;height:100%;display:block}

.clx-orb__drift{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(
    circle at 38% 40%,
    rgba(255,220,160,.85) 0%,
    rgba(255,179,71,.55) 22%,
    rgba(245,126,7,.25)  48%,
    rgba(250,73,0,0)     72%
  );
  mix-blend-mode:screen;
  animation:clxOrbDrift 11s ease-in-out infinite;
  will-change:transform;
}

.clx-orb__ring{
  position:absolute;left:50%;top:50%;
  width:100%;height:100%;margin-left:-50%;margin-top:-50%;
  border-radius:50%;
  border:1px solid rgba(245,126,7,.5);
  opacity:0;
  animation:clxOrbRing 9s cubic-bezier(.45,.05,.3,1) infinite;
  will-change:transform,opacity;
}
.clx-orb__ring--2{animation-delay:3s;border-color:rgba(239,78,7,.45)}
.clx-orb__ring--3{animation-delay:6s;border-color:rgba(255,179,71,.55)}

@keyframes clxOrbBreathe{
  0%,100%{transform:scale(.95)}
  50%    {transform:scale(1.05)}
}
@keyframes clxOrbDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  25%    {transform:translate(-4%,2.5%) scale(1.06)}
  50%    {transform:translate(3.5%,-4%) scale(.96)}
  75%    {transform:translate(-1.5%,4.5%) scale(1.03)}
}
@keyframes clxOrbRing{
  0%  {transform:scale(1);opacity:0}
  15% {opacity:.55}
  60% {opacity:.15}
  100%{transform:scale(1.4);opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .clx-orb,
  .clx-orb__drift,
  .clx-orb__ring{animation:none !important}
  .clx-orb__ring{opacity:.2}
  .clx-orb__ring--2,
  .clx-orb__ring--3{display:none}
}

/* Responsive shrink */
@media (max-width:768px){
  .clx-orb-wrap{width:min(var(--orb-size,520px),76vw);height:min(var(--orb-size,520px),76vw)}
}