.history-demo {
    position: relative;
    width: 100%;
    height: clamp(493px, 44.62vw, 680px);
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
    background: #f6f9fc;
    color: #101f35;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", Arial, sans-serif;
    --history-red: #e85458;
    --history-navy: #1a2b4c;
    --history-text: #1a2b4c;
    --history-muted: #98a2b3;
    --history-desc: #667085;
}

.history-demo *,
.history-demo *::before,
.history-demo *::after {
    box-sizing: border-box;
}

.history-demo h1,
.history-demo p {
    margin: 0;
    font: inherit;
}

.history-demo__background {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: url("../../images/about/about-history-bg.png") center center / cover no-repeat;
    opacity: 0;
    transform: scale(1.012);
    transition: opacity 900ms ease, transform 1400ms cubic-bezier(.2, .75, .3, 1);
}

.history-demo::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    content: "";
    pointer-events: none;
}

.history-demo.is-visible .history-demo__background {
    opacity: 1;
    transform: scale(1);
}

.history-demo__stage {
    position: relative;
    width: min(100%, 1520px);
    height: 100%;
    margin: 0 auto;
}

.history-demo__header {
    position: absolute;
    z-index: 5;
    top: 12.6%;
    left: 5.05%;
    pointer-events: none;
}

.history-demo__header h2 {
    color: var(--history-navy);
    font-size: clamp(30px, 2.4vw, 32px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.history-demo__header p {
    margin-top: 10px;
    max-width: 36em;
    color: var(--history-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

.history-demo__desktop {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.history-demo__path {
    fill: none;
    stroke: #a8b4c4;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 2200ms cubic-bezier(.45, 0, .2, 1) 250ms;
}

.history-demo.is-visible .history-demo__path {
    stroke-dashoffset: 0;
}

.history-demo__milestone {
    cursor: pointer;
    opacity: 0;
    outline: none;
    transform: translateY(10px);
    transform-box: fill-box;
    transform-origin: center;
    transition:
        opacity 500ms ease var(--delay),
        transform 500ms ease var(--delay);
}

.history-demo.is-visible .history-demo__milestone {
    opacity: 1;
    transform: translateY(0);
}

.history-demo__connector {
    fill: none;
    stroke: rgba(30, 45, 62, .64);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    vector-effect: non-scaling-stroke;
    transition: stroke 500ms ease;
}

.history-demo__circle {
    fill: #fff;
    stroke: var(--history-red);
    stroke-width: 1.8;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
    transition:
        fill 500ms ease,
        stroke 500ms ease,
        transform 500ms ease,
        filter 500ms ease;
}

.history-demo__year,
.history-demo__event {
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", Arial, sans-serif;
    text-rendering: geometricPrecision;
    user-select: none;
}

.history-demo__year {
    fill: var(--history-red);
    font-size: 14px;
    font-weight: 600;
}

.history-demo__event-title {
    fill: var(--history-text);
    font-size: 15px;
    font-weight: 600;
    transition: fill 500ms ease;
}

.history-demo__event-desc {
    fill: var(--history-desc);
    font-size: 12.5px;
    font-weight: 400;
    opacity: .92;
    transition: fill 500ms ease, opacity 500ms ease;
}

.history-demo__milestone.is-active .history-demo__circle,
.history-demo__milestone:focus-visible .history-demo__circle {
    fill: #fff7f7;
    stroke: #f12f3d;
    filter: drop-shadow(0 0 5px rgba(239, 63, 75, .55));
    transform: scale(1.42);
}

.history-demo__milestone.is-active .history-demo__connector,
.history-demo__milestone:focus-visible .history-demo__connector {
    stroke: rgba(239, 63, 75, .72);
}

.history-demo__milestone.is-active .history-demo__event-title,
.history-demo__milestone:focus-visible .history-demo__event-title {
    fill: var(--history-red);
}

.history-demo__milestone.is-active .history-demo__event-desc,
.history-demo__milestone:focus-visible .history-demo__event-desc {
    fill: #101827;
    opacity: 1;
}

.history-demo__mobile {
    display: none;
}

@media (max-width: 767px) {
    .history-demo {
        height: auto;
        min-height: 790px;
        padding: 54px 20px 58px;
        overflow: hidden;
        background: #f5f9fc;
    }

    .history-demo__background {
        background-position: 67% bottom;
        background-size: auto 100%;
        opacity: 0;
    }

    .history-demo::after {
        background: rgba(250, 252, 254, .54);
    }

    .history-demo__stage {
        width: min(100%, 430px);
        min-height: 676px;
    }

    .history-demo__header {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 28px;
    }

    .history-demo__header h2 {
        font-size: 28px;
        letter-spacing: 0;
    }

    .history-demo__header p {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.55;
    }

    .history-demo__desktop {
        display: none;
    }

    .history-demo__mobile {
        display: block;
        width: 100%;
        height: 620px;
        overflow: visible;
    }

    .history-demo__path--mobile {
        stroke: #a8b4c4;
        stroke-width: 1.2;
        stroke-dasharray: 700;
        stroke-dashoffset: 700;
        transition-duration: 1800ms;
        transition-delay: 200ms;
    }

    .history-demo__mobile .history-demo__circle {
        stroke-width: 2;
    }

    .history-demo__mobile .history-demo__year {
        fill: var(--history-red);
        font-size: 13px;
    }

    .history-demo__mobile .history-demo__event-title {
        font-size: 15px;
    }

    .history-demo__mobile .history-demo__event-desc {
        font-size: 12.5px;
        opacity: .32;
    }

    .history-demo__mobile .history-demo__milestone.is-active .history-demo__event-desc,
    .history-demo__mobile .history-demo__milestone:focus-visible .history-demo__event-desc {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .history-demo *,
    .history-demo *::before,
    .history-demo *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}