/* ==========================================================
   AURA TEXT GLOW
   Cursor-following glow around the actual text outlines
========================================================== */


/* ==========================================================
   1. BASE TEXT ELEMENT
========================================================== */

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

  /*
   * Cursor position.
   * These values are updated automatically by the JavaScript.
   */
  --aura-text-glow-x: 50%;
  --aura-text-glow-y: 50%;

  /*
   * Main customization controls.
   */
  --aura-text-glow-size: 110px;
  --aura-text-glow-bleed: 100px;
  --aura-text-glow-stroke: 1px;

  /*
   * Glow colors.
   */
  --aura-text-glow-primary: #ffffff;
  --aura-text-glow-secondary: #dedede38;

  /*
   * Glow strength.
   */
  --aura-text-glow-near: 3px;
  --aura-text-glow-medium: 10px;
  --aura-text-glow-far: 24px;
  --aura-text-glow-wide: 42px;
}


/*
 * Added by the JavaScript when the original element
 * uses display: inline.
 */
.aura-text-glow.aura-text-glow--inline {
  display: inline-block;
}


/* ==========================================================
   2. GENERATED GLOW TEXT LAYER
========================================================== */

.aura-text-glow__layer {
  position: absolute;

  /*
   * Expand the generated layer beyond the original text box.
   * Padding keeps the cloned text aligned with the original.
   */
  inset: calc(var(--aura-text-glow-bleed) * -1);
  padding: var(--aura-text-glow-bleed);

  box-sizing: border-box;
  z-index: 2;

  display: block;
  overflow: visible !important;

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

  /*
   * Preserve the original text formatting.
   */
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  text-decoration: inherit;
  white-space: inherit;

  /*
   * Hide the duplicate text fill.
   * Only its outline produces the glow.
   */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  -webkit-text-stroke:
    var(--aura-text-glow-stroke)
    var(--aura-text-glow-primary);

  opacity: 0;
  transition: opacity 180ms ease;

  /*
   * Glow around the actual letter shapes.
   */
  filter:
    drop-shadow(
      0 0 var(--aura-text-glow-near)
      var(--aura-text-glow-primary)
    )
    drop-shadow(
      0 0 var(--aura-text-glow-medium)
      var(--aura-text-glow-primary)
    )
    drop-shadow(
      0 0 var(--aura-text-glow-far)
      var(--aura-text-glow-secondary)
    )
    drop-shadow(
      0 0 var(--aura-text-glow-wide)
      var(--aura-text-glow-secondary)
    );

  /*
   * Restrict the glow to a circular area around the cursor.
   *
   * The bleed value is added because the generated layer
   * extends beyond the original text element.
   */
  -webkit-mask-image: radial-gradient(
    circle var(--aura-text-glow-size)
    at
    calc(var(--aura-text-glow-x) + var(--aura-text-glow-bleed))
    calc(var(--aura-text-glow-y) + var(--aura-text-glow-bleed)),

    #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-text-glow-size)
    at
    calc(var(--aura-text-glow-x) + var(--aura-text-glow-bleed))
    calc(var(--aura-text-glow-y) + var(--aura-text-glow-bleed)),

    #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;
}


/* ==========================================================
   3. NESTED TEXT ELEMENTS
========================================================== */

.aura-text-glow__layer,
.aura-text-glow__layer * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  -webkit-text-stroke:
    var(--aura-text-glow-stroke)
    var(--aura-text-glow-primary);

  pointer-events: none !important;
}


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

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


/* ==========================================================
   5. COLOR PALETTES
========================================================== */

.aura-text-glow--white {
  --aura-text-glow-primary: #ffffff;
  --aura-text-glow-secondary: #dedede38;
}

.aura-text-glow--mint {
  --aura-text-glow-primary: #00dfca;
  --aura-text-glow-secondary: #a4fff438;
}

.aura-text-glow--pink {
  --aura-text-glow-primary: #ff3f7f;
  --aura-text-glow-secondary: #ff99c038;
}

.aura-text-glow--purple {
  --aura-text-glow-primary: #8c00ff;
  --aura-text-glow-secondary: #d1a1ff38;
}

.aura-text-glow--ice {
  --aura-text-glow-primary: #a7f1ff;
  --aura-text-glow-secondary: #8df2ff38;
}


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

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

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

.aura-text-glow--medium {
  --aura-text-glow-size: 110px;
}

.aura-text-glow--large {
  --aura-text-glow-size: 150px;
}

.aura-text-glow--huge {
  --aura-text-glow-size: 210px;
}


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

.aura-text-glow--thin {
  --aura-text-glow-stroke: 0.6px;
}

.aura-text-glow--strong {
  --aura-text-glow-stroke: 1.5px;
}

.aura-text-glow--extra-strong {
  --aura-text-glow-stroke: 2px;
}


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

/*
 * Add the class below to the nearest parent Spectra container
 * if the glow is still being clipped.
 *
 * Class:
 * aura-text-glow-overflow
 */

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


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

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


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

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