/* Round two · demo 2, the customer card that moves itself (round-two.html).

   The owner, 2026-09-14: "Something that can showcase the automation of a
   CRM, because it would make so many people's lives easier. Every business
   needs one." A customer presses Send on the quote form on your site, a line
   runs from Send into your customer list, and their card lands under
   Inquired. Then it crosses the board on its own: paid online, the job day
   passing, sixty days later.

   His notes, 2026-09-14. On the first build: "It's also not clear that once
   you fill out the website with your information, you then get put into the
   inquired. Visual things that show it rather than just words would be
   preferable." On the second: "You can't make every single line on Demo 1
   white and then randomly make it crimson on the second demo", "I don't like
   the solid line with the arrows in it", and "Make the middle one show it's
   completed, like a white circle with a check mark, and move those words
   closer to the dot so it's easily associated with the step. Maybe just right
   under would be great." So the line from Send is demo 1's white line with
   its riding dot and softer arrowhead, every stage the card leaves keeps a
   white check with what moved it right under, and until the card moves on
   those words sit right under the card.

   The same browser windows as demos 1 and 3 (r2-devices.css). Sizes are
   design pixels times --u, the section's unit times the shared fit
   (r2-demos.js). Motion is transform and opacity, except the line from Send,
   whose dash r2-demos.js draws. */

.d2-scene {
    position: relative;
    display: grid;
    grid-template-columns: calc(196 * var(--u)) calc(604 * var(--u));
    column-gap: calc(40 * var(--u));
    align-items: end;
}
/* 100 design pixels, read by r2-demos.js to size the line and its arrowhead. */
.crm-unit {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100 * var(--u));
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ---------- the customer's side: the quote form on your site ---------- */
.crm-site .dv-page {
    padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
}
.crm-site .dv-kicker {
    font-size: calc(15 * var(--u));
}

/* ---------- your side: the customer list ---------- */
.crm-page {
    padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
}
.crm-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(12 * var(--u));
    margin-bottom: calc(12 * var(--u));
}
.crm-bar b {
    font-size: calc(17 * var(--u));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.crm-bar span {
    font-size: calc(12 * var(--u));
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* ---------- the board: four stages and the one card ---------- */
.crm-steps {
    display: none;
}
.crm-board {
    --gap: calc(12 * var(--u));
    --pad: calc(6 * var(--u));
    --card-top: calc(30 * var(--u));
    --card-h: calc(74 * var(--u));
    /* the card's middle, where a passed stage keeps its check */
    --mid: calc(var(--card-top) + var(--card-h) / 2);
    /* how far the words drop to sit under the card instead of under the check */
    --drop: calc(var(--card-h) / 2 - 10 * var(--u));
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}
.crm-col {
    position: relative;
    box-sizing: border-box;
    min-height: calc(var(--card-top) + var(--card-h) + 34 * var(--u));
    padding: calc(8 * var(--u)) var(--pad) calc(9 * var(--u));
    border-radius: calc(9 * var(--u));
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    transition:
        background-color 320ms ease,
        box-shadow 320ms ease;
}
.crm-col.is-here {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.crm-h {
    margin: 0;
    font-size: calc(12 * var(--u));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    transition: color 320ms ease;
}
.crm-col.is-here .crm-h,
.crm-col.is-past .crm-h {
    color: #ffffff;
}

/* A stage the card has passed keeps a white check where the card sat. */
.crm-check {
    position: absolute;
    left: 50%;
    top: var(--mid);
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    margin: calc(-10 * var(--u)) 0 0 calc(-10 * var(--u));
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    transform: scale(0.4);
    transition:
        opacity 200ms ease 160ms,
        transform 320ms var(--pop-ease) 160ms;
}
.crm-check::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 44%;
    box-sizing: border-box;
    width: calc(9 * var(--u));
    height: calc(5 * var(--u));
    border-left: calc(2 * var(--u)) solid #000000;
    border-bottom: calc(2 * var(--u)) solid #000000;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.crm-col.is-past .crm-check {
    opacity: 1;
    transform: none;
}
/* What moved the card: right under the card while it sits in the stage, then
   right under the check once it moves on. */
.crm-why {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--mid) + 16 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.86);
    opacity: 0;
    transform: translateY(var(--drop));
    transition:
        opacity 260ms ease,
        transform 460ms var(--glide-ease);
}
.crm-col.is-here .crm-why {
    opacity: 1;
}
.crm-col.is-past .crm-why {
    opacity: 1;
    transform: none;
}

/* The card sits in the first stage's slot and travels by whole columns: one
   column is the card's own width plus the column's padding and the gap. It
   shows once the line from Send reaches it. */
.crm-card {
    position: absolute;
    z-index: 3;
    top: var(--card-top);
    left: var(--pad);
    box-sizing: border-box;
    width: calc((100% - 3 * var(--gap)) / 4 - 2 * var(--pad));
    height: var(--card-h);
    display: grid;
    grid-template-columns: calc(24 * var(--u)) minmax(0, 1fr);
    align-items: center;
    align-content: space-between;
    column-gap: calc(7 * var(--u));
    padding: calc(8 * var(--u));
    border-radius: calc(8 * var(--u));
    background: #202024;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateX(calc(var(--at, 0) * (100% + 2 * var(--pad) + var(--gap)))) scale(0.9);
    transition:
        transform 460ms var(--glide-ease),
        opacity 200ms ease;
}
.is-in .crm-card {
    opacity: 1;
    transform: translateX(calc(var(--at, 0) * (100% + 2 * var(--pad) + var(--gap))));
}
.crm-face {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    border-radius: 50%;
    overflow: hidden;
    background: #333338;
}
.crm-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.crm-who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--u));
}
.crm-who b {
    font-size: calc(12.5 * var(--u));
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    white-space: nowrap;
}
.crm-who span {
    font-size: calc(12 * var(--u));
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
}
.crm-tag {
    grid-column: 1 / -1;
    justify-self: start;
    padding: calc(3 * var(--u)) calc(7 * var(--u));
    border-radius: calc(20 * var(--u));
    background: rgba(255, 255, 255, 0.12);
    font-size: calc(12 * var(--u));
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
}

/* ---------- the line from Send: demo 1's timer line, bent ---------- */
.crm-wire {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    pointer-events: none;
}
.crm-wire-track,
.crm-wire-line {
    fill: none;
    stroke-linecap: round;
}
/* A faint track shows once Send is pressed, and the white line fills it. */
.crm-wire-track {
    stroke: rgba(255, 255, 255, 0.18);
    opacity: 0;
    transition: opacity 160ms ease;
}
.crm-wire-line {
    stroke: #ffffff;
}
.crm-wire-head {
    fill: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transition: opacity 160ms ease;
}
.is-sent .crm-wire-track,
.is-sent .crm-wire-head {
    opacity: 1;
}
/* The lead, a dot riding the line, as in demo 1. */
.crm-flyer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    margin: calc(-3.5 * var(--u)) 0 0 calc(-3.5 * var(--u));
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 calc(9 * var(--u)) rgba(255, 255, 255, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    will-change: transform;
}

/* ---------- phones: the form above the list, stage chips over one card ---------- */
@media (max-width: 809px) {
    .d2-scene {
        grid-template-columns: minmax(0, 1fr);
        row-gap: calc(40 * var(--u));
        width: calc(342 * var(--u));
        margin-inline: auto;
    }
    .crm-site .dv-page,
    .crm-page {
        padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
    }
    /* The two fields side by side, so the form stays short. */
    .crm-site .dv-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: calc(8 * var(--u));
    }
    .crm-site .dv-kicker,
    .crm-site .dv-send {
        grid-column: 1 / -1;
    }
    .crm-bar {
        margin-bottom: calc(10 * var(--u));
    }
    .crm-bar b {
        font-size: calc(15 * var(--u));
    }
    .crm-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: calc(10 * var(--u));
        margin-bottom: calc(10 * var(--u));
    }
    .crm-step {
        position: relative;
        padding: calc(6 * var(--u)) calc(2 * var(--u));
        border-radius: calc(7 * var(--u));
        background: rgba(255, 255, 255, 0.04);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
        font-size: calc(12 * var(--u));
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.55);
        transition:
            background-color 320ms ease,
            color 320ms ease,
            box-shadow 320ms ease;
    }
    .crm-step.is-past {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
        color: #ffffff;
    }
    .crm-step.is-here {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
        color: #ffffff;
    }
    /* The arrow into each stage, white once the card has come through. */
    .crm-step + .crm-step::before {
        content: "";
        position: absolute;
        left: calc(-5 * var(--u));
        top: 50%;
        width: calc(5 * var(--u));
        height: calc(5 * var(--u));
        border-top: calc(1.6 * var(--u)) solid rgba(255, 255, 255, 0.25);
        border-right: calc(1.6 * var(--u)) solid rgba(255, 255, 255, 0.25);
        transform: translate(-60%, -50%) rotate(45deg);
        transition: border-color 220ms ease;
    }
    .crm-step.is-here::before,
    .crm-step.is-past::before {
        border-color: #ffffff;
    }
    .crm-board {
        display: block;
    }
    .crm-col {
        display: none;
    }
    .crm-card {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        row-gap: calc(6 * var(--u));
        transform: scale(0.94);
    }
    .is-in .crm-card {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-card,
    .crm-col,
    .crm-h,
    .crm-check,
    .crm-why,
    .crm-step,
    .crm-step::before,
    .crm-wire-track,
    .crm-wire-head,
    .crm-flyer {
        transition: none;
    }
}