/* ========================================================================================
* process.css - .process, a connected numbered progression (The Olmos System's
* Evaluate, Differentiate, Treat, Reassess): an icon node per step joined to the next by a
* dashed line, then the step number, title and one short line. Four across from 900px
* (the line runs right from each node), one column below it (the line runs down the
* nodes' left edge). Light by default; inside .on-dark the nodes and copy flip.
*
*
*
* .process--animate: site.js initProcess() adds .process--js and walks the steps on a
* loop while the track is on screen (.is-lit, then .is-pulsing along the connector, then
* .is-passed). Without JS, or with reduced motion, it renders exactly like .process.
* ======================================================================================== */
.process{
--process-node:56px;
list-style:none;margin:0;padding:0;display:grid;gap:var(--cd-6);grid-template-columns:minmax(0,1fr);
}
.process__label{
display:flex;align-items:center;gap:var(--cd-3);margin:var(--cd-7) 0 var(--cd-6);
font-size:var(--cd-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cd-ink-brand);
}
.process__label::after{content:"";flex:1;height:1px;background:var(--cd-line)}
.process__step{position:relative;display:flex;flex-direction:column;gap:var(--cd-2);padding-left:calc(var(--process-node) + var(--cd-5))}
.process__node{
position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;
width:var(--process-node);height:var(--process-node);border-radius:50%;
background:var(--cd-ground-tint);border:2px solid var(--cd-teal-300);color:var(--cd-teal-600);
}
.process__node svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* The connector: down the node column on phones, across to the next step from 900px. */
.process__step:not(:last-child)::after{
content:"";position:absolute;left:calc(var(--process-node) / 2 - 1px);top:var(--process-node);bottom:calc(var(--cd-6) * -1);
border-left:2px dashed var(--cd-teal-300);
}
.process__num{margin:0;padding-top:var(--cd-1);font-size:var(--cd-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cd-ink-accent)}
.process__title{margin:0;font-size:var(--cd-h3);line-height:1.15;color:var(--cd-ink-strong)}
.process__body{margin:0;font-size:var(--cd-body);line-height:1.6;color:var(--cd-ink-muted);max-width:34ch}
/* The last step is where the cycle closes: the accent node. */
.process__step:last-child .process__node{background:var(--cd-accent);border-color:var(--cd-accent);color:var(--cd-accent-ink)}
/* A closing line and a button under the track, split by a rule. */
.process__foot{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cd-4) var(--cd-6);
margin-top:var(--cd-8);padding-top:var(--cd-6);border-top:1px solid var(--cd-line);
}
.process__foot p{margin:0;max-width:60ch;font-size:var(--cd-body-lg)}
@media (min-width:900px){
.process{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cd-5)}
.process__step{padding-left:0;padding-top:calc(var(--process-node) + var(--cd-4))}
.process__step:not(:last-child)::after{
left:calc(var(--process-node) + var(--cd-3));right:calc(var(--cd-3) - var(--cd-5));
top:calc(var(--process-node) / 2 - 1px);bottom:auto;
border-left:0;border-top:2px dashed var(--cd-teal-300);
}
}
.on-dark .process__label{color:var(--cd-teal-300)}
.on-dark .process__foot{border-color:color-mix(in srgb,var(--cd-white) 18%,transparent)}
.on-dark .process__label::after{background:color-mix(in srgb,var(--cd-white) 18%,transparent)}
.on-dark .process__node{background:color-mix(in srgb,var(--cd-white) 6%,transparent);border-color:var(--cd-teal-500);color:var(--cd-teal-300)}
.on-dark .process__step:last-child .process__node{background:var(--cd-accent);border-color:var(--cd-accent);color:var(--cd-accent-ink)}
.on-dark .process__step:not(:last-child)::after{border-color:var(--cd-teal-600)}
.on-dark .process__title{color:var(--cd-white)}
.on-dark .process__body{color:var(--cd-ink-invert-muted)}
/* --- .process--animate (site.js initProcess()) ------------------------------------------
* Under .process--js every node starts neutral (the last one included: the accent is now
* something a step earns), lights orange with a white icon, and a pulse of the accent runs
* along its connector. The pulse is a second pseudo-element laid over the dashed line,
* moved by background-position; 1.3s must match PULSE_MS in site.js. */
.process--js .process__node{transition:background-color .45s,border-color .45s,color .45s,box-shadow .45s}
.process--js .process__step:last-child .process__node{background:var(--cd-ground-tint);border-color:var(--cd-teal-300);color:var(--cd-teal-600)}
.on-dark .process--js .process__step:last-child .process__node{background:color-mix(in srgb,var(--cd-white) 6%,transparent);border-color:var(--cd-teal-500);color:var(--cd-teal-300)}
.process--js .process__step.is-lit .process__node,
.on-dark .process--js .process__step.is-lit .process__node{
background:var(--cd-accent);border-color:var(--cd-accent);color:var(--cd-white);
box-shadow:0 0 0 8px color-mix(in srgb,var(--cd-accent) 22%,transparent);
animation:process-pop .55s cubic-bezier(.34,1.56,.64,1);
}
.process--js .process__step.is-passed::after,
.on-dark .process--js .process__step.is-passed::after{border-color:color-mix(in srgb,var(--cd-accent) 70%,transparent)}
.process--js .process__step:not(:last-child)::before{
content:"";position:absolute;z-index:0;pointer-events:none;opacity:0;
left:calc(var(--process-node) / 2 - 3px);top:var(--process-node);bottom:calc(var(--cd-6) * -1);width:6px;
border-radius:6px;filter:drop-shadow(0 0 6px var(--cd-accent));
background:linear-gradient(180deg,transparent,var(--cd-accent),transparent) no-repeat;
background-size:100% 40%;background-position:0 -100%;
}
.process--js .process__step.is-pulsing::before{opacity:1;animation:process-pulse-y 1.3s cubic-bezier(.45,0,.55,1) forwards}
@media (min-width:900px){
.process--js .process__step:not(:last-child)::before{
left:calc(var(--process-node) + var(--cd-3));right:calc(var(--cd-3) - var(--cd-5));
top:calc(var(--process-node) / 2 - 3px);bottom:auto;width:auto;height:6px;
background-image:linear-gradient(90deg,transparent,var(--cd-accent),transparent);
background-size:40% 100%;background-position:-100% 0;
}
.process--js .process__step.is-pulsing::before{animation-name:process-pulse-x}
}
@keyframes process-pop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes process-pulse-y{from{background-position:0 -100%}to{background-position:0 200%}}
@keyframes process-pulse-x{from{background-position:-100% 0}to{background-position:200% 0}}