/*
    The sales flow: what Calculus is for, drawn while it starts or while its database wakes.

    One continuous line, drawn as a pen draws without lifting: it starts at a price tag tilted on its
    string, goes round it and its hole and leaves from its point, draws a calculator with its display
    and a plus key, a tick in a circle, and runs into a paper plane at its fold, ending at its nose -
    the prices gathered, calculated, approved, and the offer sent. The whole drawing stands faintly from
    the start, and the ink follows the pen. Where the pen goes over a line it has drawn already,
    nothing shows.

    Small and quiet: 220 by 56, in Eyvi's accent - the primary is a fill colour, too pale for a thin
    line on a light page - light or dark as the theme is. With reduced motion it stands still, drawn.

    Global rather than scoped, because index.html draws it before Blazor exists. The markup there and
    in Components/SalesFlow.razor is the same and must stay so.

    One cycle is five seconds. The pen moves at an even pace and finishes at 80%; it reaches the steps
    at 0%, 17.0%, 47.7% and 67.3% - measured along the stroke - and each label lights as it does. Everything holds until 92% and fades by 100%. Change the stroke, and measure
    those again.
*/

.sales-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    color: var(--color-text-muted);
}

.sales-flow svg {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.sales-flow__sketch,
.sales-flow__ink {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The whole drawing, faintly: what is still to come. */
.sales-flow__sketch {
    stroke: var(--color-border);
    stroke-width: 1.5;
}

/* The pen. */
.sales-flow__ink {
    stroke: var(--color-accent);
    stroke-width: 1.75;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: sales-flow-draw 5s linear infinite;
}

.sales-flow__label {
    fill: var(--color-text-muted);
    font-family: var(--font-family-base, system-ui, sans-serif);
    font-size: 8.5px;
    text-anchor: middle;
    animation: 5s linear infinite;
}

.sales-flow__label--prices { animation-name: sales-flow-label-1; }
.sales-flow__label--calculate { animation-name: sales-flow-label-2; }
.sales-flow__label--approve { animation-name: sales-flow-label-3; }
.sales-flow__label--offer { animation-name: sales-flow-label-4; }

.sales-flow__status {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-muted);
    text-align: center;
}

/*
    The splash (index.html, js/splash.js): over the whole page while Calculus loads, so nothing of the
    application shows until it is ready. Below the error bar, which must still be seen if loading fails.
*/
.splash {
    position: fixed;
    inset: 0;
    z-index: 450;
    display: grid;
    place-items: center;
    padding: var(--space-4, 1rem);
    background-color: var(--color-surface-page);
    transition: opacity var(--motion-duration-slow, 260ms) var(--motion-easing-standard, ease-out);
}

.splash--leaving {
    opacity: 0;
    pointer-events: none;
}

/* The message line takes no room until there is something to say. */
.splash #splash-message:empty {
    display: none;
}

@keyframes sales-flow-draw {
    0% { stroke-dashoffset: 100; opacity: 1; }
    80%, 92% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes sales-flow-label-1 {
    0%, 92% { fill: var(--color-text); }
    100% { fill: var(--color-text-muted); }
}

@keyframes sales-flow-label-2 {
    0%, 17.0% { fill: var(--color-text-muted); }
    18.5%, 92% { fill: var(--color-text); }
    100% { fill: var(--color-text-muted); }
}

@keyframes sales-flow-label-3 {
    0%, 47.7% { fill: var(--color-text-muted); }
    49.2%, 92% { fill: var(--color-text); }
    100% { fill: var(--color-text-muted); }
}

@keyframes sales-flow-label-4 {
    0%, 67.3% { fill: var(--color-text-muted); }
    68.8%, 92% { fill: var(--color-text); }
    100% { fill: var(--color-text-muted); }
}

/* Still, and drawn: the same picture, without the motion. */
@media (prefers-reduced-motion: reduce) {
    .sales-flow__ink,
    .sales-flow__label {
        animation: none;
    }

    .sales-flow__ink {
        stroke-dashoffset: 0;
    }

    .sales-flow__label {
        fill: var(--color-text);
    }
}