/**
 * "A delivery, not a download." (home page bento, #capabilities): a client
 * delivery as a 10 s loop, played by js/home.js while it is on screen
 * ([data-loop-scene] gets .is-playing). The labels are the Delivery Hub's
 * own: Job ID, expires, Private, Deliver, the recipients' status.
 *
 *   4–28 %   the four files go in, each ticked
 *   32–46 %  three recipients, each with a role
 *   52–56 %  Deliver is pressed and becomes Delivered
 *   64–84 %  each recipient's status comes back
 *   93–100 % it clears and loops
 *
 * The loop starts at 88 %, its finished frame: delivered, every status back.
 * Paused off screen, that is what a screenshot or a fast scroll sees; on
 * screen it clears and plays from the start.
 * Every row has its own keyframes so all of them clear at the same moment.
 * Sizes are in cqi of .bento-visual--delivery. Reduced motion shows the end.
 */

.bento-visual--delivery {
    flex: 1 1 auto;
    display: flex;
    height: auto;
    min-height: 21rem;
    margin-top: 1.5rem;
    container-type: inline-size;
}

.dl-scene {
    --dl-t: 10s;
    --dl-ok: #43c283;
    --dl-accent: #05c7bb;
    --dl-edge: rgba(255, 255, 255, 0.09);
    --dl-text: #dde0e2;
    --dl-muted: #989ea1;

    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3.4cqi;
    padding: 4.6cqi;
    background: #1b1c1d;
    color: var(--dl-text);
    font: 3.6cqi/1.3 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dl-scene img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.dl-scene b, .dl-scene em { font-weight: inherit; font-style: normal; }

.dl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3cqi;
    padding-bottom: 3.4cqi;
    border-bottom: 1px solid var(--dl-edge);
}

.dl-title {
    display: flex;
    flex-direction: column;
    gap: 0.8cqi;
    min-width: 0;
    font-size: 4.2cqi;
    font-weight: 600;
    color: #fff;
}

.dl-title b {
    font: 500 2.9cqi/1.3 'JetBrains Mono', ui-monospace, monospace;
    color: var(--dl-muted);
}

/* Tags and roles: mono caps on a hairline, no fill */
.dl-tag,
.dl-role,
.dl-status > span {
    padding: 0.7cqi 1.2cqi;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    font: 600 2.4cqi/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dl-muted);
    white-space: nowrap;
}

.dl-files,
.dl-people {
    display: grid;
    gap: 2cqi;
}

.dl-file,
.dl-person {
    display: grid;
    align-items: center;
    gap: 2.6cqi;
    opacity: 0;
}

.dl-file { grid-template-columns: 13cqi minmax(0, 1fr) auto; }
.dl-person { grid-template-columns: 7cqi minmax(0, 1fr) 17cqi 21cqi; }
.dl-role { justify-self: start; }

.dl-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 2px;
    background: #2a2d2f;
}

/* The film: a play mark over its still */
.dl-thumb--play::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin: -1.6cqi 0 0 -0.9cqi;
    border-style: solid;
    border-width: 1.6cqi 0 1.6cqi 2.6cqi;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

/* The report: a small white page with lines */
.dl-thumb--pdf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.9cqi;
    padding: 0 3.2cqi;
    background: #fbfbf9;
}

.dl-thumb--pdf > i { height: 0.7cqi; border-radius: 1px; background: rgba(21, 25, 27, 0.25); }
.dl-thumb--pdf > i:nth-child(2) { width: 70%; }
.dl-thumb--pdf > i:first-child { background: #15191b; width: 55%; }

.dl-name,
.dl-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
}

.dl-name em,
.dl-who em {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 3cqi;
    color: var(--dl-muted);
}

.dl-name em { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 2.7cqi; }

/* A file's tick */
.dl-ok {
    width: 4.2cqi;
    height: 4.2cqi;
    border-radius: 2px;
    background: var(--dl-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%2306150d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
    opacity: 0;
}

.dl-label {
    font-size: 2.6cqi;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dl-muted);
}

/* People are round. */
.dl-avatar {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #343739;
    font-size: 3cqi;
    font-weight: 700;
    color: #fff;
}

.dl-person:nth-child(3) .dl-avatar { background: #3c4a4f; }
.dl-person:nth-child(4) .dl-avatar { background: #4a4440; }

.dl-status { display: grid; justify-items: start; }
.dl-status > span { grid-area: 1 / 1; opacity: 0; }
.dl-status > span:last-child { color: var(--dl-ok); border-color: rgba(67, 194, 131, 0.55); }

.dl-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 3.4cqi;
    border-top: 1px solid var(--dl-edge);
}

.dl-btn {
    display: grid;
    padding: 2cqi 4cqi;
    border-radius: 3px;
    background: var(--dl-accent);
    font-size: 3.4cqi;
    font-weight: 700;
    color: #0b1215;
    animation: dlBtn var(--dl-t) linear infinite;
}

.dl-btn > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; }
.dl-btn__a { animation: dlBtnA var(--dl-t) linear infinite; }
.dl-btn__b { opacity: 0; animation: dlBtnB var(--dl-t) linear infinite; }

/* ── Timelines ─────────────────────────────────────────────────────────── */

.dl-file:nth-child(1) { animation: dlFile1 var(--dl-t) ease infinite; }
.dl-file:nth-child(1) .dl-ok { animation: dlTick1 var(--dl-t) ease infinite; }
.dl-file:nth-child(2) { animation: dlFile2 var(--dl-t) ease infinite; }
.dl-file:nth-child(2) .dl-ok { animation: dlTick2 var(--dl-t) ease infinite; }
.dl-file:nth-child(3) { animation: dlFile3 var(--dl-t) ease infinite; }
.dl-file:nth-child(3) .dl-ok { animation: dlTick3 var(--dl-t) ease infinite; }
.dl-file:nth-child(4) { animation: dlFile4 var(--dl-t) ease infinite; }
.dl-file:nth-child(4) .dl-ok { animation: dlTick4 var(--dl-t) ease infinite; }
.dl-person:nth-child(2) { animation: dlPerson1 var(--dl-t) ease infinite; }
.dl-person:nth-child(2) .dl-status > span:first-child { animation: dlSent1 var(--dl-t) linear infinite; }
.dl-person:nth-child(2) .dl-status > span:last-child { animation: dlDone1 var(--dl-t) linear infinite; }
.dl-person:nth-child(3) { animation: dlPerson2 var(--dl-t) ease infinite; }
.dl-person:nth-child(3) .dl-status > span:first-child { animation: dlSent2 var(--dl-t) linear infinite; }
.dl-person:nth-child(3) .dl-status > span:last-child { animation: dlDone2 var(--dl-t) linear infinite; }
.dl-person:nth-child(4) { animation: dlPerson3 var(--dl-t) ease infinite; }
.dl-person:nth-child(4) .dl-status > span:first-child { animation: dlSent3 var(--dl-t) linear infinite; }
.dl-person:nth-child(4) .dl-status > span:last-child { animation: dlDone3 var(--dl-t) linear infinite; }

@keyframes dlFile1 {
    0%, 4% { opacity: 0; translate: 0 3px; }
    8%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlTick1 {
    0%, 7% { opacity: 0; translate: 0 3px; }
    11%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlFile2 {
    0%, 10% { opacity: 0; translate: 0 3px; }
    14%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlTick2 {
    0%, 13% { opacity: 0; translate: 0 3px; }
    17%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlFile3 {
    0%, 16% { opacity: 0; translate: 0 3px; }
    20%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlTick3 {
    0%, 19% { opacity: 0; translate: 0 3px; }
    23%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlFile4 {
    0%, 22% { opacity: 0; translate: 0 3px; }
    26%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlTick4 {
    0%, 25% { opacity: 0; translate: 0 3px; }
    29%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlPerson1 {
    0%, 32% { opacity: 0; translate: 0 3px; }
    36%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlSent1 {
    0%, 55% { opacity: 0; }
    57%, 64% { opacity: 1; }
    64.5%, 100% { opacity: 0; }
}

@keyframes dlDone1 {
    0%, 64.5% { opacity: 0; }
    66%, 93% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

@keyframes dlPerson2 {
    0%, 37% { opacity: 0; translate: 0 3px; }
    41%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlSent2 {
    0%, 55% { opacity: 0; }
    57%, 72% { opacity: 1; }
    72.5%, 100% { opacity: 0; }
}

@keyframes dlDone2 {
    0%, 72.5% { opacity: 0; }
    74%, 93% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

@keyframes dlPerson3 {
    0%, 42% { opacity: 0; translate: 0 3px; }
    46%, 93% { opacity: 1; translate: 0 0; }
    97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes dlSent3 {
    0%, 55% { opacity: 0; }
    57%, 80% { opacity: 1; }
    80.5%, 100% { opacity: 0; }
}

@keyframes dlDone3 {
    0%, 80.5% { opacity: 0; }
    82%, 93% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

@keyframes dlBtn {
    0%, 30% { opacity: 0.45; transform: none; }
    46% { opacity: 1; }
    52% { transform: none; }
    53.5% { transform: scale(0.96); }
    55% { transform: none; }
    93% { opacity: 1; }
    100% { opacity: 0.45; }
}

@keyframes dlBtnA {
    0%, 54% { opacity: 1; }
    56%, 96% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes dlBtnB {
    0%, 54% { opacity: 0; }
    56%, 93% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

/* Rest on the finished frame (see the header); the shorthands above reset the delay, hence !important. */
.dl-scene *,
.dl-scene *::before,
.dl-scene *::after { animation-delay: calc(var(--dl-t) * -0.88) !important; }

/* Plays only while on screen (js/home.js adds .is-playing). */
.dl-scene:not(.is-playing),
.dl-scene:not(.is-playing) *,
.dl-scene:not(.is-playing) *::before,
.dl-scene:not(.is-playing) *::after { animation-play-state: paused; }

/* ── Reduced motion: delivered, every status back ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .dl-scene *,
    .dl-scene *::before,
    .dl-scene *::after { animation: none !important; }
    .dl-file, .dl-person, .dl-ok, .dl-status > span:last-child, .dl-btn__b { opacity: 1; }
    .dl-btn__a { opacity: 0; }
}