/* =========================================================
   Rimage Solutions — workflow.css
   Home hero graphic: end-to-end workflow for medical practices
   BPO (patient access) -> Rimagination RCM -> CareAnalytix
   Uses the brand tokens from styles.css (:root).
   One animation cycle = 13.2s (11 steps x 1.1s + 1.1s pause).
   ========================================================= */

.wf{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.hero-visual .net{opacity:.45}

/* ---------- Stage cards ---------- */
.wf-card{position:relative;width:86%;padding:12px 14px 10px;border-radius:18px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);color:#E2E8F0;
  animation:wf-float 7s ease-in-out infinite,wf-card 13.2s ease-in-out infinite}
.wf-card.s2{align-self:flex-end;animation-delay:.8s,3.3s}
.wf-card.s3{animation-delay:1.6s,7.7s}

.wf-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.wf-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--grad);color:#fff}
.wf-ico .i{width:18px;height:18px}
.s2 .wf-ico{background:linear-gradient(135deg,#F4A261,#F7C59F)}
.s3 .wf-ico{background:linear-gradient(135deg,#00B4D8,#7FF3E6)}
.wf-title{flex:1;min-width:0;line-height:1.25}
.wf-title strong{display:block;color:#fff;font:700 .9rem var(--font-h)}
.wf-title small{display:block;font-size:.7rem;color:#9FB3C8}
.wf-num{font:800 .7rem var(--font-h);letter-spacing:.08em;color:var(--mint);padding:3px 8px;border-radius:999px;border:1px solid rgba(127,243,230,.35);white-space:nowrap}

/* ---------- Steps ---------- */
.wf-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wf-steps li{display:flex;align-items:center;gap:8px;font-size:.78rem;line-height:1.3;padding:3px 6px;border-radius:8px;
  animation:wf-step 13.2s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s)}
.wf-tick{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid rgba(127,243,230,.55);color:transparent;
  animation:wf-tick 13.2s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s)}
.wf-tick .i{width:10px;height:10px;stroke-width:3}
.wf-steps em{margin-left:auto;font-style:normal;font-size:.66rem;font-weight:600;color:#9FB3C8;
  padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.06);white-space:nowrap}

/* ---------- Connectors between stages ---------- */
.wf-link{position:relative;flex:1;min-height:34px;display:flex;align-items:center;justify-content:center;padding-left:18%}
.wf-link::before{content:"";position:absolute;left:24%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom,rgba(127,243,230,.7) 0 4px,transparent 4px 12px);
  background-size:2px 12px;animation:wf-dash 1s linear infinite}
.wf-link::after{content:"";position:absolute;left:24%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:#E6FFFB;box-shadow:0 0 0 4px rgba(127,243,230,.25),0 0 16px #7FF3E6;opacity:0;
  animation:wf-packet 13.2s linear infinite}
.wf-link.l1::after{animation-delay:2.6s}
.wf-link.l2::after{animation-delay:7.0s}
.wf-link span{position:relative;z-index:1;font-size:.68rem;font-weight:600;color:#E6FFFB;padding:3px 11px;border-radius:999px;
  background:rgba(11,37,69,.85);border:1px solid rgba(127,243,230,.35);white-space:nowrap}

/* ---------- Keyframes ---------- */
@keyframes wf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wf-card{0%,100%{border-color:rgba(255,255,255,.18)}
  4%,30%{border-color:rgba(127,243,230,.75);box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(127,243,230,.35),0 0 32px rgba(127,243,230,.18)}
  36%{border-color:rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(0,0,0,.35)}}
@keyframes wf-step{0%,10%,100%{background:transparent;color:#CBD5E1}
  1.5%,8.3%{background:rgba(127,243,230,.12);color:#fff}}
@keyframes wf-tick{0%,100%{background:transparent;color:transparent}
  1.5%{background:transparent;color:transparent;box-shadow:0 0 0 0 rgba(127,243,230,.6)}
  6%{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 0 0 6px rgba(127,243,230,0)}
  55%{background:var(--teal);border-color:var(--teal);color:#fff}
  60%{background:transparent;border-color:rgba(127,243,230,.55);color:transparent}}
@keyframes wf-dash{to{background-position:0 12px}}
@keyframes wf-packet{0%{top:0;opacity:0}1%{opacity:1}7%{top:calc(100% - 10px);opacity:1}9%,100%{top:calc(100% - 10px);opacity:0}}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero-visual{height:auto}
  .wf-card{width:92%}
}
@media(max-width:640px){
  .wf-card{width:100%}
  .wf-link{padding-left:0;justify-content:flex-end}
  .wf-link::before,.wf-link::after{left:18%}
  .wf-steps em{display:none}
}

/* ---------- Reduced motion: show the finished state ---------- */
@media(prefers-reduced-motion:reduce){
  .wf-tick{background:var(--teal);border-color:var(--teal);color:#fff}
  .wf-link::after{display:none}
}