/* ═══════════════════════════════════════════════════════════════════
   Foxco Separator Widget — v1.0.0
   ═══════════════════════════════════════════════════════════════════ */

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

/* ── Shared base line ─────────────────────────────────────────────── */
.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 3s ease-in-out infinite;
}

@keyframes foxco-sep-breathe {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50%       { opacity: 0.7; filter: brightness(1.4); }
}

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

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

.foxco-sep-ekg {
    overflow: visible;
}

/* Animate a "scan line" effect — clip-path sweeps across */
.foxco-sep--heartbeat.foxco-sep--animated .foxco-sep-ekg path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: foxco-ekg-draw 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes foxco-ekg-draw {
    0%   { stroke-dashoffset: 1200; opacity: 1; }
    70%  { stroke-dashoffset: 0;    opacity: 1; }
    85%  { stroke-dashoffset: 0;    opacity: 1; }
    100% { stroke-dashoffset: -1200; opacity: 0.2; }
}

/* ══════════════════════════════════════════════════════════════════
   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 2s ease-in-out infinite;
}

@keyframes foxco-neon-pulse {
    0%, 100% { opacity: 1;   filter: brightness(1); }
    50%       { opacity: 0.6; filter: brightness(2); }
}

/* ══════════════════════════════════════════════════════════════════
   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 3s ease-in-out infinite;
}
.foxco-sep--double-fade.foxco-sep--animated .foxco-sep-double__bot {
    animation: foxco-df-bot 3s ease-in-out infinite;
}

@keyframes foxco-df-top {
    0%, 100% { opacity: 1; transform: scaleX(1); }
    50%       { opacity: 0.5; transform: scaleX(0.85); }
}
@keyframes foxco-df-bot {
    0%, 100% { opacity: 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 3s linear infinite;
}

@keyframes foxco-zz-draw {
    0%   { stroke-dashoffset: 2000; }
    60%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -2000; }
}

/* ══════════════════════════════════════════════════════════════════
   6. Laser Dash
   ══════════════════════════════════════════════════════════════════ */
.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 {
    animation: foxco-laser-scan 2s ease-in-out infinite;
}

@keyframes foxco-laser-scan {
    0%   { left: 20%; opacity: 0.6; filter: brightness(1); }
    50%  { left: 80%; opacity: 1;   filter: brightness(1.8); }
    100% { left: 20%; opacity: 0.6; filter: brightness(1); }
}