/* timeline section — layered over acg.css (loads after it). */

/* Full-bleed backdrop; content stays on the 1200px grid via padding. */
.timeline-section {
    max-width: none;
    padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    isolation: isolate;
}

/* ---------- Decoration ---------- */

.tl-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

.tl-deco > * {
    position: absolute;
}

/* Soft aurora band running down behind the rail. */
.tl-deco__aurora {
    inset: 0 0 0 0;
    background:
        radial-gradient(34vw 16% at 50% 12%, rgba(140, 202, 247, 0.22), transparent 70%),
        radial-gradient(30vw 14% at 38% 38%, rgba(241, 162, 240, 0.2), transparent 70%),
        radial-gradient(32vw 15% at 62% 62%, rgba(147, 230, 212, 0.16), transparent 70%),
        radial-gradient(36vw 16% at 46% 88%, rgba(163, 180, 245, 0.22), transparent 70%);
}

/* Faint perspective grid fading toward the top. */
.tl-deco__grid {
    inset: 0;
    background:
        linear-gradient(rgba(140, 202, 247, 0.12) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, rgba(140, 202, 247, 0.12) 1px, transparent 1px) 0 0 / 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 80%);
    opacity: 0.55;
}

/* Twinkling sparkles: tiny radial dots on two offset layers. */
.tl-deco__stars,
.tl-deco__stars::after {
    inset: 0;
    content: "";
    position: absolute;
    background-repeat: repeat;
}

.tl-deco__stars {
    background-image:
        radial-gradient(circle, #fff 0 1px, transparent 2px),
        radial-gradient(circle, var(--sky) 0 1px, transparent 2px),
        radial-gradient(circle, var(--sun) 0 1.5px, transparent 2.5px);
    background-size: 211px 263px, 317px 197px, 457px 389px;
    background-position: 20px 40px, 130px 90px, 60px 200px;
}

.tl-deco__stars::after {
    background-image:
        radial-gradient(circle, var(--pink) 0 1px, transparent 2px),
        radial-gradient(circle, #fff 0 1.5px, transparent 2.5px);
    background-size: 283px 241px, 419px 331px;
    background-position: 90px 150px, 200px 20px;
}

/* Oversized year watermark. */
.tl-deco__year {
    right: -2%;
    top: 9%;
    font-family: var(--font-script);
    font-size: clamp(110px, 20vw, 300px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(140, 202, 247, 0.07);
    background: linear-gradient(180deg, rgba(140, 202, 247, 0.04), transparent 75%);
    -webkit-background-clip: text;
    background-clip: text;
    rotate: -6deg;
}

.tl-deco__img {
    max-width: none;
    height: auto;
}

.tl-deco__img--blob-a { width: min(34vw, 460px); left: -10%; top: 18%; opacity: 0.4; }
.tl-deco__img--blob-b { width: min(30vw, 400px); right: -9%; top: 58%; opacity: 0.35; }
.tl-deco__img--loop-b { width: min(22vw, 300px); right: -2%; top: 36%; opacity: 0.75; }
.tl-deco__img--loop-c { width: min(24vw, 320px); left: -2%; top: 70%; opacity: 0.75; }
.tl-deco__img--ring { width: min(12vw, 150px); right: 10%; top: 80%; opacity: 0.7; }
.tl-deco__img--ring-sm { width: min(6vw, 70px); left: 12%; top: 50%; opacity: 0.8; }

.tl-deco__squares--a { left: 3%; top: 26%; opacity: 0.5; scale: 0.8; }
.tl-deco__squares--b { right: 2%; top: 8%; opacity: 0.6; }

/* ---------- When: big step number + date, opposite the card ---------- */

.tl__when {
    --c: var(--sky);
    position: relative;
    display: grid;
    justify-items: start;
    gap: 6px;
}

.tl--berlangsung .tl__when { --c: var(--pink); }
.tl--mendatang .tl__when { --c: var(--mint); }

.tl:nth-child(even) .tl__when {
    justify-items: end;
    text-align: right;
}

/* Outlined step number, ghosted behind the date. */
.tl__num {
    font-size: clamp(64px, 8vw, 112px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 55%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 80%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
}

.tl__stamp {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -0.45em;
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.tl:nth-child(even) .tl__stamp { flex-direction: row-reverse; }

/* Short glowing tick reaching from the date toward the rail. */
.tl__stamp::before {
    content: "";
    flex: none;
    width: clamp(20px, 3vw, 40px);
    height: 2px;
    border-radius: 2px;
    background: var(--c);
    box-shadow: 0 0 12px var(--c);
}

.tl__stamp time {
    background: linear-gradient(90deg, var(--text), var(--c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tl:nth-child(even) .tl__stamp time {
    background-image: linear-gradient(270deg, var(--text), var(--c));
}

.tl__when .pill {
    margin-top: 6px;
}

.tl--selesai .tl__when > :not(.pill) {
    opacity: 0.75;
}

.tl--berlangsung .tl__num {
    -webkit-text-stroke-color: var(--pink);
    filter: drop-shadow(0 0 18px rgba(241, 162, 240, 0.45));
}

.tl__card .link {
    display: inline-flex;
    margin-top: 12px;
}

@media (max-width: 860px) {
    .timeline-section {
        padding-inline: var(--gutter);
    }

    /* Single column: date block sits above its card, always left-aligned. */
    .tl:nth-child(even) .tl__when {
        justify-items: start;
        text-align: left;
    }

    .tl:nth-child(even) .tl__stamp { flex-direction: row; }

    .tl:nth-child(even) .tl__stamp time {
        background-image: linear-gradient(90deg, var(--text), var(--c));
    }

    .tl__num { font-size: 56px; }
    .tl__stamp::before { display: none; }

    .tl-deco__squares {
        display: none;
    }

    .tl-deco__img--blob-a,
    .tl-deco__img--blob-b {
        opacity: 0.28;
    }
}

@media (max-width: 640px) {
    .tl-deco__year {
        right: 0;
        font-size: clamp(80px, 24vw, 130px);
    }
}

/* Phone: vw-based glows shrink to specks, so floor them in px; squares and blobs stay visible like on desktop. */
@media (max-width: 860px) {
    .tl-deco__aurora {
        background:
            radial-gradient(max(34vw, 190px) 7% at 50% 12%, rgba(140, 202, 247, 0.26), transparent 70%),
            radial-gradient(max(30vw, 170px) 6% at 30% 38%, rgba(241, 162, 240, 0.24), transparent 70%),
            radial-gradient(max(32vw, 180px) 6% at 70% 62%, rgba(147, 230, 212, 0.2), transparent 70%),
            radial-gradient(max(36vw, 200px) 7% at 40% 88%, rgba(163, 180, 245, 0.26), transparent 70%);
    }

    .tl-deco__squares {
        display: block;
        --cell: 16px;
    }

    .tl-deco__squares--a {
        left: 1%;
    }

    .tl-deco__img--blob-a,
    .tl-deco__img--blob-b {
        opacity: 0.4;
    }

    .tl-deco__img--blob-a { width: clamp(180px, 56vw, 300px); }
    .tl-deco__img--blob-b { width: clamp(160px, 50vw, 260px); }
    .tl-deco__img--loop-b { width: clamp(130px, 40vw, 230px); }
    .tl-deco__img--loop-c { width: clamp(140px, 42vw, 250px); }
    .tl-deco__img--ring { width: clamp(70px, 20vw, 120px); }
    .tl-deco__img--ring-sm { width: clamp(36px, 10vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
    .tl-deco *,
    .tl-deco *::after {
        animation: none !important;
    }
}