/* ==========================================================
   AURA SVG GLOW
   Cursor-following glow around visible SVG pixels
========================================================== */


/* ==========================================================
   1. SVG BLOCK
========================================================== */

.aura-svg-glow {
  position: relative;
  isolation: isolate;
  overflow: visible !important;

  /* Updated automatically by JavaScript */
  --aura-svg-glow-x: 50%;
  --aura-svg-glow-y: 50%;

  --aura-svg-left: 0px;
  --aura-svg-top: 0px;
  --aura-svg-width: 100px;
  --aura-svg-height: 100px;

  /*
   * MAIN CUSTOMIZATION
   */
  --aura-svg-glow-size: 120px;
  --aura-svg-glow-bleed: 100px;

  --aura-svg-glow-primary: #ffffff;
  --aura-svg-glow-secondary: #dedede;

  --aura-svg-glow-near: 4px;
  --aura-svg-glow-medium: 12px;
  --aura-svg-glow-far: 28px;
  --aura-svg-glow-wide: 48px;
}


/* ==========================================================
   2. ORIGINAL SVG
========================================================== */

.aura-svg-glow__source {
  position: relative;
  z-index: 1;
}


/* ==========================================================
   3. GENERATED GLOW LAYER
========================================================== */

.aura-svg-glow__layer {
  position: absolute;

  left: calc(
    var(--aura-svg-left) -
    var(--aura-svg-glow-bleed)
  );

  top: calc(
    var(--aura-svg-top) -
    var(--aura-svg-glow-bleed)
  );

  width: calc(
    var(--aura-svg-width) +
    (var(--aura-svg-glow-bleed) * 2)
  );

  height: calc(
    var(--aura-svg-height) +
    (var(--aura-svg-glow-bleed) * 2)
  );

  padding: var(--aura-svg-glow-bleed);
  box-sizing: border-box;

  z-index: 2;
  overflow: visible !important;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  transition: opacity 180ms ease;

  /*
   * drop-shadow follows the SVG transparency,
   * not the rectangular element boundary.
   */
  filter:
    drop-shadow(
      0 0 var(--aura-svg-glow-near)
      var(--aura-svg-glow-primary)
    )
    drop-shadow(
      0 0 var(--aura-svg-glow-medium)
      var(--aura-svg-glow-primary)
    )
    drop-shadow(
      0 0 var(--aura-svg-glow-far)
      var(--aura-svg-glow-secondary)
    )
    drop-shadow(
      0 0 var(--aura-svg-glow-wide)
      var(--aura-svg-glow-secondary)
    );

  /*
   * Restrict the visible glow to a circle
   * around the cursor.
   */
  -webkit-mask-image: radial-gradient(
    circle var(--aura-svg-glow-size)
    at var(--aura-svg-glow-x) var(--aura-svg-glow-y),

    #000 0%,
    #000 20%,
    rgba(0, 0, 0, 0.92) 38%,
    rgba(0, 0, 0, 0.65) 58%,
    rgba(0, 0, 0, 0.25) 78%,
    transparent 100%
  );

  mask-image: radial-gradient(
    circle var(--aura-svg-glow-size)
    at var(--aura-svg-glow-x) var(--aura-svg-glow-y),

    #000 0%,
    #000 20%,
    rgba(0, 0, 0, 0.92) 38%,
    rgba(0, 0, 0, 0.65) 58%,
    rgba(0, 0, 0, 0.25) 78%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* The generated SVG copy */
.aura-svg-glow__layer > svg,
.aura-svg-glow__layer > img {
  display: block;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: fill;

  pointer-events: none !important;
  user-select: none !important;
}


/* ==========================================================
   4. ACTIVE STATE
========================================================== */

.aura-svg-glow.is-aura-svg-glow-active
.aura-svg-glow__layer {
  opacity: 1;
}


/* ==========================================================
   5. COLOR PRESETS
========================================================== */

.aura-svg-glow--white {
  --aura-svg-glow-primary: #ffffff;
  --aura-svg-glow-secondary: #dedede;
}

.aura-svg-glow--mint {
  --aura-svg-glow-primary: #00dfca;
  --aura-svg-glow-secondary: #a4fff4;
}

.aura-svg-glow--pink {
  --aura-svg-glow-primary: #ff3f7f;
  --aura-svg-glow-secondary: #ff99c0;
}

.aura-svg-glow--purple {
  --aura-svg-glow-primary: #8c00ff;
  --aura-svg-glow-secondary: #d1a1ff;
}

.aura-svg-glow--ice {
  --aura-svg-glow-primary: #a7f1ff;
  --aura-svg-glow-secondary: #8df2ff;
}


/* ==========================================================
   6. CIRCLE SIZE PRESETS
========================================================== */

.aura-svg-glow--tiny {
  --aura-svg-glow-size: 55px;
}

.aura-svg-glow--small {
  --aura-svg-glow-size: 85px;
}

.aura-svg-glow--medium {
  --aura-svg-glow-size: 120px;
}

.aura-svg-glow--large {
  --aura-svg-glow-size: 170px;
}

.aura-svg-glow--huge {
  --aura-svg-glow-size: 230px;
}


/* ==========================================================
   7. STRENGTH PRESETS
========================================================== */

.aura-svg-glow--soft {
  --aura-svg-glow-near: 1px;
  --aura-svg-glow-medium: 10px;
  --aura-svg-glow-far: 36px;
  --aura-svg-glow-wide: 65px;
}

.aura-svg-glow--strong {
  --aura-svg-glow-near: 5px;
  --aura-svg-glow-medium: 16px;
  --aura-svg-glow-far: 36px;
  --aura-svg-glow-wide: 65px;
}


/* ==========================================================
   8. SPECTRA OVERFLOW FIX
========================================================== */

/*
 * Add this class to the nearest parent container
 * if the glow is still clipped:
 *
 * aura-svg-glow-overflow
 */

.aura-svg-glow-overflow,
.aura-svg-glow-overflow
> .uagb-container-inner-blocks-wrap,
.aura-svg-glow-overflow
> .wp-block-uagb-container__inner-wrap {
  overflow: visible !important;
}


/* ==========================================================
   9. TOUCH DEVICES
========================================================== */

@media (hover: none), (pointer: coarse) {
  .aura-svg-glow__layer {
    display: none !important;
  }
}


/* ==========================================================
   10. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .aura-svg-glow__layer {
    transition: none;
  }
}