@property --q-filter-beam-x {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}
@property --q-filter-beam-w {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}
@property --q-filter-beam-h {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}
@property --q-filter-beam-edge {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}
@property --q-filter-beam-opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}
.q-filter-params__add {
  position: relative;
}
.q-filter-params__beam {
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: 17px;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

.q-filter-params__beam::before,
.q-filter-params__beam::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 round 17px);
  animation: q-filter-beam-hue 12s ease-in-out infinite;
}
.q-filter-params__beam::after {
  border-radius: 16px;
  padding: 1px;
  background:
    radial-gradient(
      ellipse calc(24px * var(--q-filter-beam-w)) calc(28px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100%) calc(100% + 2px),
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.12) 30%,
      transparent 65%
    ),
    radial-gradient(
      ellipse calc(36px * var(--q-filter-beam-w)) calc(36px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 0px) calc(100% + 2px),
      rgba(255, 50, 100, 1),
      transparent
    ),
    radial-gradient(
      ellipse calc(30px * var(--q-filter-beam-w)) calc(32px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 39px) calc(100% + 0px),
      rgba(40, 180, 220, 1),
      transparent
    ),
    radial-gradient(
      ellipse calc(33px * var(--q-filter-beam-w)) calc(28px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + -36px) calc(100% + 2px),
      rgba(50, 200, 80, 1),
      transparent
    ),
    radial-gradient(
      ellipse calc(29px * var(--q-filter-beam-w)) calc(34px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + -54px) calc(100% + 0px),
      rgba(180, 40, 240, 1),
      transparent
    ),
    radial-gradient(
      ellipse calc(27px * var(--q-filter-beam-w)) calc(30px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 51px) calc(100% + -1px),
      rgba(255, 160, 30, 1),
      transparent
    ),
    radial-gradient(
      ellipse calc(36px * var(--q-filter-beam-w)) calc(24px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 21px) calc(100% + 1px),
      rgba(100, 70, 255, 1),
      transparent
    ),
    radial-gradient(
      ellipse calc(30px * var(--q-filter-beam-w)) calc(22px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + -21px) calc(100% + 0px),
      rgba(40, 140, 255, 1),
      transparent
    ),
    radial-gradient(
      ellipse calc(25px * var(--q-filter-beam-w)) calc(28px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 66px) calc(100% + 1px),
      rgba(240, 50, 180, 1),
      transparent
    ),
    radial-gradient(
      ellipse calc(23px * var(--q-filter-beam-w)) calc(30px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + -66px) calc(100% + -1px),
      rgba(30, 185, 170, 1),
      transparent
    );
  mask:
    radial-gradient(
      ellipse calc(78px * var(--q-filter-beam-w)) calc(60px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100%) 100%,
      white 0%,
      rgba(255, 255, 255, 0.5) 45%,
      transparent 100%
    ),
    linear-gradient(white 0 0) content-box,
    linear-gradient(white 0 0);
  mask-composite: intersect, exclude;
  z-index: 2;
  opacity: calc(var(--q-filter-beam-opacity) * var(--q-filter-beam-edge) * 1.14);
}
.q-filter-params__beam::before {
  border-radius: 17px;
  background:
    radial-gradient(
      ellipse calc(33px * var(--q-filter-beam-w)) calc(30px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 0px) calc(100% + 0px),
      rgba(255, 50, 100, 0.48),
      transparent
    ),
    radial-gradient(
      ellipse calc(24px * var(--q-filter-beam-w)) calc(26px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 39px) calc(100% + -3px),
      rgba(40, 180, 220, 0.42),
      transparent
    ),
    radial-gradient(
      ellipse calc(27px * var(--q-filter-beam-w)) calc(24px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + -36px) calc(100% + 0px),
      rgba(50, 200, 80, 0.48),
      transparent
    ),
    radial-gradient(
      ellipse calc(23px * var(--q-filter-beam-w)) calc(28px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + -54px) calc(100% + -2px),
      rgba(180, 40, 240, 0.42),
      transparent
    ),
    radial-gradient(
      ellipse calc(24px * var(--q-filter-beam-w)) calc(24px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 51px) calc(100% + -1px),
      rgba(255, 160, 30, 0.5),
      transparent
    ),
    radial-gradient(
      ellipse calc(30px * var(--q-filter-beam-w)) calc(20px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 21px) calc(100% + 0px),
      rgba(100, 70, 255, 0.45),
      transparent
    ),
    radial-gradient(
      ellipse calc(25px * var(--q-filter-beam-w)) calc(18px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + -21px) calc(100% + -2px),
      rgba(40, 140, 255, 0.4),
      transparent
    ),
    radial-gradient(
      ellipse calc(21px * var(--q-filter-beam-w)) calc(24px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + 66px) calc(100% + 0px),
      rgba(240, 50, 180, 0.45),
      transparent
    ),
    radial-gradient(
      ellipse calc(18px * var(--q-filter-beam-w)) calc(26px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100% + -66px) calc(100% + -1px),
      rgba(30, 185, 170, 0.52),
      transparent
    );
  box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.1);
  mask-image:
    radial-gradient(
      ellipse calc(78px * var(--q-filter-beam-w)) calc(60px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100%) 100%,
      white 0%,
      rgba(255, 255, 255, 0.5) 45%,
      transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  mask-composite: intersect, add;
  opacity: calc(var(--q-filter-beam-opacity) * var(--q-filter-beam-edge) * 0.7);
}
@keyframes q-filter-beam-travel {
  0% {
    --q-filter-beam-x: 0.06;
    --q-filter-beam-w: 0.5;
  }
  10% {
    --q-filter-beam-x: 0.15;
    --q-filter-beam-w: 0.8;
  }
  20% {
    --q-filter-beam-x: 0.25;
    --q-filter-beam-w: 1.1;
  }
  30% {
    --q-filter-beam-x: 0.35;
    --q-filter-beam-w: 1.3;
  }
  40% {
    --q-filter-beam-x: 0.44;
    --q-filter-beam-w: 1.45;
  }
  50% {
    --q-filter-beam-x: 0.5;
    --q-filter-beam-w: 1.5;
  }
  60% {
    --q-filter-beam-x: 0.56;
    --q-filter-beam-w: 1.45;
  }
  70% {
    --q-filter-beam-x: 0.65;
    --q-filter-beam-w: 1.3;
  }
  80% {
    --q-filter-beam-x: 0.75;
    --q-filter-beam-w: 1.1;
  }
  90% {
    --q-filter-beam-x: 0.85;
    --q-filter-beam-w: 0.8;
  }
  100% {
    --q-filter-beam-x: 0.94;
    --q-filter-beam-w: 0.5;
  }
}
@keyframes q-filter-beam-edge {
  0%,
  12.5%,
  87.5%,
  100% {
    --q-filter-beam-edge: 0;
  }
  32.5%,
  67.5% {
    --q-filter-beam-edge: 1;
  }
}
@keyframes q-filter-beam-breathe {
  0%,
  100% {
    --q-filter-beam-h: 0.8;
  }
  25% {
    --q-filter-beam-h: 1.25;
  }
  55% {
    --q-filter-beam-h: 0.85;
  }
  80% {
    --q-filter-beam-h: 1.3;
  }
}
@keyframes q-filter-beam-in {
  to {
    --q-filter-beam-opacity: 1;
  }
}
@keyframes q-filter-beam-out {
  from {
    --q-filter-beam-opacity: 1;
  }
  to {
    --q-filter-beam-opacity: 0;
  }
}
@keyframes q-filter-beam-hue {
  0%,
  100% {
    filter: hue-rotate(-13deg) brightness(1.3) saturate(1.2);
  }
  50% {
    filter: hue-rotate(13deg) brightness(1.3) saturate(1.2);
  }
}

@property --q-filter-beam-spike {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}
@property --q-filter-beam-spike2 {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}
.q-filter-params__beam[data-state] {
  display: block;
  animation:
    q-filter-beam-travel 1.5s linear infinite,
    q-filter-beam-edge 1.5s linear infinite,
    q-filter-beam-breathe 2s ease-in-out infinite,
    q-filter-beam-in 0.6s ease forwards,
    q-filter-beam-spike 2s ease-in-out infinite,
    q-filter-beam-spike2 2.5s ease-in-out infinite;
}
.q-filter-params__beam[data-state='fading'] {
  animation-name:
    q-filter-beam-travel, q-filter-beam-edge, q-filter-beam-breathe, q-filter-beam-out,
    q-filter-beam-spike, q-filter-beam-spike2;
  animation-duration: 1.5s, 1.5s, 2s, 0.5s, 2s, 2.5s;
}
.q-filter-params__beam-bloom {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  clip-path: inset(0 round 17px);
  padding: 0;
  pointer-events: none;
  z-index: 3;
  mask: radial-gradient(
    ellipse calc(84px * var(--q-filter-beam-w)) calc(110px * var(--q-filter-beam-h)) at
      calc(var(--q-filter-beam-x) * 100%) 100%,
    white 0%,
    rgba(255, 255, 255, 0.5) 35%,
    transparent 100%
  );
  mask-composite: add;
  opacity: calc(var(--q-filter-beam-opacity) * var(--q-filter-beam-edge) * 0.8);
  animation: q-filter-beam-bloom-hue 8s ease-in-out infinite;
  background:
    radial-gradient(
      ellipse calc(0.8px * var(--q-filter-beam-spike)) calc(92px * var(--q-filter-beam-h)) at 8%
        calc(100% + -2px),
      rgb(255, 60, 80),
      rgb(255, 60, 80) 30%,
      transparent 88%
    ),
    radial-gradient(
      ellipse calc(10px * var(--q-filter-beam-spike2)) calc(35px * var(--q-filter-beam-h)) at 22%
        calc(100% + -4px),
      rgba(40, 190, 180, 0.98),
      rgba(40, 190, 180, 0.49) 50%,
      transparent 95%
    ),
    radial-gradient(
      ellipse calc(2px * (2 - var(--q-filter-beam-spike))) calc(72px * var(--q-filter-beam-h)) at
        36% calc(100% + -3px),
      rgb(100, 70, 255),
      rgba(100, 70, 255, 1) 40%,
      transparent 90%
    ),
    radial-gradient(
      ellipse calc(14px * var(--q-filter-beam-spike2)) calc(28px * var(--q-filter-beam-h)) at 50%
        calc(100% + -2px),
      rgba(255, 170, 40, 0.59),
      rgba(255, 170, 40, 0.29) 55%,
      transparent 96%
    ),
    radial-gradient(
      ellipse calc(1.2px * (2 - var(--q-filter-beam-spike2))) calc(85px * var(--q-filter-beam-h)) at
        64% calc(100% + -4px),
      rgb(50, 200, 100),
      rgba(50, 200, 100, 1) 35%,
      transparent 89%
    ),
    radial-gradient(
      ellipse calc(7px * var(--q-filter-beam-spike)) calc(45px * var(--q-filter-beam-h)) at 78%
        calc(100% + -2px),
      rgba(200, 50, 240, 0.91),
      rgba(200, 50, 240, 0.45) 48%,
      transparent 94%
    ),
    radial-gradient(
      ellipse calc(0.6px * (2 - var(--q-filter-beam-spike))) calc(60px * var(--q-filter-beam-h)) at
        92% calc(100% + -3px),
      rgb(40, 140, 255),
      rgba(40, 140, 255, 1) 42%,
      transparent 91%
    ),
    radial-gradient(
      ellipse calc(21px * var(--q-filter-beam-spike)) calc(15px * var(--q-filter-beam-spike2)) at
        calc(var(--q-filter-beam-x) * 100%) calc(100% + 1px),
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.9) 20%,
      rgba(255, 255, 255, 0.5) 50%,
      transparent 100%
    ),
    radial-gradient(
      ellipse calc(42px * var(--q-filter-beam-w)) calc(40px * var(--q-filter-beam-h)) at
        calc(var(--q-filter-beam-x) * 100%) 100%,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.12) 25%,
      rgba(255, 255, 255, 0.03) 55%,
      transparent 80%
    );
}
@keyframes q-filter-beam-spike {
  0%,
  100% {
    --q-filter-beam-spike: 0.8;
  }
  25% {
    --q-filter-beam-spike: 1.3;
  }
  50% {
    --q-filter-beam-spike: 0.9;
  }
  75% {
    --q-filter-beam-spike: 1.4;
  }
}
@keyframes q-filter-beam-spike2 {
  0%,
  100% {
    --q-filter-beam-spike2: 1.2;
  }
  25% {
    --q-filter-beam-spike2: 0.7;
  }
  50% {
    --q-filter-beam-spike2: 1.4;
  }
  75% {
    --q-filter-beam-spike2: 0.8;
  }
}
@keyframes q-filter-beam-bloom-hue {
  0%,
  100% {
    filter: blur(8px) hue-rotate(-23deg) brightness(1.3) saturate(1.2);
  }
  50% {
    filter: blur(8px) hue-rotate(23deg) brightness(1.3) saturate(1.2);
  }
}