.tl-section {
    overflow: hidden;
    position: relative;
    margin-top: 36px;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(197, 168, 128, .04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(197, 168, 128, .04) 1px, transparent 1px);
        background-size: 60px 60px;
    }
}

.tl-header.tl-header {
    text-align: left;
    padding: 0 24px;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    font-size: .72rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

/* ── Scroll wrapper ─────────────────────────── */
.tl-scroll-outer {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: var(--container-width);
    padding: 0 24px;
    margin-inline: auto;
}

/* Grab cursor shown only when content overflows */
.tl-scroll-outer.is-draggable {
    cursor: grab;
}

.tl-scroll-outer.is-dragging {
    cursor: grabbing !important;
    user-select: none;
}

.tl-scroll-outer::-webkit-scrollbar {
    display: none;
}

/* ── Base resets (font only — no fill override) ── */
#tl-svg text {
    font-family: 'Inter', sans-serif;
}

/* ── Spine track: stroke-dashoffset draw-on animation ── */
#tl-track {
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
}

#tl-svg.tl-active #tl-track {
    animation: tl-track-grow 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes tl-track-grow {
    from {
        stroke-dashoffset: 1100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* ── Per-slot stagger base (delay added inline) ── */
.tl-svg-node {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .5s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.tl-svg-date {
    opacity: 0;
    transition: opacity .5s ease;
}

.tl-svg-tick {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.tl-svg-label {
    opacity: 0;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* ── Activated states ───────────────────────────── */
#tl-svg.tl-active .tl-svg-node {
    opacity: 1;
    transform: scale(1);
}

#tl-svg.tl-active .tl-svg-date {
    opacity: 1;
}

#tl-svg.tl-active .tl-svg-tick {
    animation: tl-tick-draw .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes tl-tick-draw {
    from {
        stroke-dashoffset: 200;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.tl-svg-tick:nth-of-type(2n) + .tl-svg-label.tl-svg-title {
    transform:translateY(12px);

    & + .tl-svg-label.tl-svg-body {
        transform:translateY(12px);
    }
}

.tl-svg-tick:nth-of-type(2n+1) + .tl-svg-label.tl-svg-title {
    transform:translateY(-12px);

    & + .tl-svg-label.tl-svg-body {
        transform:translateY(-12px);
    }
}

.tl-svg-label[x="68.75"] {
    transition-delay:.45s;
}

.tl-svg-label[x="206.25"] {
    transition-delay:.63s;
}

.tl-svg-label[x="343.75"] {
    transition-delay:.81s;
}

.tl-svg-label[x="481.25"] {
    transition-delay:.99s;
}

.tl-svg-label[x="618.75"] {
    transition-delay:1.17s;
}

.tl-svg-label[x="756.25"] {
    transition-delay:1.35s;
}

.tl-svg-label[x="893.75"] {
    transition-delay:1.53s;
}

.tl-svg-label[x="1031.25"] {
    transition-delay:1.71s;
}

#tl-svg.tl-active .tl-svg-label {
    opacity: 1;
    transform: translateY(0);
}

.tl-svg-ring {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

#tl-svg.tl-active .tl-svg-ring {
    animation: tl-svg-ring 2s ease-out infinite;
}

#tl-svg.tl-active .tl-svg-ring-curr {
    animation: tl-svg-ring-curr 2s ease-out infinite;
}

@keyframes tl-svg-ring {
    0% {
        transform: scale(.6);
        opacity: .7;
    }

    70% {
        transform: scale(1.9);
        opacity: 0;
    }

    100% {
        transform: scale(.6);
        opacity: 0;
    }
}

@keyframes tl-svg-ring-curr {
    0% {
        transform: scale(.5);
        opacity: .8;
    }

    70% {
        transform: scale(2.2);
        opacity: 0;
    }

    100% {
        transform: scale(.5);
        opacity: 0;
    }
}

.tl-svg-title {
    fill: var(--accent-color);
    font-weight: 600;
    font-size: 12px;
}

.tl-svg-date {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    fill: var(--accent-color);
}

.tl-svg-body {
    font-size: 10px;
    fill: white;
}