/* =========================================================
   DigitalShri – Magic Background FX
   Immersive background (particle network, glow orbs, faint grid, cursor
   spotlight) + "magic" burst on click. Brand colours only.

   Turn it on:
   - Elementor container: Style → "DigitalShri Magic Background" (adds .ds-magic-fx-yes)
   - Any HTML element: add class "ds-magic-fx" (optional "ds-mfx-tone-brand")
   The JS (ds-magic-fx.js) adds the .ds-mfx-layer inside the element.
   ========================================================= */

.ds-magic-fx,
.ds-magic-fx-yes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* content stays above the effect layer */
.ds-magic-fx-yes > :not(.ds-mfx-layer),
.ds-magic-fx > :not(.ds-mfx-layer) {
  position: relative;
  z-index: 2;
}

.ds-mfx-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  contain: layout paint; /* repaints stay inside the layer */
}
.ds-mfx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* glow orbs (brand violet / blue / orange) */
.ds-mfx-orb {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  will-change: transform, opacity;
}
.ds-mfx-orb-1 {
  top: -10%;
  left: 2%;
  width: 620px;
  height: 620px;
  /* soft edges come from the gradient itself – no filter: blur (too heavy to animate) */
  background: radial-gradient(circle, rgba(133, 28, 242, 0.34) 0%, rgba(133, 28, 242, 0.16) 30%, rgba(30, 81, 241, 0.08) 52%, rgba(133, 28, 242, 0) 70%);
  animation: dsMfxOrb1 14s infinite alternate ease-in-out;
}
.ds-mfx-orb-2 {
  right: 2%;
  bottom: -12%;
  width: 660px;
  height: 660px;
  background: radial-gradient(circle, rgba(30, 81, 241, 0.3) 0%, rgba(30, 81, 241, 0.14) 30%, rgba(243, 130, 24, 0.08) 52%, rgba(30, 81, 241, 0) 70%);
  animation: dsMfxOrb2 16s infinite alternate-reverse ease-in-out;
}
@keyframes dsMfxOrb1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50%  { transform: translate(40px, -20px) scale(1.1); opacity: 1; }
  100% { transform: translate(-20px, 30px) scale(0.9); opacity: 0.8; }
}
@keyframes dsMfxOrb2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50%  { transform: translate(-50px, -30px) scale(1.15); opacity: 1; }
  100% { transform: translate(20px, 20px) scale(0.95); opacity: 0.75; }
}

/* faint grid, fading out towards the edges */
.ds-mfx-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 85%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 85%, transparent 100%);
}

/* soft spotlight that follows the cursor (mouse devices only) */
.ds-mfx-spot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-400px, -400px, 0) translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(133, 28, 242, 0.22) 22%,
    rgba(133, 28, 242, 0.1) 45%,
    rgba(30, 81, 241, 0.04) 70%,
    rgba(30, 81, 241, 0) 90%);
  transition: opacity 0.35s ease;
  will-change: transform, opacity;
}
.ds-mfx-spot.is-visible { opacity: 0.75; }
.ds-mfx-spot.is-visible.is-over-text { opacity: 0.45; }

@media (max-width: 767px) {
  .ds-mfx-orb { width: 340px; height: 340px; opacity: 0.8; }
  .ds-mfx-grid { background-size: 28px 28px; }
  .ds-mfx-spot { display: none; }
}
@media (hover: none) {
  .ds-mfx-spot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-mfx-orb { animation: none; }
  .ds-mfx-spot, .ds-mfx-canvas { display: none; }
}