/** Sequence Diagrams
 * Step-by-step process visualization with connecting arrows
 */
.markdown-section .sequence {
    --sequence-block-back-color: var(--color-mono-1);
    --sequence-block-border-color: var(--color-mono-3);
    --sequence-block-border-color--focus: var(--theme-color);
    --sequence-arrow-color: var(--theme-color);
    --sequence-gap: 1.8em;

    /* Base layout */
    display: flex !important;
    flex-direction: column;
    list-style: none;
    margin-block: 2em;
    margin-inline: auto !important;
    gap: var(--sequence-gap) 0;
    min-width: 30%;
    max-width: 20rem;
    padding-left: 0;
}

@media (min-width: 40rem) {
    .markdown-section .sequence.horizontal {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        width: unset;
        min-width: unset;
        max-width: 100%;
    }
}


/* SEQUENCE ITEMS */

.markdown-section .sequence > li.sequence-item {
    margin: 0;
    flex: 1;
    padding: 0.8em;
    background-color: var(--sequence-block-back-color);
    border: 1px solid var(--sequence-block-border-color);
    border-radius: 0.25em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: flex-start;
    position: relative;
    transition: all 250ms;
    box-shadow: var(--box-shadow-small);

    /* Center single-line content */
    &:not(:has(> :nth-child(2))) {
        text-align: center;
        align-items: center;
    }
}

.markdown-section .sequence.horizontal > li.sequence-item,
.markdown-section .sequence.vertical > li.sequence-item {
    min-width: 50%;
}

@media (min-width: 40rem) {
    .markdown-section .sequence.horizontal > li.sequence-item {
        margin-right: var(--sequence-gap);
    }
}


/* CONTENT FORMATTING */

.markdown-section .sequence > li.sequence-item > * {
    margin-top: 0;
    margin-bottom: 0;
}

.markdown-section .sequence > li.sequence-item {
    :is(h1, h2, h3, h4) {
        padding: 0;
        border: none;
    }
}


/* ARROW CONNECTORS */

.markdown-section .sequence > li.sequence-item:not(:last-of-type)::after {
    content: "";
    position: absolute;
    width: var(--sequence-gap);
    height: var(--sequence-gap);
    border: calc(0.5 * var(--sequence-gap)) solid transparent;
}

/* Default (vertical on mobile) and explicit vertical: down arrow */
.markdown-section .sequence.horizontal > li.sequence-item:not(:last-of-type)::after,
.markdown-section .sequence.vertical > li.sequence-item:not(:last-of-type)::after {
    bottom: calc(-1.3 * var(--sequence-gap));
    left: calc(50% - (0.5 * var(--sequence-gap)));
    border-top-color: var(--sequence-arrow-color);
}

/* Horizontal on larger viewports: right arrow */
@media (min-width: 40rem) {
    .markdown-section .sequence.horizontal > li.sequence-item:not(:last-of-type)::after {
        bottom: unset;
        left: unset;
        right: calc(-1.3 * var(--sequence-gap));
        top: calc(50% - (0.5 * var(--sequence-gap)));
        border-left-color: var(--sequence-arrow-color);
        border-top-color: transparent;
    }
}


/* HOVER EFFECTS */

.markdown-section .sequence > li.sequence-item:hover {
    border-color: var(--sequence-block-border-color--focus);
    box-shadow: var(--box-shadow);
}


/* ANIMATIONS */

@keyframes seqFadeInOut {
    0% { opacity: 0.5; }
    1% { opacity: 1.0; }
    9% { opacity: 1.0; }
    10% { opacity: 0.5; }
    100% { opacity: 0.5; }
}

@keyframes shortSeqFadeInOut {
    0% { opacity: 0.5; }
    1% { opacity: 1.0; }
    19% { opacity: 1.0; }
    20% { opacity: 0.5; }
    100% { opacity: 0.5; }
}

.markdown-section .sequence.animated .sequence-item {
    animation: seqFadeInOut 10s linear infinite;
    animation-fill-mode: both;
}

/* Shorter sequences (5 or fewer items) use faster animation */
.markdown-section .sequence.animated:not(:has(.sequence-item:nth-of-type(6))) .sequence-item {
    animation-duration: 6s;
    animation-name: shortSeqFadeInOut;
}

/* Staggered animation delays */
.markdown-section .sequence.animated {
    .sequence-item:nth-of-type(1) { animation-delay: 0ms; }
    .sequence-item:nth-of-type(2) { animation-delay: 1000ms; }
    .sequence-item:nth-of-type(3) { animation-delay: 2000ms; }
    .sequence-item:nth-of-type(4) { animation-delay: 3000ms; }
    .sequence-item:nth-of-type(5) { animation-delay: 4000ms; }
    .sequence-item:nth-of-type(6) { animation-delay: 5000ms; }
    .sequence-item:nth-of-type(7) { animation-delay: 6000ms; }
    .sequence-item:nth-of-type(8) { animation-delay: 7000ms; }
    .sequence-item:nth-of-type(9) { animation-delay: 8000ms; }
    .sequence-item:nth-of-type(10) { animation-delay: 9000ms; }
}

/* Pause animation on hover */
.markdown-section .sequence.animated:hover .sequence-item {
    opacity: 1;
    animation: none;
}