/*
 * The JS wraps ONLY the .outer-circle elements inside div.ld-orbit-ring
 * (position:absolute inset:0 inside .circle-area).
 * The center circle and background image stay outside — they never move.
 * The orbit ring rotates; the inner widget of each circle counter-rotates
 * at the same speed so the labels stay perfectly upright.
 */

.circle-area {
  position: relative;
}

/* ---- The rotating wrapper (JS-injected) ---- */
.ld-orbit-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: ldOrbit 44s linear infinite;
}

/* Allow mouse / touch on the actual bubbles */
.ld-orbit-ring .outer-circle {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

/* Counter-rotate each bubble's direct child so labels stay upright.
   !important ensures Elementor entrance animations cannot override this. */
.ld-orbit-ring .outer-circle > * {
  animation: ldCounterOrbit 44s linear infinite !important;
}

@keyframes ldOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ldCounterOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ---- Hover glow ---- */
.ld-orbit-ring .outer-circle:hover > * {
  filter: brightness(1.35)
          drop-shadow(0 0 12px rgba(0,212,255,0.7))
          drop-shadow(0 0 24px rgba(74,108,247,0.35));
  transition: filter 0.35s ease;
}

/* ---- Click: ripple rings ---- */
.ld-ripple {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,212,255,0.9);
  pointer-events: none;
  z-index: 10;
  animation: ldRippleOut 0.75s cubic-bezier(0.22,1,0.36,1) forwards;
}
.ld-ripple-b {
  border-color: rgba(74,108,247,0.7);
  animation-delay: 0.13s;
}
@keyframes ldRippleOut {
  from { transform: scale(1);   opacity: 0.9; }
  to   { transform: scale(2.4); opacity: 0;   }
}

/* ---- Click: filter glow on the widget (combines with counter-orbit) ---- */
@keyframes ldItemGlow {
  0%   { filter: brightness(1)   drop-shadow(0 0  0px rgba(0,212,255,0)); }
  35%  { filter: brightness(1.65)
           drop-shadow(0 0 18px rgba(0,212,255,0.95))
           drop-shadow(0 0 34px rgba(74,108,247,0.55)); }
  100% { filter: brightness(1)   drop-shadow(0 0  0px rgba(0,212,255,0)); }
}
.ld-orbit-ring .outer-circle.ld-active > * {
  animation: ldCounterOrbit 44s linear infinite, ldItemGlow 0.8s ease-out !important;
}

/* ---- Center circle — completely static, click only ---- */
.center-circle {
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
}
.center-circle .ld-ripple {
  inset: -8px;
}

@keyframes ldCenterZoom {
  0%   { transform: scale(1);    filter: brightness(1); }
  42%  { transform: scale(1.1);  filter: brightness(1.35)
           drop-shadow(0 0 22px rgba(0,212,255,0.85)); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.center-circle.ld-center-active > * {
  animation: ldCenterZoom 0.9s cubic-bezier(0.34,1.3,0.64,1) !important;
}

@keyframes ldCenterRingGlow {
  0%   { filter: brightness(1)   drop-shadow(0 0  0px rgba(0,212,255,0)); }
  40%  { filter: brightness(1.25)
           drop-shadow(0 0 30px rgba(0,212,255,0.75))
           drop-shadow(0 0 65px rgba(74,108,247,0.4)); }
  100% { filter: brightness(1)   drop-shadow(0 0  0px rgba(0,212,255,0)); }
}
.center-circle.ld-center-active {
  animation: ldCenterRingGlow 0.9s ease-out !important;
}

/* ================================================================
   SVG STROKE-DRAW ANIMATION — luxury "draw on scroll" effect
   Applied to all icon SVGs inside .reveal-repeat containers.
   JS sets stroke-dasharray + stroke-dashoffset per path, then
   transitions dashoffset → 0 when the container enters the viewport,
   and resets on exit so it replays on every scroll-in.
================================================================ */

/* Paths start invisible (dashoffset = full length, set by JS) */
.ld-svg-icon path,
.ld-svg-icon circle,
.ld-svg-icon line,
.ld-svg-icon rect,
.ld-svg-icon ellipse,
.ld-svg-icon polyline {
  will-change: stroke-dashoffset;
}

/* While drawing: a live cyan/blue glow trails the pen */
.ld-svg-icon.ld-drawing {
  filter: drop-shadow(0 0 5px rgba(0,212,255,0.75))
          drop-shadow(0 0 12px rgba(74,108,247,0.45));
  transition: filter 0.35s ease;
}

/* After drawing completes: very subtle residual glow, then fades */
.ld-svg-icon.ld-drawn {
  filter: drop-shadow(0 0 3px rgba(0,212,255,0.18));
  transition: filter 2.2s ease;
}