/* workflow.css — «Как мы работаем». is-active: этап виден, сцена играет; is-run без is-active: гаснет
   на паузе; без is-run — сброс. Без JS и при reduced-motion — всё видно, конечные кадры. */

.workflow {
  --wf-bg:var(--bg, #0b0c0e);
  --wf-card:var(--bg-card, #15181c);
  --wf-line:var(--line, #24282e);
  --wf-ink:var(--ink, #f2efe9);
  --wf-soft:var(--ink-soft, #b4b1aa);
  --wf-faint:var(--ink-faint, #8f8d85);
  --wf-acc:var(--accent, #c9a961);
  --wf-acc-hi:var(--accent-deep, #e0c98c);
  --wf-on-acc:var(--on-accent, #0b0c0e);
  --wf-ok:#8fd39a;
  --wf-ease:cubic-bezier(.22, 1, .36, 1);
  --wf-fh:var(--font-head, "Manrope", system-ui, sans-serif);
  --wf-fb:var(--font-body, "Onest", system-ui, sans-serif);
  position:relative;
  padding-block:var(--space-5, 4rem);
  color:var(--wf-ink);
  overflow:hidden;
}
.workflow__inner{width:100%; max-width:var(--maxw, 1100px); margin-inline:auto; padding-inline:var(--space-3, 1.5rem)}

/* ---------- шапка ---------- */
.workflow__head{max-width:46rem; margin:0 0 var(--space-4, 2.5rem)}
.workflow__title{margin:0; font-family:var(--wf-fh); font-weight:800; font-size:clamp(1.7rem, 3.3vw, 2.4rem); line-height:1.12; letter-spacing:-.02em}
.workflow__lead{margin:var(--space-2, 1rem) 0 0; font-family:var(--wf-fb); font-size:1.08rem; line-height:1.6; color:var(--wf-soft)}

/* ---------- маршрут ---------- */
.workflow__track{position:relative}
.workflow__track::before{content:""; position:absolute; top:0; bottom:0; left:.8rem; width:2px; background:var(--wf-line)}
.workflow.is-js .workflow__track::before{display:none}
.workflow__route{position:absolute; inset:0; width:100%; height:100%; display:none; overflow:visible; pointer-events:none}
.workflow.is-js .workflow__route{display:block}
.workflow__route-base{fill:none; stroke:var(--wf-line); stroke-width:2}
.workflow__route-line{fill:none; stroke:var(--wf-acc); stroke-width:2.5; stroke-linecap:round; transition:stroke-dashoffset .25s linear}
.workflow__route-tip{opacity:0; transition:opacity .3s}
.workflow__route-tip.is-on{opacity:1}
.workflow__tip-halo{fill:var(--wf-acc); opacity:.18}
.workflow__tip-dot{fill:var(--wf-acc-hi)}
.workflow.is-still .workflow__route-tip{display:none}

.workflow__steps{list-style:none; margin:0; padding:0; position:relative; z-index:1}
.workflow__step{position:relative; padding:var(--space-3, 1.5rem) 0 var(--space-3, 1.5rem) 3rem}

/* точка на маршруте */
.workflow__dot{position:absolute; left:.175rem; top:calc(var(--space-3, 1.5rem) + 1.3rem); z-index:2; box-sizing:border-box; width:1.25rem; height:1.25rem; border-radius:50%; background:var(--wf-card); border:2px solid var(--wf-acc)}
.workflow__dot::before{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--wf-acc); transition:transform .4s var(--wf-ease), opacity .3s}
.workflow__dot::after{content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--wf-acc); opacity:0}
.workflow.is-js .workflow__dot{border-color:var(--wf-line); transition:border-color .3s}
.workflow.is-js .workflow__dot::before{transform:scale(0); opacity:0}
.workflow.is-js .is-active .workflow__dot{border-color:var(--wf-acc)}
.workflow.is-js .is-active .workflow__dot::before{transform:scale(1); opacity:1}
.workflow.is-js .is-active .workflow__dot::after{animation:workflow-ring .8s var(--wf-ease) both}

/* текст этапа и номер-водяной знак */
.workflow__text{position:relative; max-width:30rem; padding-top:1.2rem}
.workflow__num{position:absolute; top:-.5em; left:-.06em; z-index:0; font-family:var(--wf-fh); font-weight:800; font-size:clamp(4.5rem, 9vw, 7rem); line-height:1; letter-spacing:-.05em; color:var(--wf-acc); opacity:.09; pointer-events:none; user-select:none}
.workflow__step-title{position:relative; z-index:1; margin:0; font-family:var(--wf-fh); font-weight:700; font-size:clamp(1.25rem, 2vw, 1.5rem); line-height:1.2; letter-spacing:-.015em}
.workflow__step-label{display:block; margin-bottom:.45rem; font-family:var(--wf-fb); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wf-acc)}
.workflow__step-text{position:relative; z-index:1; margin:.7rem 0 0; font-family:var(--wf-fb); font-size:1rem; line-height:1.62; color:var(--wf-soft)}

/* сцена */
.workflow__scene{position:relative; width:100%; max-width:340px; margin-top:var(--space-2, 1rem); line-height:0}
.workflow__scene--wide{max-width:440px}
.workflow__svg{display:block; width:100%; height:auto}

/* появление при активации — только когда есть JS */
.workflow.is-js .workflow__text, .workflow.is-js .workflow__scene{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .7s var(--wf-ease)}
.workflow.is-js .is-active .workflow__scene{transition-delay:.12s}
.workflow.is-js .is-active .workflow__text, .workflow.is-js .is-active .workflow__scene{opacity:1; transform:none}

.workflow__cta{position:relative; z-index:1; padding:var(--space-4, 2.5rem) 0 0 3rem}

/* ---------- десктоп: линия по центру, текст и сцена чередуются ---------- */
@media (min-width:900px) {
  .workflow__head{margin-inline:auto; text-align:center}
  .workflow__track::before{left:50%; margin-left:-1px}
  .workflow__step{display:grid; grid-template-columns:1fr 6rem 1fr; align-items:center; column-gap:var(--space-3, 1.5rem); padding:var(--space-4, 2.5rem) 0}
  .workflow__dot{position:relative; left:auto; top:auto; grid-column:2; grid-row:1; justify-self:center}
  .workflow__text{grid-column:1; grid-row:1; justify-self:end; width:100%}
  .workflow__scene{grid-column:3; grid-row:1; justify-self:start; margin-top:0}
  .workflow__step:nth-child(even) .workflow__text{grid-column:3; justify-self:start}
  .workflow__step:nth-child(even) .workflow__scene{grid-column:1; justify-self:end}
  .workflow__cta{padding-left:0; text-align:center}
}

/* ---------- примитивы сцен (SVG) ---------- */
.workflow .wf-card{fill:var(--wf-card); stroke:var(--wf-line); stroke-width:1.5}
.workflow .wf-screen{fill:var(--wf-bg); stroke:var(--wf-line); stroke-width:1}
.workflow .wf-island{fill:var(--wf-faint); opacity:.4}
.workflow .wf-blk{fill:rgba(242, 239, 233, .06); stroke:var(--wf-line); stroke-width:1}
.workflow .wf-img{fill:rgba(242, 239, 233, .1)}
.workflow .wf-txt{fill:none; stroke:var(--wf-faint); stroke-width:4; stroke-linecap:round; opacity:.45}
.workflow .wf-ln{fill:none; stroke:var(--wf-faint); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.workflow .wf-dim{opacity:.4}
.workflow .wf-acc{fill:none; stroke:var(--wf-acc); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.workflow .wf-accf{fill:var(--wf-acc)}
.workflow .wf-btn-ln{fill:none; stroke:var(--wf-on-acc); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.workflow .wf-ok{fill:none; stroke:var(--wf-ok); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.workflow .wf-okf{fill:var(--wf-ok)}
.workflow .wf-okc{fill:rgba(143, 211, 154, .12); stroke:var(--wf-ok); stroke-width:1.5}
.workflow .wf-amt{fill:none; stroke:var(--wf-acc); stroke-width:4; stroke-linecap:round; opacity:.85}
.workflow .wf-amt--big{stroke-width:6; opacity:1}
.workflow .wf-sig{fill:none; stroke:var(--wf-ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transform-origin:0 50%}
.workflow .wf-cursor-shape{fill:var(--wf-ink); stroke:var(--wf-bg); stroke-width:1.2; stroke-linejoin:round}
.workflow .wf-mark{fill:var(--wf-acc-hi); stroke:var(--wf-bg); stroke-width:3}
.workflow .wf-dotc{fill:var(--wf-faint); opacity:.5}
.workflow .wf-led{fill:var(--wf-acc)}
.workflow .wf-led--ok{fill:var(--wf-ok)}
.workflow .wf-sync{fill:none; stroke:var(--wf-acc); stroke-width:1.5; stroke-dasharray:3 4; opacity:.8}
.workflow .wf-finger{fill:var(--wf-acc-hi); stroke:var(--wf-bg); stroke-width:2}
.workflow .wf-tap{fill:none; stroke:var(--wf-acc); stroke-width:1.5; opacity:0}
.workflow .wf-note-bg{fill:var(--wf-card); stroke:var(--wf-line); stroke-width:1}
.workflow .wf-halo{opacity:.6}
.workflow .wf-gs{stop-color:var(--wf-acc)}
.workflow .wf-gs--in{stop-opacity:.22}
.workflow .wf-gs--out{stop-opacity:0}

/* HTML-надписи поверх сцены 4 */
.workflow__tag{position:absolute; left:33.75%; translate:-50% 0; font-family:var(--wf-fb); line-height:1; white-space:nowrap}
.workflow__tag--pct{top:32%; font-family:var(--wf-fh); font-weight:800; font-size:clamp(1.1rem, 4.5vw, 1.5rem); letter-spacing:-.02em; color:var(--wf-acc-hi)}
.workflow__tag--start{top:66%; display:inline-flex; align-items:center; gap:.4em; padding:.38em .75em; border:1px solid var(--wf-acc); border-radius:999px; font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wf-acc-hi); background:var(--wf-card)}
.workflow__tag--start::before{content:""; width:.5em; height:.5em; border-radius:50%; background:var(--wf-ok)}

/* ---------- анимируемые элементы:база = конечное состояние ---------- */
.workflow .wf-a{transform-box:fill-box; transform-origin:center; animation-duration:.5s; animation-timing-function:var(--wf-ease); animation-fill-mode:both}
.workflow .wf-d1{animation-delay:.2s} .workflow .wf-d2{animation-delay:.4s} .workflow .wf-d3{animation-delay:.6s}
.workflow .wf-d4{animation-delay:.8s} .workflow .wf-d5{animation-delay:1s} .workflow .wf-d6{animation-delay:1.2s}
.workflow .wf-d7{animation-delay:1.4s} .workflow .wf-d8{animation-delay:1.6s} .workflow .wf-d9{animation-delay:1.8s}
.workflow .wf-d10{animation-delay:2s} .workflow .wf-d11{animation-delay:2.2s} .workflow .wf-d12{animation-delay:2.4s}

/* временные элементы:в конце их нет */
.workflow .wf-collapse, .workflow .wf-vanish, .workflow .wf-merge, .workflow .wf-flash, .workflow .wf-syncdot, .workflow .wf-flow{opacity:0}
.workflow .wf-flash{fill:var(--wf-acc)}
/* постоянные элементы с ненулевым конечным положением */
.workflow .wf-env{transform:translate(-78px, 74px) scale(.82)}
.workflow .wf-grow, .workflow .wf-price{transform-origin:0 50%}
.workflow .wf-grow{transform:scaleX(.3)}
.workflow .wf-price{transform:scaleX(1.6)}
.workflow .wf-touch{transform:translate(0, 138px)}

/* длительности и повторы */
.workflow .wf-env{animation-duration:1.1s; animation-timing-function:cubic-bezier(.5, 0, .3, 1)}
.workflow .wf-press{animation-duration:.3s}
.workflow .wf-collapse{animation-duration:.45s}
.workflow .wf-vanish{animation-duration:.3s}
.workflow .wf-merge, .workflow .wf-syncdot{animation-duration:.6s; animation-timing-function:ease-in}
.workflow .wf-grow, .workflow .wf-zoom, .workflow .wf-sig{animation-duration:.7s}
.workflow .wf-price{animation-duration:.4s}
.workflow .wf-touch{animation-duration:2.4s; animation-timing-function:ease-in-out}
.workflow .wf-tap{animation-duration:.6s; animation-iteration-count:4; animation-timing-function:ease-out}
.workflow .wf-pulse, .workflow .wf-flow{animation-duration:1.6s; animation-iteration-count:infinite; animation-timing-function:linear}
.workflow .wf-note{animation-duration:4.2s; animation-iteration-count:infinite; animation-timing-function:ease-in-out}
.workflow .wf-n1{--wf-dx:-56px; animation-delay:1s}
.workflow .wf-n2{--wf-dx:56px; animation-delay:2.4s}
.workflow .wf-n3{--wf-dx:-56px; animation-delay:3.8s}

/* имена анимаций — пока этап «в игре» (is-run); при угасании — пауза, после — сброс */
.workflow .is-run:not(.is-active) .wf-a{animation-play-state:paused}
.workflow .is-run .wf-pop{animation-name:workflow-pop}
.workflow .is-run .wf-rise{animation-name:workflow-rise}
.workflow .is-run .wf-slide{animation-name:workflow-slide}
.workflow .is-run .wf-fade{animation-name:workflow-fade}
.workflow .is-run .wf-vanish{animation-name:workflow-vanish}
.workflow .is-run .wf-flash{animation-name:workflow-flash}
.workflow .is-run .wf-cursor{animation-name:workflow-cursor}
.workflow .is-run .wf-press{animation-name:workflow-press}
.workflow .is-run .wf-collapse{animation-name:workflow-collapse}
.workflow .is-run .wf-env{animation-name:workflow-fly}
.workflow .is-run .wf-merge{animation-name:workflow-merge}
.workflow .is-run .wf-sig{animation-name:workflow-sign}
.workflow .is-run .wf-grow{animation-name:workflow-grow}
.workflow .is-run .wf-price{animation-name:workflow-price}
.workflow .is-run .wf-syncdot{animation-name:workflow-syncdot}
.workflow .is-run .wf-pulse{animation-name:workflow-pulse}
.workflow .is-run .wf-flow--down{animation-name:workflow-flow-down}
.workflow .is-run .wf-flow--up{animation-name:workflow-flow-up}
.workflow .is-run .wf-touch{animation-name:workflow-touch}
.workflow .is-run .wf-tap{animation-name:workflow-tap}
.workflow .is-run .wf-zoom{animation-name:workflow-zoom}
.workflow .is-run .wf-note{animation-name:workflow-note}

/* ---------- keyframes ---------- */
@keyframes workflow-ring{from{opacity:.8; transform:scale(.6)} to{opacity:0; transform:scale(2.2)} }
@keyframes workflow-pop{from{opacity:0; transform:scale(.55)} to{opacity:1; transform:scale(1)} }
@keyframes workflow-rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes workflow-slide{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none} }
@keyframes workflow-fade{from{opacity:0} to{opacity:1} }
@keyframes workflow-vanish{from{opacity:1} to{opacity:0} }
@keyframes workflow-flash{0%{opacity:0} 35%{opacity:.45} 100%{opacity:0} }
@keyframes workflow-cursor{from{transform:translate(84px, 44px)} to{transform:none} }
@keyframes workflow-press{0%{transform:scale(1)} 40%{transform:scale(.93)} 100%{transform:scale(1)} }
@keyframes workflow-collapse{from{opacity:1; transform:none} to{opacity:0; transform:scaleY(.1)} }
@keyframes workflow-fly {
  0%{opacity:0; transform:translate(0, 0) scale(.4)}
  35%{opacity:1; transform:translate(0, 0) scale(1)}
  100%{opacity:1; transform:translate(-78px, 74px) scale(.82)}
}
@keyframes workflow-merge{from{opacity:1; transform:none} to{opacity:0; transform:translate(46px, -18px) scale(.55)} }
@keyframes workflow-sign{from{opacity:0; transform:scaleX(.15)} to{opacity:1; transform:none} }
@keyframes workflow-grow{from{transform:scaleX(0)} to{transform:scaleX(.3)} }
@keyframes workflow-price{from{transform:scaleX(1)} to{transform:scaleX(1.6)} }
@keyframes workflow-syncdot{0%{opacity:0; transform:none} 15%{opacity:1} 100%{opacity:0; transform:translate(-172px, 51px)} }
@keyframes workflow-pulse{0%{opacity:.3} 50%{opacity:1} 100%{opacity:.3} }
@keyframes workflow-flow-down{0%{opacity:0; transform:none} 20%{opacity:1} 80%{opacity:1} 100%{opacity:0; transform:translateY(30px)} }
@keyframes workflow-flow-up{0%{opacity:0; transform:none} 20%{opacity:1} 80%{opacity:1} 100%{opacity:0; transform:translateY(-30px)} }
@keyframes workflow-touch {
  0%, 18%{transform:translate(0, 0)}
  28%, 43%{transform:translate(-20px, 38px)}
  53%, 68%{transform:translate(0, 80px)}
  78%, 100%{transform:translate(0, 138px)}
}
@keyframes workflow-tap{from{opacity:.9; transform:scale(.35)} to{opacity:0; transform:scale(1.5)} }
@keyframes workflow-zoom{from{opacity:0; transform:scale(.72)} to{opacity:1; transform:none} }
@keyframes workflow-note {
  0%{opacity:0; transform:translate(var(--wf-dx, -56px), -14px) scale(.85)}
  16%, 72%{opacity:1; transform:none}
  86%, 100%{opacity:0; transform:translateY(8px)}
}

/* ---------- без движения: конечные кадры и вся линия сразу ---------- */
@media (prefers-reduced-motion:reduce) {
  .workflow *, .workflow *::before, .workflow *::after{animation:none !important; transition:none !important}
  .workflow.is-js .workflow__text, .workflow.is-js .workflow__scene{opacity:1; transform:none}
  .workflow.is-js .workflow__dot{border-color:var(--wf-acc)}
  .workflow.is-js .workflow__dot::before{transform:none; opacity:1}
  .workflow__route-line{stroke-dasharray:none; stroke-dashoffset:0}
  .workflow__route-tip{display:none}
}