/*
 * Dual Timeline: left | line | right on desktop; one column with the line on the left
 * under 768px. Dots sit on the line with a ring in the background colour behind them
 * (--dt-bg, read by script.js), so the line looks broken around each dot.
 */

.blk--dual-timeline {
    --dt-gap: 96px;          /* between the two text columns; the line is in the middle */
    --dt-point-gap: 28px;
    --dt-line-width: 2px;
    --dt-dot: 14px;
    --dt-ring: 7px;
    --dt-dot-y: 13px;        /* dot centre below the top of a point's title */
    --dt-link-gap: 12px;     /* Offset: between a dot's short line and its text */
    --dt-bg: var(--white);
    --dt-line: var(--theme-600);     /* the colour theme (lighter on dark backgrounds, below) */
    --dt-fill: var(--theme-600);
    --dt-shift: calc(var(--reveal-shift) * .6);
}

.is-dark .blk--dual-timeline,
.blk--dual-timeline.is-dark {
    --dt-line: var(--theme-400);
    --dt-fill: var(--theme-400);
}

.dual-timeline__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
    align-items: start;
    column-gap: calc(var(--dt-gap) / 2);
    row-gap: var(--dt-point-gap);
}

.dual-timeline__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--dt-line-width);
    border-radius: var(--dt-line-width);
    background: var(--dt-line);
    transform: translateX(-50%);
}

.dual-timeline__grid > [data-side="left"] {
    grid-column: 1;
    text-align: right;
}

.dual-timeline__grid > [data-side="right"] {
    grid-column: 3;
    text-align: left;
}

/* ---------- Headings ---------- */

.dual-timeline__head {
    grid-row: 1;
    margin-bottom: calc(40px - var(--dt-point-gap));
}

.dual-timeline__head .text-group__body {
    gap: var(--step-3);
    margin-top: var(--step-5);
}

/* ---------- Points ---------- */

.dual-timeline__point {
    position: relative;
}

.dual-timeline__title {
    color: var(--black);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
}

.is-dark .dual-timeline__title {
    color: var(--heading);
}

.dual-timeline__text {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.6;
}

/* A zero-size anchor on the line, level with the title's first line */
.dual-timeline__marker {
    position: absolute;
    z-index: 1;
    top: var(--dt-dot-y);
    width: 0;
    height: 0;
}

.dual-timeline__point[data-side="left"] .dual-timeline__marker {
    right: calc(var(--dt-gap) / -2);
}

.dual-timeline__point[data-side="right"] .dual-timeline__marker {
    left: calc(var(--dt-gap) / -2);
}

.dual-timeline__dot {
    position: absolute;
    top: calc(var(--dt-dot) / -2);
    left: calc(var(--dt-dot) / -2);
    width: var(--dt-dot);
    height: var(--dt-dot);
    border-radius: 50%;
    background: var(--dt-fill);
    box-shadow: 0 0 0 var(--dt-ring) var(--dt-bg);
}

@media (min-width: 768px) {
    /* Aligned (and Offset before it's placed): one dot per row */
    .dual-timeline--aligned .dual-timeline__point.is-paired .dual-timeline__marker,
    .dual-timeline--offset:not(.is-placed) .dual-timeline__point.is-paired .dual-timeline__marker {
        display: none;
    }

    /* Offset: script.js sets each point's top; the grid only places the headings */
    .dual-timeline--offset.is-placed .dual-timeline__point {
        position: absolute;
        grid-area: auto !important;
        width: calc((100% - var(--dt-gap)) / 2);
    }

    .dual-timeline--offset.is-placed .dual-timeline__point[data-side="left"] {
        left: 0;
    }

    .dual-timeline--offset.is-placed .dual-timeline__point[data-side="right"] {
        right: 0;
    }

    /* Offset: a short line from each dot towards its text, to show which side it's on */
    .dual-timeline--offset .dual-timeline__marker::after {
        content: '';
        position: absolute;
        top: calc(var(--dt-line-width) / -2);
        width: calc(var(--dt-gap) / 2 - var(--dt-dot) / 2 - var(--dt-ring) - var(--dt-link-gap));
        height: var(--dt-line-width);
        border-radius: var(--dt-line-width);
        background: var(--dt-fill);
    }

    .dual-timeline--offset .dual-timeline__point[data-side="left"] .dual-timeline__marker::after {
        right: calc(var(--dt-dot) / 2 + var(--dt-ring)); /* the same gap as the centre line's */
        transform-origin: right;
    }

    .dual-timeline--offset .dual-timeline__point[data-side="right"] .dual-timeline__marker::after {
        left: calc(var(--dt-dot) / 2 + var(--dt-ring));
        transform-origin: left;
    }
}

@media (max-width: 767px) {
    .blk--dual-timeline {
        --dt-point-gap: 24px;
        --dt-m-line: 7px;     /* line centre from the left edge */
        --dt-m-text: 28px;    /* text start */
    }

    .dual-timeline__grid {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        padding-left: var(--dt-m-text);
    }

    .dual-timeline__line {
        left: var(--dt-m-line);
    }

    .dual-timeline__grid > [data-side] {
        grid-row: auto !important;
        grid-column: 1;
        text-align: left;
    }

    .dual-timeline__head[data-side="right"] {
        margin-top: calc(56px - var(--dt-point-gap));
    }

    .dual-timeline__point[data-side] .dual-timeline__marker {
        right: auto;
        left: calc(var(--dt-m-line) - var(--dt-m-text));
    }

    .dual-timeline__head .text-group__heading {
        font-size: 34px;
    }
}

/* ---------- Entrance (script.js) ----------
   The line draws down; as it reaches each dot, the dot pops in and the point's text
   slides out from the line (left side leftwards, right side rightwards; on phones all to
   the right). Only the text moves and fades, never the dot or its ring. */

.blk--dual-timeline.dt-anim .dual-timeline__head,
.blk--dual-timeline.dt-anim .dual-timeline__point > :not(.dual-timeline__marker) {
    opacity: 0;
}

.blk--dual-timeline.dt-anim .dual-timeline__head[data-side="left"],
.blk--dual-timeline.dt-anim .dual-timeline__point[data-side="left"] > :not(.dual-timeline__marker) {
    translate: var(--dt-shift) 0;
}

.blk--dual-timeline.dt-anim .dual-timeline__head[data-side="right"],
.blk--dual-timeline.dt-anim .dual-timeline__point[data-side="right"] > :not(.dual-timeline__marker) {
    translate: calc(var(--dt-shift) * -1) 0;
}

.blk--dual-timeline.dt-armed .dual-timeline__head,
.blk--dual-timeline.dt-armed .dual-timeline__point > :not(.dual-timeline__marker) {
    transition: opacity var(--reveal-text) ease, translate var(--reveal-text) var(--reveal-ease);
}

.blk--dual-timeline.dt-armed .dual-timeline__point > .dual-timeline__text {
    transition-delay: .08s;
}

.blk--dual-timeline.dt-anim .dual-timeline__head.is-in,
.blk--dual-timeline.dt-anim .dual-timeline__point.is-in > :not(.dual-timeline__marker) {
    opacity: 1;
    translate: none;
}

@media (max-width: 767px) {
    .blk--dual-timeline.dt-anim .dual-timeline__head[data-side="left"],
    .blk--dual-timeline.dt-anim .dual-timeline__point[data-side="left"] > :not(.dual-timeline__marker) {
        translate: calc(var(--dt-shift) * -1) 0;
    }

    .blk--dual-timeline.dt-anim .dual-timeline__head.is-in,
    .blk--dual-timeline.dt-anim .dual-timeline__point.is-in > :not(.dual-timeline__marker) {
        translate: none;
    }
}

.blk--dual-timeline.dt-anim .dual-timeline__dot {
    scale: 0;
}

.blk--dual-timeline.dt-anim .dual-timeline__marker.is-in > .dual-timeline__dot {
    scale: 1;
    animation: dual-timeline-pop .55s ease-out both;
}

/* Offset: the short line draws out towards the text once its dot has popped in */
.blk--dual-timeline.dt-anim .dual-timeline__marker::after {
    scale: 0 1;
}

.blk--dual-timeline.dt-anim .dual-timeline__marker.is-in::after {
    scale: 1;
    transition: scale .35s var(--reveal-ease) .2s;
}

@keyframes dual-timeline-pop {
    0% { scale: 0; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
    55% { scale: 1.3; animation-timing-function: ease-in-out; }
    80% { scale: .94; animation-timing-function: ease-in-out; }
    100% { scale: 1; }
}