/*
 * Payment flow animation: one shared spine, three settlement lanes.
 *
 * The three lanes are the three PaymentMethod cases. They share DRAFT and
 * PENDING and then genuinely diverge, which is why lane 1 ends early and lane 2
 * pauses: FULL_CAPTURE lands on CAPTURED at checkout, AUTHORIZE_CAPTURE holds
 * the funds for seven days first, DEPOSIT_BALANCE captures a deposit and settles
 * the balance at delivery. See WebhookHandlerService::handleCheckoutSessionCompleted.
 *
 * Same technique as hero-flow.css and deliberately separate from it: the
 * travelling dot is a one-dash stroke pattern whose offset is animated, so there
 * is no JavaScript and no offset-path. --pf-len is the measured track length and
 * --pf-hold the distance to the stop the lane pauses on. Both come from the
 * geometry in module/Website/view/website/partials/payment-flow.phtml, so
 * remeasure here if that file changes.
 */

.payment-flow {
    width: 100%;
    height: auto;
    max-width: 620px;
    pointer-events: none;
}

.payment-flow-line {
    stroke-dasharray: var(--pf-len);
    stroke-dashoffset: var(--pf-len);
    animation: payment-flow-draw var(--pf-draw-dur, 0.8s) ease-out forwards;
    animation-delay: var(--pf-delay);
}

.payment-flow-pulse {
    stroke-dasharray: 7 var(--pf-len);
    opacity: 0;
    animation: payment-flow-travel var(--pf-travel-dur) linear infinite;
    animation-delay: var(--pf-travel-delay);
}

/* Lane 2 stalls on the authorisation stop; that pause is the seven-day window. */
.payment-flow-l2 .payment-flow-pulse {
    animation-name: payment-flow-travel-hold;
}

.payment-flow-fade {
    opacity: 0;
    animation: payment-flow-appear 0.45s ease-out forwards;
    animation-delay: var(--pf-fade-delay);
}

@keyframes payment-flow-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes payment-flow-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes payment-flow-travel {
    0%   { opacity: 0; stroke-dashoffset: 0; }
    8%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: calc(var(--pf-len) * -1); }
}

@keyframes payment-flow-travel-hold {
    0%   { opacity: 0; stroke-dashoffset: 0; }
    6%   { opacity: 1; }
    38%  { stroke-dashoffset: calc(var(--pf-hold) * -1); }
    64%  { stroke-dashoffset: calc(var(--pf-hold) * -1); }
    92%  { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: calc(var(--pf-len) * -1); }
}

/* Shared spine: request, then sent, then the trunk the lanes tap off. */
.payment-flow-link  { --pf-len: 20;  --pf-delay: 0.55s; --pf-draw-dur: 0.3s; }
.payment-flow-trunk { --pf-len: 347; --pf-delay: 1.15s; --pf-draw-dur: 0.9s; }

/* Lanes, top to bottom. --pf-hold is unused outside lane 2. */
.payment-flow-l1 { --pf-len: 210; --pf-delay: 1.60s; --pf-travel-delay: 4.0s; --pf-travel-dur: 1.9s; }
.payment-flow-l2 { --pf-len: 440; --pf-hold: 210; --pf-delay: 2.00s; --pf-travel-delay: 4.4s; --pf-travel-dur: 4.4s; }
.payment-flow-l3 { --pf-len: 440; --pf-delay: 2.40s; --pf-travel-delay: 4.8s; --pf-travel-dur: 3.2s; }

/* Motion is decoration here, so reduced motion gets the finished diagram. */
@media (prefers-reduced-motion: reduce) {
    .payment-flow-line  { animation: none; stroke-dashoffset: 0; }
    .payment-flow-fade  { animation: none; opacity: 1; }
    .payment-flow-pulse { display: none; }
}