/*
  SJF electric sparks heading effect

  Pouzitie v Elementore:
  Advanced -> CSS Classes: sjf-electric-sparks-v1, sjf-electric-sparks-v2,
  sjf-electric-sparks-v3 alebo sjf-electric-sparks-v4

  Efekt je stop-motion. JS iba vymiena staticke SVG frejmy v nizkom FPS,
  bez plynulych transform transition animacii.
*/

.sjf-electric-sparks,
.sjf-electric-sparks-v1,
.sjf-electric-sparks-v2,
.sjf-electric-sparks-v3,
.sjf-electric-sparks-v4,
.sjf-electric-sparks--host {
  --sjf-sparks-color: var(--e-global-color-sjf-green-text, #60EB74);
  --sjf-equation-color: #60EB74;
  --sjf-sparks-opacity: 0.94;
  --sjf-sparks-stroke: clamp(1.5px, 0.075em, 3px);
  --sjf-snake-stroke: clamp(2px, 0.095em, 4px);
  --sjf-sparks-inset: -0.72em -0.46em -0.42em -0.46em;
  --sjf-sparks-z-index: 3;
  --sjf-equation-scale: 1;
}

html.sjf-equation-doodles-active,
body.sjf-equation-doodles-active {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html.sjf-equation-doodles-active,
  body.sjf-equation-doodles-active {
    overflow-x: hidden;
  }
}

.sjf-electric-sparks--host {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.sjf-electric-sparks,
.sjf-electric-sparks-v2,
.sjf-electric-sparks-v3,
.sjf-electric-sparks-v4,
.sjf-equation-doodles--root,
.sjf-equation-doodles--host {
  overflow: visible;
}

.sjf-electric-sparks--host-v1 {
  --sjf-sparks-color: var(--e-global-color-sjf-green-text, #60EB74);
  --sjf-sparks-inset: -0.72em -0.46em -0.42em -0.46em;
}

@media (max-width: 1024px) {
  .sjf-electric-sparks--host-v1 {
    --sjf-sparks-stroke: clamp(2.2px, 0.115em, 3.8px);
  }
}

.sjf-electric-sparks--host-v2 {
  --sjf-sparks-color: var(--e-global-color-sjf-green-text, #60EB74);
  --sjf-sparks-inset: -1.35em -1.05em -1.05em -1.05em;
}

.sjf-electric-sparks--host-v3 {
  --sjf-sparks-color: var(--e-global-color-sjf-green-text, #60EB74);
}

.sjf-equation-doodles--host {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.sjf-equation-doodles__layer {
  position: absolute;
  inset: 0;
  z-index: var(--sjf-sparks-z-index);
  overflow: visible;
  pointer-events: none;
}

.sjf-equation-doodles__item {
  position: absolute;
  display: block;
  color: var(--sjf-equation-color, #60EB74);
  opacity: 1;
  pointer-events: none;
  transform-origin: center;
  transition: opacity var(--sjf-equation-fade-ms, 1800ms) ease;
  will-change: opacity, transform;
}

.sjf-equation-doodles__item svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sjf-equation-doodles__item .sjf-equation-part {
  opacity: 0;
  transition:
    opacity 360ms ease,
    transform 360ms ease;
}

.sjf-equation-doodles__item .sjf-equation-part.is-visible {
  opacity: 1;
}

.sjf-equation-doodles__item.is-fading {
  opacity: 0;
}

@media (max-width: 1024px) and (orientation: landscape) {
  .sjf-electric-sparks-v4,
  .sjf-equation-doodles--root,
  .sjf-equation-doodles--host {
    --sjf-equation-scale: 2;
  }
}

.elementor-heading-title.sjf-electric-sparks--host,
h1.sjf-electric-sparks--host,
h2.sjf-electric-sparks--host,
h3.sjf-electric-sparks--host {
  display: inline-block;
}

.sjf-electric-sparks__layer {
  position: absolute;
  inset: var(--sjf-sparks-inset);
  z-index: var(--sjf-sparks-z-index);
  width: auto;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.sjf-electric-sparks__layer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sjf-electric-sparks__stroke {
  fill: none;
  stroke: var(--sjf-sparks-color);
  stroke-width: var(--sjf-sparks-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--sjf-sparks-opacity);
  vector-effect: non-scaling-stroke;
}

.sjf-electric-sparks__fill {
  fill: var(--sjf-sparks-color);
  opacity: calc(var(--sjf-sparks-opacity) * 0.9);
}

.sjf-electric-sparks__smoke {
  fill: none;
  stroke: var(--sjf-sparks-color);
  stroke-width: calc(var(--sjf-sparks-stroke) * 1.35);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.28;
  vector-effect: non-scaling-stroke;
}

.sjf-electric-sparks__slot {
  transform-box: fill-box;
  transform-origin: center;
}

.sjf-electric-sparks__snake-layer {
  position: absolute;
  z-index: var(--sjf-sparks-z-index);
  overflow: visible;
  pointer-events: none;
}

.sjf-electric-sparks__snake-layer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sjf-electric-sparks__snake-path {
  fill: none;
  stroke: var(--sjf-sparks-color);
  stroke-width: var(--sjf-snake-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.94;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 0.06em rgba(96, 235, 116, 0.35));
}

@media (prefers-reduced-motion: reduce) {
  .sjf-electric-sparks__layer,
  .sjf-electric-sparks__snake-layer,
  .sjf-equation-doodles__layer {
    display: none;
  }
}