/**
 * Process: a numbered step path. Markers joined by a line, revealed one step
 * at a time; vertical on mobile, horizontal from 990px.
 *
 * globalClass: process   (the track; add observe-visibility for the reveal)
 *
 * Variants (on the track):
 *   process--vertical    stays vertical on desktop too (sidebars, columns)
 *   process--grow        markers grow along the path, the last one largest
 *   process--alternate   every second marker uses the alternate color
 *
 * Structure:
 *   .process.gb-container.observe-visibility [.process--vertical]
 *     .process-step.gb-container
 *       p.process-step-marker          the number ("1")
 *       .process-step-body.gb-container
 *         h3.process-step-title
 *         p.process-step-text
 *
 * Colors from the palette: marker --accent-clr with --bg-clr ink, alternate
 * marker --font-clr, line --border-clr. Override per block with the
 * --process-* variables below.
 *
 * Tuning: --process-marker-size (3.6rem), --process-gap, --process-duration,
 *         --process-stagger, --process-marker-bg, --process-marker-alt,
 *         --process-marker-ink, --process-line-clr
 *
 * Motion: pure CSS stagger off a single .is-visible on the track, which
 * element-visibility-observer adds to .observe-visibility elements. Do not
 * add chain animations to the steps; animate the section heading only.
 * Without JS (no html.js) the block renders complete and static, which is
 * also what the editor shows.
 *
 * Ported from applari-path (2026-09-30), the KTN concept D path.
 */

.process {
    --process-marker-bg: var(--accent-clr);
    --process-marker-alt: var(--font-clr);
    --process-marker-ink: var(--bg-clr);
    --process-marker-size: 3.6rem;
    /* Footprint reserved for every marker: the largest one, so growing sizes
       stay on one center line and the connectors do not zigzag. */
    --process-col: var(--process-marker-size);
    --process-line-clr: var(--border-clr);
    --process-gap: clamp(2rem, 4vw, 3rem);
    --process-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --process-duration: 0.5s;
    --process-stagger: 0.18s;
    display: flex;
    flex-direction: column;
}

.process > .block-editor-inner-blocks {
    width: 100%;
}

.process > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-direction: column;
}

/* ---- Step ---- */
.process-step {
    --process-step-size: var(--process-marker-size);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: var(--process-gap);
}

.process-step:last-child {
    padding-bottom: 0;
}

/* Order index for the animation delays */
.process-step:nth-child(1) { --process-i: 0; }
.process-step:nth-child(2) { --process-i: 1; }
.process-step:nth-child(3) { --process-i: 2; }
.process-step:nth-child(4) { --process-i: 3; }
.process-step:nth-child(5) { --process-i: 4; }
.process-step:nth-child(6) { --process-i: 5; }
.process-step:nth-child(7) { --process-i: 6; }
.process-step:nth-child(8) { --process-i: 7; }

/* Growing markers, sized backwards from the last step */
.process--grow .process-step:nth-last-child(1) { --process-step-size: var(--process-marker-size); }
.process--grow .process-step:nth-last-child(2) { --process-step-size: calc(var(--process-marker-size) * 0.87); }
.process--grow .process-step:nth-last-child(3) { --process-step-size: calc(var(--process-marker-size) * 0.76); }
.process--grow .process-step:nth-last-child(4) { --process-step-size: calc(var(--process-marker-size) * 0.66); }
.process--grow .process-step:nth-last-child(5) { --process-step-size: calc(var(--process-marker-size) * 0.58); }
.process--grow .process-step:nth-last-child(6) { --process-step-size: calc(var(--process-marker-size) * 0.52); }

/* ---- Marker ---- */
.process-step-marker {
    display: grid;
    place-items: center;
    width: var(--process-step-size);
    height: var(--process-step-size);
    margin: 0 calc((var(--process-col) - var(--process-step-size)) / 2);
    border-radius: 50%;
    flex: 0 0 auto;
    background-color: var(--process-marker-bg);
    color: var(--process-marker-ink);
    font-weight: 700;
    font-size: calc(var(--process-step-size) * 0.34);
    line-height: 1;
}

.process--alternate .process-step:nth-child(even) .process-step-marker {
    background-color: var(--process-marker-alt);
}

/* ---- Body ---- */
.process-step-body {
    padding-top: 0.35rem;
}

.process-step-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.process-step-text {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.8;
    max-width: 42ch;
}

/* ---- Connector: from this marker's edge to the next step ---- */
.process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--process-col) / 2 - 1px);
    top: var(--process-step-size);
    width: 2px;
    height: calc(100% - var(--process-step-size));
    background: var(--process-line-clr);
    transform-origin: top center;
}

/* ---- Motion ---- */
@keyframes process-step-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes process-marker-in {
    from { opacity: 0; transform: scale(0.86); }
    to   { opacity: 1; transform: none; }
}

@keyframes process-line-in {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.js .process:not(.is-visible) .process-step {
    opacity: 0;
}

.js .process.is-visible .process-step {
    animation: process-step-in var(--process-duration) var(--process-ease) both;
    animation-delay: calc(var(--process-i, 0) * var(--process-stagger));
}

.js .process.is-visible .process-step-marker {
    animation: process-marker-in calc(var(--process-duration) * 0.9) var(--process-ease) both;
    animation-delay: calc(var(--process-i, 0) * var(--process-stagger) + 0.08s);
}

.js .process.is-visible .process-step:not(:last-child)::after {
    animation: process-line-in calc(var(--process-duration) * 0.8) var(--process-ease) both;
    animation-delay: calc(var(--process-i, 0) * var(--process-stagger) + 0.22s);
}

/* Editor never runs the observer: show everything */
.editor-styles-wrapper .process .process-step {
    opacity: 1;
}

/* ---- Desktop: horizontal path (not for --vertical) ---- */
@media only screen and (min-width: 990px) {
    .process:not(.process--vertical),
    .process:not(.process--vertical) > .block-editor-inner-blocks > .block-editor-block-list__layout {
        flex-direction: row;
    }

    .process:not(.process--vertical) .process-step {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        padding: 0 0.75rem;
    }

    .process:not(.process--vertical) .process-step-body {
        padding-top: 0;
    }

    .process:not(.process--vertical) .process-step-text {
        max-width: none;
    }

    /* The shared footprint becomes vertical padding, keeping every marker
       center on one horizontal line. */
    .process:not(.process--vertical) .process-step-marker {
        margin: calc((var(--process-col) - var(--process-step-size)) / 2) 0;
    }

    /* From this marker's edge to the next marker's edge, one column over */
    .process:not(.process--vertical) .process-step:not(:last-child)::after {
        left: calc(50% + var(--process-step-size) / 2 + 0.75rem);
        right: calc(-50% + var(--process-step-size) / 2 + 0.75rem);
        top: calc(var(--process-col) / 2 - 1px);
        width: auto;
        height: 2px;
        transform-origin: left center;
    }

    @keyframes process-line-in {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .process .process-step,
    .js .process.is-visible .process-step,
    .js .process.is-visible .process-step-marker,
    .js .process.is-visible .process-step:not(:last-child)::after {
        animation: none;
        opacity: 1;
        transform: none;
    }
}