/**
 * "OPSIM - Order Delivery Timeline" — product page, under the COD form.
 *
 * Three bordered cards in equal grid columns, then a thin progress track under
 * them. Cards use the theme's own border, radius and text tokens; the active
 * step is marked with the brand colour, pending steps with the secondary text
 * colour.
 *
 * THE TRACK is a neutral line on the list (::before) with one brand-coloured
 * segment per reached step (.opsim-dt-step::after), each covering its card
 * plus the gap after it — so the reached steps together end at the active
 * card and point on toward the next. Segments live inside the same box as the
 * cards and stay aligned with them even when the row scrolls, and
 * `inset-inline-start` / the grid follow the document direction for RTL.
 *
 * THE ANIMATION is a journey up to the active step, driven by one class.
 * delivery-timeline.js adds `is-armed` (every reached step shown as pending,
 * its segment collapsed) and then `is-visible` when the block is on screen.
 * Every step then transitions to its real server-rendered state on a delay
 * taken from its position, so the sequence is pure CSS:
 *
 *     step 1 activates (300ms) → segment 1 fills (700ms)
 *     → step 2 activates (300ms) → segment 2 fills (700ms)
 *     → step 3 activates, its segment filling with it (300ms)      ≈ 2.3s
 *
 * A step that is passed (is-complete) holds the brand border while it is the
 * current one, then hands it on (the opsim-dt-pass keyframes). Steps after the
 * active one never change. The cards play once; the progress line then keeps
 * looping on a 3.5s cycle (fill, hold, fade) while the block is on screen —
 * see the keyframes at the end. Without JavaScript nothing is armed and the final
 * state is simply drawn; every motion rule sits inside
 * `prefers-reduced-motion: no-preference`, so reduced-motion users get the
 * final state immediately as well.
 *
 * Colours are Customizer values printed as custom properties on the block only
 * when set (template-parts/product/delivery-timeline.php); unset, they fall back
 * to the design tokens, so the block follows the brand colour.
 *
 * Breakpoints are the product page's own: 991px, 767px, 380px.
 */

.opsim-delivery-timeline {
    --dt-gap: var(--opsim-space-sm, 8px);
    --dt-line: 2px;
    --dt-line-gap: 10px;
    --dt-bw: var(--opsim-border-width, 1px);
    --dt-brand: var(--opsim-brand);
    --dt-activate: 300ms;
    --dt-travel: 700ms;
    --dt-cycle: 3500ms;
    width: 100%;
    margin: 10px 0 0;
    /* Only engages when three cards cannot fit their minimum width: the row
       then scrolls inside this box instead of widening the page. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.opsim-delivery-timeline::-webkit-scrollbar {
    display: none;
}

.opsim-dt-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    gap: var(--dt-gap);
    /* The list itself must be as wide as the cards when the row scrolls, or
       the track (sized from 100% of this box) stops at the visible edge and
       the fill no longer lands on a card edge. */
    min-width: calc(3 * 88px + 2 * var(--dt-gap));
    margin: 0;
    padding: 0 0 calc(var(--dt-line) + var(--dt-line-gap));
    list-style: none;
}

.opsim-dt-steps::before {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: var(--dt-line);
    border-radius: var(--opsim-radius-pill);
    background: var(--opsim-border);
}

.opsim-dt-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 12px 8px;
    background: var(--opsim-bg-primary, #fff);
    border: var(--opsim-border-width, 1px) solid var(--opsim-border);
    border-radius: var(--opsim-radius);
    text-align: center;
    position: relative;
}

.opsim-dt-step:nth-child(2) { --dt-index: 1; }
.opsim-dt-step:nth-child(3) { --dt-index: 2; }

/* Progress segment: this card (border box) plus the gap after it, drawn on the
   list's track line below. */
.opsim-dt-step:not(.is-upcoming)::after {
    content: "";
    position: absolute;
    bottom: calc(-1 * (var(--dt-bw) + var(--dt-line-gap) + var(--dt-line)));
    inset-inline-start: calc(-1 * var(--dt-bw));
    /* +1px overlaps the next segment: an animated scaleX() is rasterised on
       its own layer, and the sub-pixel seam between two layers shows as a
       hairline break in the line. */
    width: calc(100% + 2 * var(--dt-bw) + var(--dt-gap) + 1px);
    height: var(--dt-line);
    background: var(--dt-line-color, var(--dt-brand));
    transform-origin: left center;
}

.opsim-dt-step:not(.is-upcoming):last-child::after {
    width: calc(100% + 2 * var(--dt-bw));
}

[dir="rtl"] .opsim-dt-step::after {
    transform-origin: right center;
}

.opsim-dt-step.is-current {
    border-color: var(--dt-brand);
}

.opsim-dt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--opsim-radius);
    background: var(--dt-icon-bg, color-mix(in srgb, var(--dt-brand) 8%, #fff));
    color: var(--dt-icon-color, var(--dt-brand));
}

.opsim-dt-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.opsim-dt-step.is-upcoming .opsim-dt-icon {
    background: var(--opsim-bg-secondary, #F9FAFB);
    color: var(--opsim-text-secondary);
}

.opsim-dt-date,
.opsim-dt-status {
    display: block;
    max-width: 100%;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.opsim-dt-date {
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--dt-date-color, var(--opsim-text-secondary));
}

.opsim-dt-status {
    margin-top: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dt-status-color, var(--opsim-text-primary));
    -webkit-hyphens: auto;
    hyphens: auto;
}

.opsim-dt-step.is-upcoming .opsim-dt-date,
.opsim-dt-step.is-upcoming .opsim-dt-status {
    color: var(--opsim-text-secondary);
}

.opsim-dt-step.is-upcoming .opsim-dt-status {
    font-weight: 600;
}

@media (max-width: 767px) {
    .opsim-delivery-timeline {
        --dt-gap: 6px;
        margin-top: 6px;
    }

    .opsim-delivery-timeline { --dt-line-gap: 8px; }

    .opsim-dt-step { padding: 10px 6px; }

    .opsim-dt-icon     { width: 28px; height: 28px; }
    .opsim-dt-icon svg { width: 16px; height: 16px; }

    .opsim-dt-date   { margin-top: 6px; font-size: 0.72rem; }
    .opsim-dt-status { font-size: 0.78rem; line-height: 1.2; }
}

@media (max-width: 380px) {
    .opsim-dt-step { padding: 8px 4px; }

    .opsim-dt-date   { font-size: 0.68rem; }
    .opsim-dt-status { font-size: 0.72rem; line-height: 1.15; }
}

/* ── Journey animation ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .opsim-dt-step {
        --dt-delay: calc(var(--dt-index, 0) * (var(--dt-activate) + var(--dt-travel)));
    }

    /* Armed: every step that will be reached starts as pending. */
    .opsim-delivery-timeline.is-armed:not(.is-visible) .opsim-dt-step:not(.is-upcoming) {
        border-color: var(--opsim-border);
    }

    .opsim-delivery-timeline.is-armed:not(.is-visible) .opsim-dt-step:not(.is-upcoming) .opsim-dt-icon {
        background: var(--opsim-bg-secondary, #F9FAFB);
        color: var(--opsim-text-secondary);
        transform: scale(0.88);
    }

    .opsim-delivery-timeline.is-armed:not(.is-visible) .opsim-dt-step:not(.is-upcoming) .opsim-dt-date,
    .opsim-delivery-timeline.is-armed:not(.is-visible) .opsim-dt-step:not(.is-upcoming) .opsim-dt-status {
        color: var(--opsim-text-secondary);
    }

    .opsim-delivery-timeline.is-armed:not(.is-visible) .opsim-dt-step::after {
        transform: scaleX(0);
    }

    /* Visible: each step activates, then its segment travels to the next. The
       transitions are declared only here, so arming snaps instantly. */
    .opsim-delivery-timeline.is-visible .opsim-dt-step {
        transition: border-color var(--dt-activate) ease-out var(--dt-delay);
    }

    .opsim-delivery-timeline.is-visible .opsim-dt-icon {
        transition:
            background-color var(--dt-activate) ease-out var(--dt-delay),
            color var(--dt-activate) ease-out var(--dt-delay),
            transform var(--dt-activate) cubic-bezier(0.34, 1.3, 0.64, 1) var(--dt-delay);
    }

    .opsim-delivery-timeline.is-visible .opsim-dt-date,
    .opsim-delivery-timeline.is-visible .opsim-dt-status {
        transition: color var(--dt-activate) ease-out var(--dt-delay);
    }

    /* The line LOOPS; the cards above play once. One shared cycle keeps the
       three segments in step with each other and with the cards' first run
       (both start when `is-visible` lands):

           0      300ms   1000   1300   2000   2300        3200   3500
           seg 1  ░░░░░░  ▓▓▓▓▓▓ (700ms fill)                hold  fade
           seg 2                 ░░░░░░ ▓▓▓▓▓▓ (700ms fill)  hold  fade
           seg 3                               ▓▓▓ (300ms)   hold  fade

       The keyframe percentages below ARE those timings over --dt-cycle — if
       --dt-activate or --dt-travel change, recompute them. Only transform and
       opacity animate, so the loop stays on the compositor. */
    .opsim-delivery-timeline.is-visible .opsim-dt-step::after {
        animation: opsim-dt-line-1 var(--dt-cycle) linear infinite both;
    }

    .opsim-delivery-timeline.is-visible .opsim-dt-step:nth-child(2)::after {
        animation-name: opsim-dt-line-2;
    }

    .opsim-delivery-timeline.is-visible .opsim-dt-step:nth-child(3)::after {
        animation-name: opsim-dt-line-3;
    }

    /* delivery-timeline.js sets this while the block is off screen. */
    .opsim-delivery-timeline.is-paused .opsim-dt-step::after {
        animation-play-state: paused;
    }

    @keyframes opsim-dt-line-1 {
        0%, 8.571%       { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
        28.571%, 91.429% { transform: scaleX(1); opacity: 1; animation-timing-function: ease-out; }
        100%             { transform: scaleX(1); opacity: 0; }
    }

    @keyframes opsim-dt-line-2 {
        0%, 37.143%      { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
        57.143%, 91.429% { transform: scaleX(1); opacity: 1; animation-timing-function: ease-out; }
        100%             { transform: scaleX(1); opacity: 0; }
    }

    @keyframes opsim-dt-line-3 {
        0%, 57.143%      { transform: scaleX(0); opacity: 1; animation-timing-function: ease-out; }
        65.714%, 91.429% { transform: scaleX(1); opacity: 1; animation-timing-function: ease-out; }
        100%             { transform: scaleX(1); opacity: 0; }
    }

    /* A passed step is the current one until the next step activates. */
    .opsim-delivery-timeline.is-armed.is-visible .opsim-dt-step.is-complete {
        animation: opsim-dt-pass calc(2 * var(--dt-activate) + var(--dt-travel)) ease-in-out var(--dt-delay) both;
    }

    @keyframes opsim-dt-pass {
        0%   { border-color: var(--opsim-border); }
        23%  { border-color: var(--dt-brand); }
        77%  { border-color: var(--dt-brand); }
        100% { border-color: var(--opsim-border); }
    }
}