/*
 * «بوردر درخشان پایین» (ui-components: border-beam-bottom), the CSS the
 * border-beam@1.4.1 package generates for <BorderBeam size="line"
 * colorVariant="colorful" duration={3.1}>, radius 16 (the field), for the dark
 * and light themes (ids sa-dark / sa-light). Generated from the package, not
 * hand-written; the widget script sets data-beam and data-active.
 *
 * border-beam@1.4.1 license:
 *
 * MIT License
 *
 * Copyright (c) 2026 Jakub Antalik
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

@property --beam-x-sa-dark {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@property --beam-w-sa-dark {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-h-sa-dark {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-spike-sa-dark {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-spike2-sa-dark {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-edge-sa-dark {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-opacity-sa-dark {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

[data-beam="sa-dark"] {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

[data-beam="sa-dark"][data-active] {
  animation:
    beam-travel-sa-dark 3.1s linear infinite,
    beam-edge-fade-sa-dark 3.1s linear infinite,
    beam-breathe-sa-dark 4.0s ease-in-out infinite,
    beam-spike-sa-dark 4.1s ease-in-out infinite,
    beam-spike2-sa-dark 5.3s ease-in-out infinite,
    beam-fade-in-sa-dark 0.6s ease forwards;
}

[data-beam="sa-dark"][data-fading] {
  animation:
    beam-travel-sa-dark 3.1s linear infinite,
    beam-edge-fade-sa-dark 3.1s linear infinite,
    beam-breathe-sa-dark 4.0s ease-in-out infinite,
    beam-spike-sa-dark 4.1s ease-in-out infinite,
    beam-spike2-sa-dark 5.3s ease-in-out infinite,
    beam-fade-out-sa-dark 0.5s ease forwards;
}

[data-beam="sa-dark"][data-active]::after,
[data-beam="sa-dark"][data-fading]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 1px;
  clip-path: inset(0 round 16px);
  background: radial-gradient(
        ellipse calc(24px * var(--beam-w-sa-dark)) calc(28px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 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(--beam-w-sa-dark)) calc(36px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100%) calc(100% + 2px), rgb(255, 50, 100), transparent),
       radial-gradient(ellipse calc(30px * var(--beam-w-sa-dark)) calc(32px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% + 39px) calc(100%), rgb(40, 180, 220), transparent),
       radial-gradient(ellipse calc(33px * var(--beam-w-sa-dark)) calc(28px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% - 36px) calc(100% + 2px), rgb(50, 200, 80), transparent),
       radial-gradient(ellipse calc(29px * var(--beam-w-sa-dark)) calc(34px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% - 54px) calc(100%), rgb(180, 40, 240), transparent),
       radial-gradient(ellipse calc(27px * var(--beam-w-sa-dark)) calc(30px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% + 51px) calc(100% - 1px), rgb(255, 160, 30), transparent),
       radial-gradient(ellipse calc(36px * var(--beam-w-sa-dark)) calc(24px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% + 21px) calc(100% + 1px), rgb(100, 70, 255), transparent),
       radial-gradient(ellipse calc(30px * var(--beam-w-sa-dark)) calc(22px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% - 21px) calc(100%), rgb(40, 140, 255), transparent),
       radial-gradient(ellipse calc(25px * var(--beam-w-sa-dark)) calc(28px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% + 66px) calc(100% + 1px), rgb(240, 50, 180), transparent),
       radial-gradient(ellipse calc(23px * var(--beam-w-sa-dark)) calc(30px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% - 66px) calc(100% - 1px), rgb(30, 185, 170), transparent);
  -webkit-mask:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-sa-dark)) calc(60px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100%) 100%,
      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-sa-dark)) calc(60px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100%) 100%,
      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--beam-opacity-sa-dark) * var(--beam-edge-sa-dark) * 1.14 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-sa-dark 12s ease-in-out infinite;
}

[data-beam="sa-dark"][data-active]::before,
[data-beam="sa-dark"][data-fading]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse calc(33px * var(--beam-w-sa-dark)) calc(30px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100%) calc(100%), rgba(255, 50, 100, 0.48), transparent),
    radial-gradient(ellipse calc(24px * var(--beam-w-sa-dark)) calc(26px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% + 39px) calc(100% - 3px), rgba(40, 180, 220, 0.42), transparent),
    radial-gradient(ellipse calc(27px * var(--beam-w-sa-dark)) calc(24px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% - 36px) calc(100%), rgba(50, 200, 80, 0.48), transparent),
    radial-gradient(ellipse calc(23px * var(--beam-w-sa-dark)) calc(28px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% - 54px) calc(100% - 2px), rgba(180, 40, 240, 0.42), transparent),
    radial-gradient(ellipse calc(24px * var(--beam-w-sa-dark)) calc(24px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% + 51px) calc(100% - 1px), rgba(255, 160, 30, 0.50), transparent),
    radial-gradient(ellipse calc(30px * var(--beam-w-sa-dark)) calc(20px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% + 21px) calc(100%), rgba(100, 70, 255, 0.45), transparent),
    radial-gradient(ellipse calc(25px * var(--beam-w-sa-dark)) calc(18px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% - 21px) calc(100% - 2px), rgba(40, 140, 255, 0.40), transparent),
    radial-gradient(ellipse calc(21px * var(--beam-w-sa-dark)) calc(24px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100% + 66px) calc(100%), rgba(240, 50, 180, 0.45), transparent),
    radial-gradient(ellipse calc(18px * var(--beam-w-sa-dark)) calc(26px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 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);
  -webkit-mask-image:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-sa-dark)) calc(60px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 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);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-sa-dark)) calc(60px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 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;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-sa-dark) * var(--beam-edge-sa-dark) * 0.70 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
  clip-path: inset(0 round 16px);
  animation: beam-hue-shift-sa-dark 12s ease-in-out infinite;
}

[data-beam="sa-dark"] [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 15px;
  clip-path: inset(0 round 16px);
  padding: 0;
  -webkit-mask: radial-gradient(
    ellipse calc(84px * var(--beam-w-sa-dark)) calc(110px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100%) 100%,
    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
  );
  -webkit-mask-composite: source-over;
  mask: radial-gradient(
    ellipse calc(84px * var(--beam-w-sa-dark)) calc(110px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 100%) 100%,
    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
  );
  mask-composite: add;
  background: radial-gradient(ellipse calc(0.8px * var(--beam-spike-sa-dark) * var(--beam-spike-mul, 1)) calc(92px * var(--beam-h-sa-dark) * var(--beam-spike-mul, 1)) at 8% calc(100% - 2px), rgb(255, 60, 80), rgb(255, 60, 80) 30%, transparent 88%),
       radial-gradient(ellipse calc(10px * var(--beam-spike2-sa-dark) * var(--beam-spike-mul, 1)) calc(35px * var(--beam-h-sa-dark) * var(--beam-spike-mul, 1)) 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(--beam-spike-sa-dark)) * var(--beam-spike-mul, 1)) calc(72px * var(--beam-h-sa-dark) * var(--beam-spike-mul, 1)) at 36% calc(100% - 3px), rgb(100, 70, 255), rgba(100, 70, 255, 1) 40%, transparent 90%),
       radial-gradient(ellipse calc(14px * var(--beam-spike2-sa-dark) * var(--beam-spike-mul, 1)) calc(28px * var(--beam-h-sa-dark) * var(--beam-spike-mul, 1)) 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(--beam-spike2-sa-dark)) * var(--beam-spike-mul, 1)) calc(85px * var(--beam-h-sa-dark) * var(--beam-spike-mul, 1)) at 64% calc(100% - 4px), rgb(50, 200, 100), rgba(50, 200, 100, 1) 35%, transparent 89%),
       radial-gradient(ellipse calc(7px * var(--beam-spike-sa-dark) * var(--beam-spike-mul, 1)) calc(45px * var(--beam-h-sa-dark) * var(--beam-spike-mul, 1)) 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(--beam-spike-sa-dark)) * var(--beam-spike-mul, 1)) calc(60px * var(--beam-h-sa-dark) * var(--beam-spike-mul, 1)) at 92% calc(100% - 3px), rgb(40, 140, 255), rgba(40, 140, 255, 1) 42%, transparent 91%),
       radial-gradient(ellipse calc(21px * var(--beam-spike-sa-dark)) calc(15px * var(--beam-spike2-sa-dark)) at calc(var(--beam-x-sa-dark) * 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(--beam-w-sa-dark)) calc(40px * var(--beam-h-sa-dark)) at calc(var(--beam-x-sa-dark) * 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%);
  
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

[data-beam="sa-dark"][data-active] [data-beam-bloom],
[data-beam="sa-dark"][data-fading] [data-beam-bloom] {
  display: block;
  opacity: calc(var(--beam-opacity-sa-dark) * var(--beam-edge-sa-dark) * 0.80 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-bloom-sa-dark 8s ease-in-out infinite;
}

@keyframes beam-travel-sa-dark {
  0%   { --beam-x-sa-dark: 0.06;  --beam-w-sa-dark: 0.5; }
  10%  { --beam-x-sa-dark: 0.15;  --beam-w-sa-dark: 0.8; }
  20%  { --beam-x-sa-dark: 0.25;  --beam-w-sa-dark: 1.1; }
  30%  { --beam-x-sa-dark: 0.35;  --beam-w-sa-dark: 1.3; }
  40%  { --beam-x-sa-dark: 0.44;  --beam-w-sa-dark: 1.45; }
  50%  { --beam-x-sa-dark: 0.5;   --beam-w-sa-dark: 1.5; }
  60%  { --beam-x-sa-dark: 0.56;  --beam-w-sa-dark: 1.45; }
  70%  { --beam-x-sa-dark: 0.65;  --beam-w-sa-dark: 1.3; }
  80%  { --beam-x-sa-dark: 0.75;  --beam-w-sa-dark: 1.1; }
  90%  { --beam-x-sa-dark: 0.85;  --beam-w-sa-dark: 0.8; }
  100% { --beam-x-sa-dark: 0.94;  --beam-w-sa-dark: 0.5; }
}

@keyframes beam-edge-fade-sa-dark {
  0%    { --beam-edge-sa-dark: 0; }
  12.5% { --beam-edge-sa-dark: 0; }
  32.5% { --beam-edge-sa-dark: 1; }
  67.5% { --beam-edge-sa-dark: 1; }
  87.5% { --beam-edge-sa-dark: 0; }
  100%  { --beam-edge-sa-dark: 0; }
}

@keyframes beam-breathe-sa-dark {
  0%, 100% { --beam-h-sa-dark: 0.8; }
  25%      { --beam-h-sa-dark: 1.25; }
  55%      { --beam-h-sa-dark: 0.85; }
  80%      { --beam-h-sa-dark: 1.3; }
}

@keyframes beam-spike-sa-dark {
  0%   { --beam-spike-sa-dark: 0.8; }
  25%  { --beam-spike-sa-dark: 1.3; }
  50%  { --beam-spike-sa-dark: 0.9; }
  75%  { --beam-spike-sa-dark: 1.4; }
  100% { --beam-spike-sa-dark: 0.8; }
}

@keyframes beam-spike2-sa-dark {
  0%   { --beam-spike2-sa-dark: 1.2; }
  25%  { --beam-spike2-sa-dark: 0.7; }
  50%  { --beam-spike2-sa-dark: 1.4; }
  75%  { --beam-spike2-sa-dark: 0.8; }
  100% { --beam-spike2-sa-dark: 1.2; }
}

@keyframes beam-fade-in-sa-dark {
  to { --beam-opacity-sa-dark: 1; }
}

@keyframes beam-fade-out-sa-dark {
  from { --beam-opacity-sa-dark: 1; }
  to { --beam-opacity-sa-dark: 0; }
}

@keyframes beam-hue-shift-sa-dark {
  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 13deg)) brightness(1.30) saturate(1.20); }
  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 13deg)) brightness(1.30) saturate(1.20); }
  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 13deg)) brightness(1.30) saturate(1.20); }
}

@keyframes beam-hue-shift-bloom-sa-dark {
  0% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - 23deg)) brightness(1.30) saturate(1.20); }
  50% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + 23deg)) brightness(1.30) saturate(1.20); }
  100% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - 23deg)) brightness(1.30) saturate(1.20); }
}

[data-beam="sa-dark"][data-paused],
[data-beam="sa-dark"][data-paused]::after,
[data-beam="sa-dark"][data-paused]::before,
[data-beam="sa-dark"][data-paused] [data-beam-bloom] {
  animation-play-state: paused !important;
}

@property --beam-x-sa-light {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@property --beam-w-sa-light {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-h-sa-light {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-spike-sa-light {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-spike2-sa-light {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-edge-sa-light {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-opacity-sa-light {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

[data-beam="sa-light"] {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

[data-beam="sa-light"][data-active] {
  animation:
    beam-travel-sa-light 3.1s linear infinite,
    beam-edge-fade-sa-light 3.1s linear infinite,
    beam-breathe-sa-light 4.0s ease-in-out infinite,
    beam-spike-sa-light 4.1s ease-in-out infinite,
    beam-spike2-sa-light 5.3s ease-in-out infinite,
    beam-fade-in-sa-light 0.6s ease forwards;
}

[data-beam="sa-light"][data-fading] {
  animation:
    beam-travel-sa-light 3.1s linear infinite,
    beam-edge-fade-sa-light 3.1s linear infinite,
    beam-breathe-sa-light 4.0s ease-in-out infinite,
    beam-spike-sa-light 4.1s ease-in-out infinite,
    beam-spike2-sa-light 5.3s ease-in-out infinite,
    beam-fade-out-sa-light 0.5s ease forwards;
}

[data-beam="sa-light"][data-active]::after,
[data-beam="sa-light"][data-fading]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 1px;
  clip-path: inset(0 round 16px);
  background: radial-gradient(
        ellipse calc(35px * var(--beam-w-sa-light)) calc(28px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100%) calc(100% + 2px),
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.25) 35%,
        transparent 70%
      ), radial-gradient(ellipse calc(45px * var(--beam-w-sa-light)) calc(36px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100%) calc(100% + 2px), rgb(255, 50, 100), transparent),
       radial-gradient(ellipse calc(35px * var(--beam-w-sa-light)) calc(32px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% + 65px) calc(100%), rgb(40, 140, 255), transparent),
       radial-gradient(ellipse calc(40px * var(--beam-w-sa-light)) calc(28px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% - 60px) calc(100% + 2px), rgb(50, 200, 80), transparent),
       radial-gradient(ellipse calc(35px * var(--beam-w-sa-light)) calc(34px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% - 90px) calc(100%), rgb(180, 40, 240), transparent),
       radial-gradient(ellipse calc(38px * var(--beam-w-sa-light)) calc(30px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% + 85px) calc(100% - 1px), rgb(30, 185, 170), transparent),
       radial-gradient(ellipse calc(50px * var(--beam-w-sa-light)) calc(24px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 255), transparent),
       radial-gradient(ellipse calc(40px * var(--beam-w-sa-light)) calc(22px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% - 35px) calc(100%), rgb(40, 140, 255), transparent),
       radial-gradient(ellipse calc(35px * var(--beam-w-sa-light)) calc(28px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% + 110px) calc(100% + 1px), rgb(255, 120, 40), transparent),
       radial-gradient(ellipse calc(30px * var(--beam-w-sa-light)) calc(30px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% - 110px) calc(100% - 1px), rgb(240, 50, 180), transparent);
  -webkit-mask:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-sa-light)) calc(60px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100%) 100%,
      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-sa-light)) calc(60px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100%) 100%,
      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--beam-opacity-sa-light) * var(--beam-edge-sa-light) * 0.16 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-sa-light 12s ease-in-out infinite;
}

[data-beam="sa-light"][data-active]::before,
[data-beam="sa-light"][data-fading]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse calc(33px * var(--beam-w-sa-light)) calc(30px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100%) calc(100%), rgba(255, 50, 100, 0.48), transparent),
    radial-gradient(ellipse calc(24px * var(--beam-w-sa-light)) calc(26px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% + 39px) calc(100% - 3px), rgba(40, 180, 220, 0.42), transparent),
    radial-gradient(ellipse calc(27px * var(--beam-w-sa-light)) calc(24px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% - 36px) calc(100%), rgba(50, 200, 80, 0.48), transparent),
    radial-gradient(ellipse calc(23px * var(--beam-w-sa-light)) calc(28px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% - 54px) calc(100% - 2px), rgba(180, 40, 240, 0.42), transparent),
    radial-gradient(ellipse calc(24px * var(--beam-w-sa-light)) calc(24px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% + 51px) calc(100% - 1px), rgba(255, 160, 30, 0.50), transparent),
    radial-gradient(ellipse calc(30px * var(--beam-w-sa-light)) calc(20px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% + 21px) calc(100%), rgba(100, 70, 255, 0.45), transparent),
    radial-gradient(ellipse calc(25px * var(--beam-w-sa-light)) calc(18px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% - 21px) calc(100% - 2px), rgba(40, 140, 255, 0.40), transparent),
    radial-gradient(ellipse calc(21px * var(--beam-w-sa-light)) calc(24px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% + 66px) calc(100%), rgba(240, 50, 180, 0.45), transparent),
    radial-gradient(ellipse calc(18px * var(--beam-w-sa-light)) calc(26px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100% - 66px) calc(100% - 1px), rgba(30, 185, 170, 0.52), transparent);
  box-shadow: inset 0 0 9px 1px rgba(0, 0, 0, 0.14);
  -webkit-mask-image:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-sa-light)) calc(60px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 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);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-sa-light)) calc(60px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 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;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-sa-light) * var(--beam-edge-sa-light) * 0.32 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
  clip-path: inset(0 round 16px);
  animation: beam-hue-shift-sa-light 12s ease-in-out infinite;
}

[data-beam="sa-light"] [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 15px;
  clip-path: inset(0 round 16px);
  padding: 0;
  -webkit-mask: radial-gradient(
    ellipse calc(84px * var(--beam-w-sa-light)) calc(110px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100%) 100%,
    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
  );
  -webkit-mask-composite: source-over;
  mask: radial-gradient(
    ellipse calc(84px * var(--beam-w-sa-light)) calc(110px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100%) 100%,
    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
  );
  mask-composite: add;
  background: radial-gradient(ellipse calc(0.8px * var(--beam-spike-sa-light) * var(--beam-spike-mul, 1)) calc(92px * var(--beam-h-sa-light) * var(--beam-spike-mul, 1)) at 8% calc(100% - 2px), rgb(200, 30, 60), rgba(200, 30, 60, 0.85) 30%, transparent 88%),
       radial-gradient(ellipse calc(10px * var(--beam-spike2-sa-light) * var(--beam-spike-mul, 1)) calc(35px * var(--beam-h-sa-light) * var(--beam-spike-mul, 1)) at 22% calc(100% - 4px), rgb(20, 150, 140), rgba(20, 150, 140, 0.7) 50%, transparent 95%),
       radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-sa-light)) * var(--beam-spike-mul, 1)) calc(72px * var(--beam-h-sa-light) * var(--beam-spike-mul, 1)) at 36% calc(100% - 3px), rgb(80, 50, 200), rgba(80, 50, 200, 0.8) 40%, transparent 90%),
       radial-gradient(ellipse calc(14px * var(--beam-spike2-sa-light) * var(--beam-spike-mul, 1)) calc(28px * var(--beam-h-sa-light) * var(--beam-spike-mul, 1)) at 50% calc(100% - 2px), rgba(210, 130, 0, 0.7), rgba(210, 130, 0, 0.46) 55%, transparent 96%),
       radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-sa-light)) * var(--beam-spike-mul, 1)) calc(85px * var(--beam-h-sa-light) * var(--beam-spike-mul, 1)) at 64% calc(100% - 4px), rgb(30, 160, 70), rgba(30, 160, 70, 0.82) 35%, transparent 89%),
       radial-gradient(ellipse calc(7px * var(--beam-spike-sa-light) * var(--beam-spike-mul, 1)) calc(45px * var(--beam-h-sa-light) * var(--beam-spike-mul, 1)) at 78% calc(100% - 2px), rgb(160, 30, 190), rgba(160, 30, 190, 0.7) 48%, transparent 94%),
       radial-gradient(ellipse calc(1px * (2 - var(--beam-spike-sa-light)) * var(--beam-spike-mul, 1)) calc(60px * var(--beam-h-sa-light) * var(--beam-spike-mul, 1)) at 92% calc(100% - 3px), rgb(30, 100, 200), rgba(30, 100, 200, 0.78) 42%, transparent 91%),
       radial-gradient(ellipse calc(50px * var(--beam-w-sa-light)) calc(32px * var(--beam-h-sa-light)) at calc(var(--beam-x-sa-light) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
  
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

[data-beam="sa-light"][data-active] [data-beam-bloom],
[data-beam="sa-light"][data-fading] [data-beam-bloom] {
  display: block;
  opacity: calc(var(--beam-opacity-sa-light) * var(--beam-edge-sa-light) * 0.30 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-bloom-sa-light 8s ease-in-out infinite;
}

@keyframes beam-travel-sa-light {
  0%   { --beam-x-sa-light: 0.06;  --beam-w-sa-light: 0.5; }
  10%  { --beam-x-sa-light: 0.15;  --beam-w-sa-light: 0.8; }
  20%  { --beam-x-sa-light: 0.25;  --beam-w-sa-light: 1.1; }
  30%  { --beam-x-sa-light: 0.35;  --beam-w-sa-light: 1.3; }
  40%  { --beam-x-sa-light: 0.44;  --beam-w-sa-light: 1.45; }
  50%  { --beam-x-sa-light: 0.5;   --beam-w-sa-light: 1.5; }
  60%  { --beam-x-sa-light: 0.56;  --beam-w-sa-light: 1.45; }
  70%  { --beam-x-sa-light: 0.65;  --beam-w-sa-light: 1.3; }
  80%  { --beam-x-sa-light: 0.75;  --beam-w-sa-light: 1.1; }
  90%  { --beam-x-sa-light: 0.85;  --beam-w-sa-light: 0.8; }
  100% { --beam-x-sa-light: 0.94;  --beam-w-sa-light: 0.5; }
}

@keyframes beam-edge-fade-sa-light {
  0%    { --beam-edge-sa-light: 0; }
  12.5% { --beam-edge-sa-light: 0; }
  32.5% { --beam-edge-sa-light: 1; }
  67.5% { --beam-edge-sa-light: 1; }
  87.5% { --beam-edge-sa-light: 0; }
  100%  { --beam-edge-sa-light: 0; }
}

@keyframes beam-breathe-sa-light {
  0%, 100% { --beam-h-sa-light: 0.8; }
  25%      { --beam-h-sa-light: 1.25; }
  55%      { --beam-h-sa-light: 0.85; }
  80%      { --beam-h-sa-light: 1.3; }
}

@keyframes beam-spike-sa-light {
  0%   { --beam-spike-sa-light: 0.8; }
  25%  { --beam-spike-sa-light: 1.3; }
  50%  { --beam-spike-sa-light: 0.9; }
  75%  { --beam-spike-sa-light: 1.4; }
  100% { --beam-spike-sa-light: 0.8; }
}

@keyframes beam-spike2-sa-light {
  0%   { --beam-spike2-sa-light: 1.2; }
  25%  { --beam-spike2-sa-light: 0.7; }
  50%  { --beam-spike2-sa-light: 1.4; }
  75%  { --beam-spike2-sa-light: 0.8; }
  100% { --beam-spike2-sa-light: 1.2; }
}

@keyframes beam-fade-in-sa-light {
  to { --beam-opacity-sa-light: 1; }
}

@keyframes beam-fade-out-sa-light {
  from { --beam-opacity-sa-light: 1; }
  to { --beam-opacity-sa-light: 0; }
}

@keyframes beam-hue-shift-sa-light {
  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 13deg)) brightness(1.30) saturate(1.95); }
  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 13deg)) brightness(1.30) saturate(1.95); }
  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 13deg)) brightness(1.30) saturate(1.95); }
}

@keyframes beam-hue-shift-bloom-sa-light {
  0% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - 23deg)) brightness(1.30) saturate(1.95); }
  50% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + 23deg)) brightness(1.30) saturate(1.95); }
  100% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - 23deg)) brightness(1.30) saturate(1.95); }
}

[data-beam="sa-light"][data-paused],
[data-beam="sa-light"][data-paused]::after,
[data-beam="sa-light"][data-paused]::before,
[data-beam="sa-light"][data-paused] [data-beam-bloom] {
  animation-play-state: paused !important;
}