/* AutoSigma Process Flow — frontend styles (v1.1.0)
   All colours are CSS variables so Elementor style controls can override them. */

.asflow{
  /* default theme tokens (overridden by Elementor Style controls) */
  --as-indigo:#5B2EE5;
  --as-indigo-2:#4F7BE8;
  --as-accent:#5B2EE5;
  --as-ink:#141A2E;
  --as-muted:#5A6178;
  --as-line:#C9CEEC;
  --as-chip-bg:#F1EEFE;
  --as-check:#5B2EE5;
  --as-card-bg:#FFFFFF;
  --as-card-border:#E7E9F5;
  --as-line-dur:.5s;
  --as-hub-size:78px;
  --as-hub-icon:38px;
  --as-chip-size:46px;
  --as-chip-icon:24px;

  position:relative;          /* the SVG overlay is positioned against this */
  background:transparent;     /* the box now lives on .asflow__card */
  border:0;
  padding:0;
}

.asflow *{box-sizing:border-box}

/* connector overlay spans the whole component (hub sits outside the card) */
.asflow__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.asflow__svg path{fill:none;stroke:var(--as-line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.asflow__svg path.conn{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset var(--as-line-dur) ease}
.asflow__svg path.conn.is-on{stroke-dashoffset:0}
.asflow__svg .arrow{fill:var(--as-line);stroke:none;opacity:0;transition:opacity .2s ease .35s}
.asflow__svg .arrow.is-on{opacity:1}

/* layout: hub | card */
.asflow__layout{position:relative;z-index:1;display:flex;align-items:center;gap:18px}

/* the hub, OUT of the box, in a round frame */
.asflow__hub{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:6px}
.hub-mark{
  width:var(--as-hub-size,78px);height:var(--as-hub-size,78px);border-radius:50%;color:#fff;
  background:linear-gradient(140deg,var(--as-indigo),var(--as-indigo-2));
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  /* round "frame": soft ring + drop shadow */
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--as-indigo) 12%, transparent),
    0 14px 28px -10px color-mix(in srgb, var(--as-indigo) 70%, transparent);
}
.hub-mark svg,.hub-mark img{width:var(--as-hub-icon,38px);height:var(--as-hub-icon,38px);
  max-width:100%;max-height:100%;object-fit:contain;display:block}
.hub-mark i{font-size:var(--as-hub-icon,34px);line-height:1;color:#fff}

/* the card / box now wraps only the header + rows */
.asflow__card{flex:1 1 auto;background:var(--as-card-bg);border:1px solid var(--as-card-border);
  border-radius:22px;padding:30px 32px 26px;box-shadow:0 18px 48px -28px rgba(38,28,90,.4)}

.asflow__head{text-align:center;margin-bottom:22px}
.asflow__eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--as-accent);margin:0 0 6px}
.asflow__sub{font-size:14px;color:var(--as-muted);margin:0}

/* rows */
.asflow__rows{display:flex;flex-direction:column;gap:12px}
.asrow{display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:14px;background:transparent;
  transition:background .35s ease, box-shadow .35s ease}
.asrow__icon{flex:0 0 auto;width:var(--as-chip-size,46px);height:var(--as-chip-size,46px);border-radius:12px;
  background:var(--as-chip-bg);color:var(--as-accent);display:flex;align-items:center;justify-content:center;
  transition:background .35s ease, box-shadow .35s ease}
.asrow__icon svg,.asrow__icon img{width:var(--as-chip-icon,24px);height:var(--as-chip-icon,24px);
  max-width:100%;max-height:100%;object-fit:contain;display:block}
.asrow__icon i{font-size:var(--as-chip-icon,22px);line-height:1}
.asrow__text{flex:1 1 auto;min-width:0}
.asrow__title{font-size:15px;font-weight:800;margin:0 0 2px;color:var(--as-ink)}
.asrow__desc{font-size:13px;line-height:1.4;color:var(--as-muted);margin:0}

/* check */
.asrow__check{flex:0 0 auto;width:30px;height:30px;border-radius:50%;color:var(--as-check);
  border:2px solid var(--as-check);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.4);
  transition:opacity .25s ease, transform .35s cubic-bezier(.2,1.4,.4,1)}
.asrow__check svg{width:15px;height:15px}
.asrow__check i{font-size:14px;line-height:1}
.asrow__check svg path{fill:none;stroke:var(--as-check);stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s ease .08s}
.asrow.is-on .asrow__check{opacity:1;transform:scale(1)}
.asrow.is-on .asrow__check svg path{stroke-dashoffset:0}

/* ---------- connected "light up" state (when the line lands) ---------- */
.asrow.is-on{background:color-mix(in srgb, var(--as-accent) 7%, transparent)}
.asrow.is-on .asrow__icon{background:color-mix(in srgb, var(--as-accent) 16%, #fff);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--as-accent) 28%, transparent)}

/* ---------- pulse effects (gated by toggles via data-attributes) ---------- */

/* hub breathing glow */
@keyframes as-breathe{
  0%,100%{box-shadow:
    0 0 0 6px color-mix(in srgb, var(--as-indigo) 12%, transparent),
    0 14px 28px -12px color-mix(in srgb, var(--as-indigo) 60%, transparent)}
  50%{box-shadow:
    0 0 0 12px color-mix(in srgb, var(--as-indigo) 6%, transparent),
    0 18px 36px -8px color-mix(in srgb, var(--as-indigo) 95%, transparent)}
}
.asflow[data-hubpulse="1"] .hub-mark{animation:as-breathe 3s ease-in-out infinite}

/* connector colour pulse — cycles the AutoSigma colours once connected */
@keyframes as-line-pulse{
  0%,100%{stroke:var(--as-indigo)}
  50%{stroke:var(--as-indigo-2)}
}
@keyframes as-arrow-pulse{
  0%,100%{fill:var(--as-indigo)}
  50%{fill:var(--as-indigo-2)}
}
.asflow[data-linepulse="1"] .asflow__svg path.conn.is-on{animation:as-line-pulse 2.4s ease-in-out infinite}
.asflow[data-linepulse="1"] .asflow__svg .arrow.is-on{animation:as-arrow-pulse 2.4s ease-in-out infinite}

/* step pulses once as its line lands */
@keyframes as-row-pop{
  0%{transform:scale(1)}
  35%{transform:scale(1.025)}
  100%{transform:scale(1)}
}
.asflow[data-rowpulse="1"] .asrow.is-on{animation:as-row-pop .55s ease}

/* When the reveal is disabled, show the finished state. */
.asflow[data-animate="0"] .asrow__check{opacity:1;transform:scale(1)}
.asflow[data-animate="0"] .asrow__check svg path{stroke-dashoffset:0}
.asflow[data-animate="0"] .asflow__svg path.conn{stroke-dashoffset:0}
.asflow[data-animate="0"] .asflow__svg .arrow{opacity:1}

/* ---------- vertical / mobile layout (class added by JS when narrow) ---------- */
.asflow.is-vertical .asflow__layout{flex-direction:column;align-items:stretch;gap:10px}
.asflow.is-vertical .asflow__hub{justify-content:flex-start;padding-left:4px}
.asflow.is-vertical .asflow__card{padding-left:34px}
.asflow.is-vertical .asflow__rows{gap:14px}

@media (prefers-reduced-motion: reduce){
  .asflow__svg path.conn,
  .asflow__svg .arrow,
  .asrow,
  .asrow__icon,
  .asrow__check,
  .asrow__check svg path{transition:none !important}
  .hub-mark,
  .asflow[data-linepulse="1"] .asflow__svg path.conn.is-on,
  .asflow[data-linepulse="1"] .asflow__svg .arrow.is-on,
  .asflow[data-rowpulse="1"] .asrow.is-on{animation:none !important}
}