/* ==========================================================
   ROADMAP
========================================================== */

.rm {

    position: relative;

    overflow: hidden;

    background: #111;

    padding: 180px 0;

}

.rm__container {

    width: min(var(--container-w), calc(100% - var(--side-gutter) - var(--side-gutter)));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr;

    align-items: center;

    position: relative;

}


/* ==========================================================
   TIMELINE
========================================================== */

.rm__timeline {

    position: relative;

    width: 100%;

    height: 420px;

}

.rm__svg {

    width: 100%;

    height: 100%;

    overflow: visible;

    display: block;

}


/* ==========================================================
   PANEL
========================================================== */

.rm__panel {

    position: absolute;

    inset: 0;

    width: 72%;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 24px;

}

.rm__panel.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

.rm__year {

    font-family: var(--pt-serif);

    font-size: clamp(60px, 8vw, 130px);

    line-height: .9;

    color: var(--white);

}

.rm__title {

    font-family: var(--pt-serif);

    font-size: clamp(28px, 3vw, 52px);

    font-weight: 400;

    color: var(--white);

}

.rm__description {

    width: min(700px, 100%);

    color: rgba(255, 255, 255, .65);

    font-family: var(--satoshi);

    font-size: 18px;

    line-height: 1.8;

}

.rm__media {

    width: 100%;

}


/* ==========================================================
   CLOSE
========================================================== */

.rm__close {

    position: absolute;

    top: 0;

    right: 0;

    width: 52px;

    height: 52px;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 50%;

    background: rgba(255, 255, 255, .03);

    color: white;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    backdrop-filter: blur(20px);

}


/* ==========================================================
   TOOLTIP
========================================================== */

.rm__tooltip {

    position: absolute;

    left: 0;

    top: 0;

    transform: translate(-50%, -120%);

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

    border-radius: 18px;

    padding: 14px 18px;

    min-width: 180px;

    opacity: 0;

    pointer-events: none;

    transition: .25s var(--cubic);

}

.rm__tooltip.active {

    opacity: 1;

}

.rm__tooltip-year {

    display: block;

    color: white;

    font-size: 14px;

    font-family: var(--satoshi);

    margin-bottom: 6px;

}

.rm__tooltip-text {

    color: rgba(255, 255, 255, .6);

    font-size: 14px;

    line-height: 1.5;

    font-family: var(--satoshi);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1024px) {

    .rm {

        padding: 120px 0;

    }

    .rm__timeline {

        height: 340px;

    }

}

@media (max-width:768px) {

    .rm {

        padding: 90px 0;

    }

    .rm__timeline {

        height: 240px;

    }

    .rm__panel {

        width: 100%;

    }

}


/* ==========================================================
ROAD
========================================================== */

.rm-road-base {

    fill: none;

    stroke: rgba(255, 255, 255, .16);

    stroke-width: 7;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.rm-road-progress {

    fill: none;

    stroke: white;

    stroke-width: 7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* ==========================================================
NODES
========================================================== */

.rm-node {

    cursor: pointer;

}

.rm-node-hit {

    fill: transparent;

}

.rm-node-outer {

    fill: var(--bg-dark);

    stroke: white;

    stroke-width: 2;

    transition: .35s var(--cubic);

}

.rm-node-inner {

    fill: white;

    transition: .35s var(--cubic);

}

.rm-node:hover .rm-node-outer {

    r: 12;

    fill: rgba(255, 255, 255, .08);

}

.rm-node:hover .rm-node-inner {

    r: 5;

}

.rm-node-year {

    fill: white;

    font-size: 22px;

    font-family: var(--satoshi);

    font-weight: 600;

    letter-spacing: -.02em;

    user-select: none;

    pointer-events: none;

}

@media (max-width:768px) {

    .rm-node-year {

        font-size: 12px;
        font-weight: 600;

    }

}