/* Day Timeline (Dagsschema) — kabdalis2 design system.
   Wrapper: .kabdalis-day-timeline.kab2-tl. view.js adds .kab2-tl--armed once
   JS is confirmed (only then are steps hidden) and .is-in on scroll-into-view:
   the spine grows and steps cascade. .no-anim shows everything statically. */

.kab2-tl{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.kab2-tl__head{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kab2-tl__title{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
}

.kab2-tl__list{
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* The spine — visible by default (no-JS), collapsed only once JS arms the
   block, then grows to full height when .is-in lands. */
.kab2-tl__list::before{
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        var(--accent),
        color-mix(in srgb, var(--accent) 35%, transparent));
    transform-origin: top;
    transition: transform .9s cubic-bezier(.22, .85, .35, 1);
}
.kab2-tl--armed:not(.is-in) .kab2-tl__list::before{
    transform: scaleY(0);
}

.kab2-tl__item{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kab2-tl__dot{
    position: absolute;
    left: -26px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 3px solid var(--accent);
    box-sizing: border-box;
}

.kab2-tl__time{
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--accent);
}

.kab2-tl__steptitle{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    font-size: 1.08rem;
    line-height: 1.2;
    margin: 0;
    color: var(--ink);
}

.kab2-tl__text{
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Cascade — steps hidden ONLY when JS armed the block, then slide in
   one after another once .is-in arrives. */
.kab2-tl--armed .kab2-tl__item{
    opacity: 0;
    transform: translateX(-10px);
    transition:
        opacity .5s cubic-bezier(.22, .85, .35, 1),
        transform .5s cubic-bezier(.22, .85, .35, 1);
}
.kab2-tl--armed.is-in .kab2-tl__item{
    opacity: 1;
    transform: none;
}
.kab2-tl--armed.is-in .kab2-tl__item:nth-child(1){ transition-delay: .1s; }
.kab2-tl--armed.is-in .kab2-tl__item:nth-child(2){ transition-delay: .25s; }
.kab2-tl--armed.is-in .kab2-tl__item:nth-child(3){ transition-delay: .4s; }
.kab2-tl--armed.is-in .kab2-tl__item:nth-child(4){ transition-delay: .55s; }
.kab2-tl--armed.is-in .kab2-tl__item:nth-child(5){ transition-delay: .7s; }
.kab2-tl--armed.is-in .kab2-tl__item:nth-child(n+6){ transition-delay: .85s; }

@media (prefers-reduced-motion: reduce){
    .kab2-tl__list::before{ transform: none !important; transition: none; }
    .kab2-tl--armed .kab2-tl__item{ opacity: 1; transform: none; transition: none; }
}