/* ==========================================================================
   Aidem Animated Divider
   ========================================================================== */

.aba-animated-divider {
  --aba-divider-width: 100%;
  --aba-divider-thickness: 3px;
  --aba-divider-gap: 14px;
  --aba-divider-double-gap: 5px;
  --aba-divider-pattern-stroke: max(1px, calc(var(--aba-divider-thickness) * 0.75));
  --aba-divider-style-opacity: 1;
  --aba-divider-color: #8df411;
  --aba-divider-glow-color: #b8ff66;
  --aba-divider-duration: 6s;
  --aba-divider-strength: 1;
  display: flex;
  width: 100%;
  line-height: 0;
  position: relative;
}

.aba-animated-divider__line {
  position: relative;
  display: block;
  width: var(--aba-divider-width);
  color: var(--aba-divider-color);
  overflow: hidden;
  flex: 0 0 auto;
  transform-origin: center center;
  --aba-divider-block-height: var(--aba-divider-thickness);
  height: var(--aba-divider-block-height);
  isolation: isolate;
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
  opacity: var(--aba-divider-style-opacity);
  filter:
    drop-shadow(0 0 calc(6px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-color) 40%, transparent))
    drop-shadow(0 0 calc(10px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 18%, transparent));
}

.aba-animated-divider__line::before,
.aba-animated-divider__line::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.aba-animated-divider--pattern-solid .aba-animated-divider__line {
  background-color: currentColor;
  box-shadow:
    0 0 0 0.9px currentColor,
    0 0 calc(6px * var(--aba-divider-strength)) color-mix(in srgb, currentColor 28%, transparent);
}

.aba-animated-divider--pattern-slashes .aba-animated-divider__line {
  --aba-divider-block-height: max(12px, calc(var(--aba-divider-thickness) * 3));
  --aba-divider-pattern-stroke: max(2px, calc(var(--aba-divider-thickness) * 1.1));
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 calc(var(--aba-divider-gap) * 0.12),
    currentColor calc(var(--aba-divider-gap) * 0.12) calc((var(--aba-divider-gap) * 0.12) + var(--aba-divider-pattern-stroke)),
    transparent calc((var(--aba-divider-gap) * 0.12) + var(--aba-divider-pattern-stroke)) calc(var(--aba-divider-gap) * 0.76)
  );
  background-size: calc(var(--aba-divider-gap) * 1.12) 100%;
  box-shadow:
    0 0 0 0.85px currentColor,
    0 0 calc(7px * var(--aba-divider-strength)) color-mix(in srgb, currentColor 24%, transparent);
}

.aba-animated-divider--pattern-dashed .aba-animated-divider__line {
  --aba-divider-block-height: max(7px, calc(var(--aba-divider-thickness) * 1.7));
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 calc(var(--aba-divider-gap) * 1.08),
    transparent calc(var(--aba-divider-gap) * 1.08) calc(var(--aba-divider-gap) * 1.5)
  );
  background-size: calc(var(--aba-divider-gap) * 1.55) 100%;
  box-shadow:
    0 0 0 0.7px currentColor,
    0 0 calc(5px * var(--aba-divider-strength)) color-mix(in srgb, currentColor 18%, transparent);
}

.aba-animated-divider--pattern-dots .aba-animated-divider__line {
  --aba-divider-block-height: max(9px, calc(var(--aba-divider-thickness) * 2.35));
  background-image: radial-gradient(circle, currentColor 0 60%, transparent 64%);
  background-size: calc(var(--aba-divider-gap) * 1.05) 100%;
  background-repeat: repeat-x;
  background-position: left center;
  box-shadow:
    0 0 0 0.6px currentColor,
    0 0 calc(5px * var(--aba-divider-strength)) color-mix(in srgb, currentColor 18%, transparent);
}

.aba-animated-divider--pattern-double .aba-animated-divider__line {
  --aba-divider-block-height: max(9px, calc((var(--aba-divider-thickness) * 2) + var(--aba-divider-double-gap)));
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    100% var(--aba-divider-thickness),
    100% var(--aba-divider-thickness);
  background-repeat: no-repeat;
  background-position:
    left top,
    left bottom;
  box-shadow:
    0 0 0 0.7px currentColor,
    0 0 calc(5px * var(--aba-divider-strength)) color-mix(in srgb, currentColor 18%, transparent);
}

.aba-animated-divider--pattern-plusminus .aba-animated-divider__line {
  --aba-divider-block-height: max(11px, calc(var(--aba-divider-thickness) * 3));
  --aba-divider-pm-step: calc(var(--aba-divider-gap) * 1.6);
  --aba-divider-pm-bar: max(2px, calc(var(--aba-divider-thickness) * 0.7));
  background-image:
    repeating-linear-gradient(
      90deg,
      currentColor 0 var(--aba-divider-pm-step),
      transparent var(--aba-divider-pm-step) calc(var(--aba-divider-pm-step) * 2)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--aba-divider-pm-step) - (var(--aba-divider-pm-bar) / 2)),
      currentColor calc(var(--aba-divider-pm-step) - (var(--aba-divider-pm-bar) / 2)) calc(var(--aba-divider-pm-step) + (var(--aba-divider-pm-bar) / 2)),
      transparent calc(var(--aba-divider-pm-step) + (var(--aba-divider-pm-bar) / 2)) calc(var(--aba-divider-pm-step) * 2)
    );
  background-size:
    auto var(--aba-divider-thickness),
    auto calc(var(--aba-divider-thickness) * 2.5);
  background-repeat: repeat-x;
  background-position:
    left calc(50% - (var(--aba-divider-thickness) / 2)),
    left center;
  box-shadow:
    0 0 0 0.7px currentColor,
    0 0 calc(5px * var(--aba-divider-strength)) color-mix(in srgb, currentColor 18%, transparent);
}

.aba-animated-divider--anim-pulse .aba-animated-divider__line {
  animation: abaDividerPulse var(--aba-divider-duration) ease-in-out infinite;
}

.aba-animated-divider--anim-signal .aba-animated-divider__line {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--aba-divider-color) 10%, transparent),
    0 0 calc(8px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 14%, transparent);
}

.aba-animated-divider--anim-signal .aba-animated-divider__line::before {
  width: 28%;
  height: calc(var(--aba-divider-block-height) * 3.2);
  top: 50%;
  left: -30%;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--aba-divider-glow-color) 76%, white) 18%,
    color-mix(in srgb, var(--aba-divider-glow-color) 92%, white) 48%,
    color-mix(in srgb, var(--aba-divider-glow-color) 76%, white) 78%,
    transparent 100%
  );
  clip-path: polygon(
    0 56%,
    12% 56%,
    18% 56%,
    26% 34%,
    34% 68%,
    42% 18%,
    50% 86%,
    58% 42%,
    66% 58%,
    74% 28%,
    82% 60%,
    90% 56%,
    100% 56%,
    100% 70%,
    0 70%
  );
  filter:
    drop-shadow(0 0 calc(8px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 78%, transparent))
    drop-shadow(0 0 calc(18px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 46%, transparent));
  opacity: 0.98;
  animation: abaDividerSignal var(--aba-divider-duration) linear infinite;
}

.aba-animated-divider--anim-signal .aba-animated-divider__line::after {
  width: 34%;
  height: calc(var(--aba-divider-block-height) * 3.8);
  top: 50%;
  left: -36%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--aba-divider-glow-color) 52%, white) 0, transparent 58%),
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--aba-divider-glow-color) 32%, transparent) 36%,
      color-mix(in srgb, var(--aba-divider-glow-color) 54%, transparent) 50%,
      color-mix(in srgb, var(--aba-divider-glow-color) 32%, transparent) 64%,
      transparent 100%
    );
  filter: blur(calc(4px * var(--aba-divider-strength)));
  opacity: 0.62;
  animation: abaDividerSignal var(--aba-divider-duration) linear infinite;
}

.aba-animated-divider--anim-glitch .aba-animated-divider__line::before,
.aba-animated-divider--anim-glitch .aba-animated-divider__line::after {
  background-repeat: repeat-x;
  background-size:
    calc(var(--aba-divider-gap) * 2.1) 100%,
    calc(var(--aba-divider-gap) * 3.2) 100%;
  opacity: 0;
  mix-blend-mode: screen;
}

.aba-animated-divider--anim-glitch .aba-animated-divider__line::before {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--aba-divider-gap) * 0.9),
      color-mix(in srgb, var(--aba-divider-color) 90%, white) calc(var(--aba-divider-gap) * 0.9) calc(var(--aba-divider-gap) * 1.28),
      transparent calc(var(--aba-divider-gap) * 1.28) calc(var(--aba-divider-gap) * 2.1)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--aba-divider-gap) * 1.6),
      color-mix(in srgb, var(--aba-divider-color) 82%, transparent) calc(var(--aba-divider-gap) * 1.6) calc(var(--aba-divider-gap) * 1.95),
      transparent calc(var(--aba-divider-gap) * 1.95) calc(var(--aba-divider-gap) * 3.2)
    );
  animation: abaDividerGlitchPrimary calc(var(--aba-divider-duration) * 1.35) steps(1, end) infinite;
}

.aba-animated-divider--anim-glitch .aba-animated-divider__line::after {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--aba-divider-gap) * 1.15),
      color-mix(in srgb, var(--aba-divider-color) 62%, white) calc(var(--aba-divider-gap) * 1.15) calc(var(--aba-divider-gap) * 1.45),
      transparent calc(var(--aba-divider-gap) * 1.45) calc(var(--aba-divider-gap) * 2.4)
    );
  animation: abaDividerGlitchSecondary calc(var(--aba-divider-duration) * 1.1) steps(1, end) infinite;
}

.aba-animated-divider--anim-scanline .aba-animated-divider__line::before {
  width: 16%;
  left: -20%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--aba-divider-glow-color) 58%, white) 46%,
    transparent 100%
  );
  opacity: 0.92;
  filter: blur(calc(1.2px * var(--aba-divider-strength)));
  animation: abaDividerScanline var(--aba-divider-duration) linear infinite;
}

.aba-animated-divider--anim-glow .aba-animated-divider__line {
  animation: abaDividerGlow var(--aba-divider-duration) ease-in-out infinite;
}

@keyframes abaDividerPulse {
  0%, 100% {
    opacity: 0.78;
    transform: scaleX(1);
    filter: drop-shadow(0 0 calc(6px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 30%, transparent));
  }
  50% {
    opacity: 1;
    transform: scaleX(0.985);
    filter: drop-shadow(0 0 calc(12px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 52%, transparent));
  }
}

@keyframes abaDividerSignal {
  0% {
    transform: translate(-6%, -50%);
  }
  100% {
    transform: translate(432%, -50%);
  }
}

@keyframes abaDividerGlitchPrimary {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  9% { opacity: 0.92; transform: translate3d(-10px, 0, 0); }
  10% { opacity: 0; transform: translate3d(0, 0, 0); }
  34% { opacity: 0.84; transform: translate3d(14px, 0, 0); }
  36% { opacity: 0.22; transform: translate3d(-8px, 0, 0); }
  38% { opacity: 0; transform: translate3d(0, 0, 0); }
  67% { opacity: 0.88; transform: translate3d(-16px, 0, 0); }
  69% { opacity: 0.18; transform: translate3d(9px, 0, 0); }
  71% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes abaDividerGlitchSecondary {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  18% { opacity: 0.72; transform: translate3d(8px, 0, 0); }
  19% { opacity: 0; transform: translate3d(0, 0, 0); }
  52% { opacity: 0.78; transform: translate3d(-12px, 0, 0); }
  54% { opacity: 0.18; transform: translate3d(4px, 0, 0); }
  56% { opacity: 0; transform: translate3d(0, 0, 0); }
  82% { opacity: 0.66; transform: translate3d(10px, 0, 0); }
  84% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes abaDividerScanline {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(760%);
  }
}

@keyframes abaDividerGlow {
  0%, 100% {
    opacity: 0.88;
    filter:
      drop-shadow(0 0 calc(8px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 34%, transparent))
      drop-shadow(0 0 calc(16px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 18%, transparent));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 calc(14px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 56%, transparent))
      drop-shadow(0 0 calc(26px * var(--aba-divider-strength)) color-mix(in srgb, var(--aba-divider-glow-color) 34%, transparent));
  }
}