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

.timelineNav{
    position:absolute;
    right:42px;
    top:50%;
    transform:translateY(-50%);
    z-index: var(--z-ui);
    height:520px;
    max-height:65vh;
    width:120px;
    display:flex;
    justify-content:center;
    align-items:center;
    /*animation: timelineFloat 8s ease-in-out infinite;*/
}


/* =========================================================
   LINE
========================================================= */

.timelineLine{
    position:absolute;
    top:0;
    bottom:0;
    right:26px;
    width:2px;
    pointer-events:none;
    background:
        rgba(255,255,255,.08);
    overflow:hidden;
}


/* =========================================================
   PROGRESS
========================================================= */

.timelineProgress{
    position:absolute;
    left:0;
    top:10px;
    width:100%;
    height:25%;
    pointer-events:none;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.95),
            rgba(255,255,255,.15)
        );
    box-shadow:
        0 0 18px rgba(255,255,255,.35),
        0 0 40px rgba(255,255,255,.15);
    transition:
        transform 1.2s cubic-bezier(.19,1,.22,1);
    will-change:transform;
}

.timelineYears{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
}

.timelineYear{
    position:relative;
    padding-right:42px;
    cursor:pointer;
    opacity:.22;
    transform:
        translateX(0)
        scale(.9);
    transition:
        opacity .6s ease,
        transform .8s cubic-bezier(.19,1,.22,1);
}

.timelineYear::after{
    content:"";
    position:absolute;
    right:9px;
    top:50%;
    width:15px;
    height:15px;
    border-radius:999px;
    background:
        rgba(255,255,255,0);
    transform:
        translateY(-50%);
}

.timelineYear span{
    color:#fff;
    font-size:25px;
    font-weight:300;
    letter-spacing:.08em;
}

.timelineYear.active{
    opacity:1;
    transform:
        translateX(-8px)
        scale(1.08);
}

.timelineYear.active::after{
    background:#fff;
    box-shadow:
        0 0 16px rgba(255,255,255,.65),
        0 0 34px rgba(255,255,255,.35);
}


/* =========================================================
   FLOAT
========================================================= */

@keyframes timelineFloat{
    0%{
        transform:
            translateY(-50%)
            translateX(0px);
    }
    50%{
        transform:
            translateY(-50%)
            translateX(-2px);
    }
    100%{
        transform:
            translateY(-50%)
            translateX(0px);
    }
}

/* =========================================================
   TOSCANA, Popart
========================================================= */

.postid-1918,.postid-1935 {
    .timelineYear {padding-right: 20px;}
    .timelineYear span{display:inline-block;min-width:55px;}
    .timelineYear::after {right: -8px;}
}