/* ═══════════════════════════════════════════════════════════════════
   Foxco Separator Widget v1.1.0
   Animation driven by CSS custom properties injected from PHP:
     --foxco-sep-speed       : cycle duration in seconds
     --foxco-sep-easing      : CSS easing function
     --foxco-sep-min-op      : minimum opacity (rest state)
     --foxco-sep-glow-mult   : glow brightness multiplier
     --foxco-sep-pause-pct   : % of cycle spent at rest (laser dash)
   ═══════════════════════════════════════════════════════════════════ */

.foxco-sep-wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.foxco-sep-line {
    width: 100%;
    display: block;
    border-radius: 99px;
}


/* ══════════════════════════════════════════════════════════════════
   1. Gradient Accent
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--gradient-accent .foxco-sep-accent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 99px;
}

.foxco-sep--gradient-accent.foxco-sep--animated .foxco-sep-accent {
    animation: foxco-sep-breathe var(--foxco-sep-speed, 3s) var(--foxco-sep-easing, ease-in-out) infinite;
}

@keyframes foxco-sep-breathe {
    0%, 100% { opacity: 1; }
    50%       { opacity: var(--foxco-sep-min-op, 0.6); }
}


/* ══════════════════════════════════════════════════════════════════
   2. Heartbeat / EKG
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--heartbeat { overflow: hidden; }

.foxco-sep-svg { width: 100%; display: block; }
.foxco-sep-ekg { overflow: visible; }

.foxco-sep--heartbeat.foxco-sep--animated .foxco-sep-ekg path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: foxco-ekg-draw var(--foxco-sep-speed, 3s) var(--foxco-sep-easing, ease-in-out) infinite;
}

@keyframes foxco-ekg-draw {
    0%   { stroke-dashoffset: 1200; opacity: var(--foxco-sep-min-op, 0.3); }
    60%  { stroke-dashoffset: 0;    opacity: 1; }
    80%  { stroke-dashoffset: 0;    opacity: 1; }
    100% { stroke-dashoffset: -1200; opacity: var(--foxco-sep-min-op, 0.3); }
}


/* ══════════════════════════════════════════════════════════════════
   3. Neon Glow
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--neon-glow .foxco-sep-neon { border-radius: 99px; }

.foxco-sep--neon-glow.foxco-sep--animated .foxco-sep-neon {
    animation: foxco-neon-pulse var(--foxco-sep-speed, 3s) var(--foxco-sep-easing, ease-in-out) infinite;
}

@keyframes foxco-neon-pulse {
    0%, 100% { opacity: 1;   filter: brightness(1); }
    50%       { opacity: var(--foxco-sep-min-op, 0.6); filter: brightness(calc(1 + var(--foxco-sep-glow-mult, 0.5))); }
}


/* ══════════════════════════════════════════════════════════════════
   4. Double Fade
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--double-fade .foxco-sep-double {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.foxco-sep--double-fade .foxco-sep-double__top,
.foxco-sep--double-fade .foxco-sep-double__bot {
    border-radius: 99px;
}

.foxco-sep--double-fade.foxco-sep--animated .foxco-sep-double__top {
    animation: foxco-df-top var(--foxco-sep-speed, 3s) var(--foxco-sep-easing, ease-in-out) infinite;
}
.foxco-sep--double-fade.foxco-sep--animated .foxco-sep-double__bot {
    animation: foxco-df-bot var(--foxco-sep-speed, 3s) var(--foxco-sep-easing, ease-in-out) infinite;
}

@keyframes foxco-df-top {
    0%, 100% { opacity: 1; transform: scaleX(1); }
    50%       { opacity: var(--foxco-sep-min-op, 0.5); transform: scaleX(0.85); }
}
@keyframes foxco-df-bot {
    0%, 100% { opacity: var(--foxco-sep-min-op, 0.5); transform: scaleX(0.85); }
    50%       { opacity: 1; transform: scaleX(1); }
}


/* ══════════════════════════════════════════════════════════════════
   5. Zigzag
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--zigzag .foxco-sep-zigzag { overflow: visible; }

.foxco-sep--zigzag.foxco-sep--animated .foxco-sep-zigzag path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: foxco-zz-draw var(--foxco-sep-speed, 3s) linear infinite;
}

@keyframes foxco-zz-draw {
    0%   { stroke-dashoffset: 2000; opacity: var(--foxco-sep-min-op, 0.4); }
    55%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -2000; opacity: var(--foxco-sep-min-op, 0.4); }
}


/* ══════════════════════════════════════════════════════════════════
   6. Laser Dash
   --foxco-sep-pause-pct controls how long the bar rests vs moves.
   We model this with a keyframe that holds still at the start and
   end of each cycle, then sweeps quickly across the middle.
   ══════════════════════════════════════════════════════════════════ */
.foxco-sep--laser-dash .foxco-sep-laser {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 99px;
}

.foxco-sep--laser-dash.foxco-sep--animated .foxco-sep-laser {
    /*
      The keyframe below bakes in the pause via percentage stops.
      Because CSS @keyframes can't use custom properties as stop positions,
      we use a JS-powered approach for the pause: we set animation-delay
      and animation-duration from the PHP values, and use a timing function
      that naturally front- and back-loads the hold.

      For deeper pause control (>40%), we inject a data attribute and a
      matching JS snippet that overwrites the animation with a dynamically
      computed one.
    */
    animation: foxco-laser-scan var(--foxco-sep-speed, 3s) var(--foxco-sep-easing, ease-in-out) infinite;
}

@keyframes foxco-laser-scan {
    /* Rest phase: bar sits near left, almost invisible */
    0%   { left: 20%; opacity: var(--foxco-sep-min-op, 0.08); filter: brightness(0.8); }
    /* Active sweep begins */
    40%  { left: 22%; opacity: var(--foxco-sep-min-op, 0.08); filter: brightness(0.8); }
    /* Sweep across */
    55%  { left: 50%; opacity: 1;   filter: brightness(calc(1 + var(--foxco-sep-glow-mult, 0.5))); }
    70%  { left: 78%; opacity: var(--foxco-sep-min-op, 0.08); filter: brightness(0.8); }
    /* Rest again at right before looping */
    100% { left: 20%; opacity: var(--foxco-sep-min-op, 0.08); filter: brightness(0.8); }
}

/*
   Dynamic pause override via data-laser-pause attribute.
   JS injected in the widget outputs a <style> tag with custom keyframes
   keyed to this widget's unique ID when pause > 40%.
   (See the render() method — it outputs a <script> for pause > 40.)
*/