/* Led Studio v1.2 — led-studio.css */

/*
  [data-glow]       = scroll-triggered (IntersectionObserver)
  [data-glow-hover] = hover-only (mouseenter/mouseleave)
  Both use the same animation; only the trigger differs.
*/

[data-glow],
[data-glow-hover] {
  transition: stroke-dashoffset 0.45s ease, opacity 0.35s ease;
}

[data-glow].ls-will-change,
[data-glow-hover].ls-will-change {
  will-change: filter, stroke-dashoffset;
}

[data-glow].glow-lit,
[data-glow-hover].glow-lit,
.dyls-clone-shape.glow-lit {
  animation: lsGlow var(--ls-dur, 1.4s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: none;
}

@keyframes lsGlow {
  0%   { stroke-dashoffset: var(--ls-len, 1000); opacity: 0.15; }
  7%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Reverse: draws from the opposite end without flipping the gradient */
@keyframes lsGlowReverse {
  0%   { stroke-dashoffset: calc(-1 * var(--ls-len, 1000)); opacity: 0.15; }
  7%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

[data-glow].ls-reverse.glow-lit,
[data-glow-hover].ls-reverse.glow-lit,
.dyls-clone-shape.ls-reverse.glow-lit {
  animation: lsGlowReverse var(--ls-dur, 1.4s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/*
  Flicker: use !important so it beats animation-fill-mode:forwards.
  JS toggles this class on/off to create the blink effect.
  No transition — flicker must be instant.
*/
.ls-flicker-off {
  opacity: 0.05 !important;
  transition: none !important;
}


/* LED SVG Animator: ensure SVG is never clipped by Divi module wrappers */
.dycode_led_svg_animator,
.dycode_led_svg_animator .et_pb_module_inner,
.dyls-svg-animator-wrap,
.dyls-svg-inner,
.dyls-svg-inner svg {
  overflow: visible !important;
}

/* LED Line: ensure blur glow is never clipped */
.dycode_led_line,
.dycode_led_line .et_pb_module_inner,
.dycode_led_line .dyls-svg-wrap,
.dycode_led_line svg,
.dycode_led_line .dyls-svg-wrap > * {
  overflow: visible !important;
}

/* LED Border: ensure glow extends beyond element bounds — but ONLY on the
   element with the border. Don't break parent overflow:hidden. */
.dyls-led-active > .dyls-border-svg {
  overflow: visible;
}
.dyls-border-svg {
  overflow: visible !important;
}

/* Glow activated by JS after animation completes */
.dyls-svg-lit svg path,
.dyls-svg-lit svg circle,
.dyls-svg-lit svg rect,
.dyls-svg-lit svg ellipse,
.dyls-svg-lit svg polyline,
.dyls-svg-lit svg polygon,
.dyls-svg-lit svg line {
  transition: filter 0.4s ease, stroke 0.3s ease;
}

/* ═══ LED SVG Animator — Performance & Layout ═══ */

/* Hard cap: SVG never exceeds its container */
.dyls-svg-animator-wrap,
.dyls-svg-inner {
  max-width: 100%;
}

.dyls-svg-inner svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Transition for hover glow/stroke color changes */
.dyls-svg-inner {
  transition: filter 0.3s ease;
}

/* will-change only while animation is active (JS adds/removes) */
.dyls-svg-animating .dyls-svg-inner {
  will-change: filter;
}

/* Default width constraint — prevents SVG from rendering at intrinsic viewBox size
   when no width is set in Divi Design → Sizing.
   Divi's sizing settings override this when explicitly set. */
.dycode_led_svg_animator,
.dycode_led_svg_animator .et_pb_module_inner,
.dyls-svg-animator-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* LED Border active: needs position:relative to contain the absolute SVG overlay.
   Using a class instead of inline style injection — never conflicts with
   Divi's own inline styles (border-radius, background, etc.) */
.dyls-led-active {
  position: relative !important;
}