/* ==========================================================================
   Aidem Border Effects
   Animated Shape Divider — real height/depth, anchored top or bottom,
   with the silhouette carrying a moving glow/spotlight/scan animation.
   ========================================================================== */

/* --------------------------------------------------------------------
   Containing-block fix.
   The shape is position:absolute and sizes itself against its nearest
   positioned ancestor — the Elementor widget wrapper. Elementor gives
   that wrapper position:relative but NO width when it sits inside a
   flex-based Container (.e-con / .e-con-full) or a Grid Container:
   flex/grid items default to shrinking to their content size, and this
   widget has no visible content, so the wrapper (and everything
   absolutely positioned inside it) collapses to 0px wide.
   This forces the widget wrapper to always claim full available width,
   regardless of which Elementor layout type (classic Section, flex
   Container, or Grid Container) it is placed inside.
   -------------------------------------------------------------------- */
.elementor-widget-aidem_border_effects,
.elementor-widget-aidem_border_effects > .elementor-widget-container {
  width: 100%;
  max-width: 100%;
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  height: 0;
  min-height: 0;
  align-self: flex-start;
  justify-self: stretch;
  overflow: visible;
}

.aba-border-effects {
  --aba-be-height: 100px;
  --aba-be-color: #8df411;
  --aba-be-glow-color: #b8ff66;
  --aba-be-metal-color: #3a3f42;
  --aba-be-duration: 10s;
  --aba-be-strength: 1;

  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--aba-be-height);
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
  z-index: 2;
  transform-origin: center center;
}

.aba-border-effects--pos-bottom {
  bottom: 0;
}

.aba-border-effects--pos-top {
  top: 0;
  transform: scaleY(-1);
}

.aba-border-effects--pos-top.aba-border-effects--invert {
  transform: scaleY(1);
}

.aba-border-effects--pos-bottom.aba-border-effects--invert {
  transform: scaleY(-1);
}

.aba-border-effects--flip {
  transform: scaleX(-1);
}

.aba-border-effects--pos-top.aba-border-effects--flip {
  transform: scaleX(-1) scaleY(-1);
}

.aba-border-effects--pos-top.aba-border-effects--invert.aba-border-effects--flip {
  transform: scaleX(-1) scaleY(1);
}

.aba-border-effects--pos-bottom.aba-border-effects--invert.aba-border-effects--flip {
  transform: scaleX(-1) scaleY(-1);
}

.aba-border-effects--front {
  z-index: 5;
}

.aba-border-effects__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.aba-border-effects__base,
.aba-border-effects__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.aba-border-effects__base {
  filter:
    drop-shadow(0 0 calc(4px * var(--aba-be-strength)) color-mix(in srgb, var(--aba-be-color) 45%, transparent))
    drop-shadow(0 0 calc(10px * var(--aba-be-strength)) color-mix(in srgb, var(--aba-be-glow-color) 25%, transparent));
}

.aba-border-effects__glow {
  overflow: hidden;
}

.aba-border-effects__glow-inner {
  position: absolute;
  inset: -20% -30%;
  display: block;
}

/* --------------------------------------------------------------------
   1. Wave — Pulsating Glow: a blurred highlight travels across the
      wave silhouette while the base shape softly pulses.
   -------------------------------------------------------------------- */

.aba-border-effects--shape-wave_pulse .aba-border-effects__base {
  animation: aba-be-pulse-glow var(--aba-be-duration) ease-in-out infinite;
}

.aba-border-effects--shape-wave_pulse .aba-border-effects__glow-inner {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--aba-be-glow-color) 92%, white) 50%,
    transparent
  );
  filter: blur(4%);
  animation: aba-be-pulse-travel calc(var(--aba-be-duration) * 1.6) linear infinite;
}

@keyframes aba-be-pulse-glow {
  0%, 100% {
    opacity: calc(0.7 * var(--aba-be-strength));
  }
  50% {
    opacity: 1;
  }
}

@keyframes aba-be-pulse-travel {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(60%);
  }
}

/* --------------------------------------------------------------------
   2. Wave — Slow Drift: repeating stripes drift horizontally within
      the wave silhouette, reading as a slow-moving water surface.
   -------------------------------------------------------------------- */

.aba-border-effects--shape-slow_wave .aba-border-effects__glow-inner {
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--aba-be-color) 80%, transparent) 0%,
    color-mix(in srgb, var(--aba-be-glow-color) 95%, transparent) 6%,
    color-mix(in srgb, var(--aba-be-color) 80%, transparent) 12%
  );
  background-size: 40% 100%;
  opacity: calc(0.6 * var(--aba-be-strength));
  animation: aba-be-wave-drift calc(var(--aba-be-duration) * 2) linear infinite;
}

@keyframes aba-be-wave-drift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}

/* --------------------------------------------------------------------
   3. Peaks — Metallic Spotlight: metallic gradient base (set inline
      via SVG), with slow, staggered spotlight pulses along the peaks.
   -------------------------------------------------------------------- */

.aba-border-effects__spot {
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 16%;
  border-radius: 4px;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--aba-be-glow-color) 95%, white) 0%,
    color-mix(in srgb, var(--aba-be-color) 70%, transparent) 55%,
    transparent 80%
  );
  opacity: 0;
  filter: blur(1%);
}

.aba-border-effects--shape-peaks_spotlight .aba-border-effects__spot--1 {
  left: 6%;
  animation: aba-be-spot-pulse calc(var(--aba-be-duration) * 1.1) ease-in-out infinite;
  animation-delay: 0s;
}

.aba-border-effects--shape-peaks_spotlight .aba-border-effects__spot--2 {
  left: 42%;
  animation: aba-be-spot-pulse calc(var(--aba-be-duration) * 0.85) ease-in-out infinite;
  animation-delay: calc(var(--aba-be-duration) * 0.35);
}

.aba-border-effects--shape-peaks_spotlight .aba-border-effects__spot--3 {
  left: 78%;
  animation: aba-be-spot-pulse calc(var(--aba-be-duration) * 1.35) ease-in-out infinite;
  animation-delay: calc(var(--aba-be-duration) * 0.62);
}

@keyframes aba-be-spot-pulse {
  0%, 60%, 100% {
    opacity: 0;
    transform: scaleX(0.7);
  }
  15%, 35% {
    opacity: calc(0.9 * var(--aba-be-strength));
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------
   4. Curve — Scanning Pulse: a soft light sweeps end-to-end across
      the curve silhouette, continuously.
   -------------------------------------------------------------------- */

.aba-border-effects--shape-scan_curve .aba-border-effects__glow-inner {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--aba-be-glow-color) 95%, white) 50%,
    transparent
  );
  width: 40%;
  left: -40%;
  filter: blur(3%);
  animation: aba-be-scan-sweep var(--aba-be-duration) ease-in-out infinite;
}

@keyframes aba-be-scan-sweep {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(280%);
  }
  50.001%, 100% {
    transform: translateX(0%);
  }
}

/* --------------------------------------------------------------------
   5. Clouds — Breathing Glow: no movement, the cloud silhouette's
      glow intensity slowly breathes in and out.
   -------------------------------------------------------------------- */

.aba-border-effects--shape-breathing_cloud .aba-border-effects__base {
  animation: aba-be-breathe var(--aba-be-duration) ease-in-out infinite;
}

.aba-border-effects--shape-breathing_cloud .aba-border-effects__glow-inner {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--aba-be-glow-color) 70%, transparent) 0%,
    transparent 70%
  );
  animation: aba-be-breathe var(--aba-be-duration) ease-in-out infinite;
}

@keyframes aba-be-breathe {
  0%, 100% {
    opacity: calc(0.5 * var(--aba-be-strength));
    filter: drop-shadow(0 0 calc(3px * var(--aba-be-strength)) color-mix(in srgb, var(--aba-be-glow-color) 30%, transparent));
  }
  50% {
    opacity: calc(1 * var(--aba-be-strength));
    filter: drop-shadow(0 0 calc(16px * var(--aba-be-strength)) color-mix(in srgb, var(--aba-be-glow-color) 55%, transparent));
  }
}

/* --------------------------------------------------------------------
   6. Arches — Gradient Lines: several parallel bands, each a different
      shade/tint of the primary colour, sliding past one another.
   -------------------------------------------------------------------- */

.aba-border-effects--shape-gradient_lines .aba-border-effects__base path {
  fill: color-mix(in srgb, var(--aba-be-color) 70%, black);
}

.aba-border-effects--shape-gradient_lines .aba-border-effects__glow-inner {
  background: repeating-linear-gradient(
    100deg,
    color-mix(in srgb, var(--aba-be-color) 92%, black) 0%,
    color-mix(in srgb, var(--aba-be-color) 92%, black) 4%,
    color-mix(in srgb, var(--aba-be-color) 55%, white) 4%,
    color-mix(in srgb, var(--aba-be-color) 55%, white) 8%,
    var(--aba-be-color) 8%,
    var(--aba-be-color) 12%,
    color-mix(in srgb, var(--aba-be-glow-color) 80%, white) 12%,
    color-mix(in srgb, var(--aba-be-glow-color) 80%, white) 16%,
    color-mix(in srgb, var(--aba-be-color) 35%, white) 16%,
    color-mix(in srgb, var(--aba-be-color) 35%, white) 20%
  );
  background-size: 260% 100%;
  opacity: calc(0.85 * var(--aba-be-strength));
  animation: aba-be-gradient-flow calc(var(--aba-be-duration) * 2.4) linear infinite;
}

@keyframes aba-be-gradient-flow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -260% 0%;
  }
}

/* --------------------------------------------------------------------
   7. Zigzag — Angled Beams: several independent light beams, each at
      a different fixed angle, sweeping across the silhouette on its
      own timing — distinct from a single moving highlight.
   -------------------------------------------------------------------- */

.aba-border-effects__beam {
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 10%;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--aba-be-glow-color) 92%, white) 50%,
    transparent
  );
  filter: blur(0.6%);
  opacity: 0;
}

.aba-border-effects--shape-angled_beams .aba-border-effects__beam--1 {
  transform: rotate(22deg);
  animation: aba-be-beam-sweep calc(var(--aba-be-duration) * 1.4) ease-in-out infinite;
  animation-delay: 0s;
}

.aba-border-effects--shape-angled_beams .aba-border-effects__beam--2 {
  transform: rotate(-16deg);
  animation: aba-be-beam-sweep calc(var(--aba-be-duration) * 1.1) ease-in-out infinite;
  animation-delay: calc(var(--aba-be-duration) * 0.28);
}

.aba-border-effects--shape-angled_beams .aba-border-effects__beam--3 {
  transform: rotate(35deg);
  animation: aba-be-beam-sweep calc(var(--aba-be-duration) * 1.7) ease-in-out infinite;
  animation-delay: calc(var(--aba-be-duration) * 0.5);
}

.aba-border-effects--shape-angled_beams .aba-border-effects__beam--4 {
  transform: rotate(-30deg);
  animation: aba-be-beam-sweep calc(var(--aba-be-duration) * 1.25) ease-in-out infinite;
  animation-delay: calc(var(--aba-be-duration) * 0.74);
}

@keyframes aba-be-beam-sweep {
  0% {
    left: -15%;
    opacity: 0;
  }
  35%, 55% {
    opacity: calc(0.9 * var(--aba-be-strength));
  }
  100% {
    left: 105%;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------
   Reduced motion — freeze on a soft glow instead of animating
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aba-border-effects * {
    animation: none !important;
  }

  .aba-border-effects .aba-border-effects__glow-inner {
    opacity: calc(0.5 * var(--aba-be-strength));
  }
}