/* ============================================================
   Chroma Glow — cg  (v2.3.2)
   Source of truth: /Website Build/Elements/Chroma Glow/
   Merge target:    assets/css/chroma-glow.css
   ------------------------------------------------------------
   .cg-text → Elementor heading widget (text source)
   .cg-img  → on the <img>/<svg> itself OR on an Elementor
              wrapper around it — JS resolves to the inner
              drawable. Custom properties are read from the
              element carrying the class.
   Image files: transparent bg + same-origin/CORS. Inline SVGs:
   use presentation attributes (fill="…"), not external CSS —
   stylesheet styling does not survive rasterization.
   ============================================================ */

.cg-text,
.cg-img {
  /* three-tone glow, inner → outer */
  --cg-glow-1: #F54F1B;
  --cg-glow-2: #dd4110;
  --cg-glow-3: #c21d05;
  
  /* --cg-glow-1: #313a77;
  --cg-glow-2: #252a4f;
  --cg-glow-3: #171a32;   */
    
  --cg-radius: 1000px;      /* pointer radius of effect */
  --cg-rest: 0.33;         /* resting glow level, 0–1 */
  --cg-echo: 0.5;          /* mirrored echo intensity ratio, 0–1 */
  --cg-chroma: 0.4;          /* chromatic spread scale, 0 = off */
  --cg-warp: 1;            /* shape warp (bulge + ripple) scale, 0 = off */
  --cg-haze: 0.1;            /* edge softness + fringe + wobble scale.                             
    NOTE: edge blur is baked — changes to
                                  this need a rebake (reload/resize). */
  --cg-scan-speed: 2;      /* scanline roll, lines/sec (neg reverses) */
  --cg-scan-opacity: 0.1; /* scanline darkening, 0–1 */
}

.cg-text {
  position: relative;
  transition: color 0.25s ease; /* crossfade out under the canvas */
}

/* Text mode: JS adds .cg-active once the overlay is live. */
.cg-text.cg-active {
  color: transparent;      /* text stays in DOM for a11y/SEO */
  user-select: none;
}

/* Image mode: JS tags the DRAWABLE element (inner img/svg —
   possibly not the element carrying .cg-img) with .cg-src at
   init and .cg-hide when the canvas is live. */
.cg-src { transition: opacity 0.25s ease; }
.cg-src.cg-hide { opacity: 0; }

/* Overlay canvas. Size + inset (pad bleed) set by JS.
   The canvas is intentionally LARGER than its host (glow bleed):
   max-width/max-height overrides opt it out of the global reset
   rule `canvas { max-width: 100% }`, which otherwise clamps the
   width and distorts the raster in proportion to PAD_RATIO.
   Fades in over the DOM source (JS adds .cg-in after the first
   rendered frame) — swap is a crossfade, never a snap. */
.cg-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  max-width: none;
  max-height: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cg-canvas.cg-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cg-text, .cg-src, .cg-canvas { transition: none; }
}