/* =====================================================
   KELPAK MODERN TIMELINE V2
===================================================== */

:root{

    --kelpak:#768643;
    --dark:#29302a;
    --light:#ffffff;
    --grey:#f6f6f6;

    --radius:22px;

    --shadow:
        0 12px 40px rgba(0,0,0,.08);

    --transition:.45s cubic-bezier(.22,1,.36,1);

}


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

.timeline{

    position:relative;
    max-width:1400px;
    margin:auto;
    padding:120px 0;
    box-sizing:border-box;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;
    top:0;
    bottom:0;

    width:4px;

    transform:translateX(-50%);

    background:
        linear-gradient(
        to bottom,
        transparent,
        var(--kelpak) 10%,
        var(--kelpak) 90%,
        transparent);

}


/*=====================================================
ITEM
=====================================================*/

.timeline-item{

    position:relative;

    width:50%;


    box-sizing:border-box;

    padding:0 80px 120px;

}



@media (min-width:901px){

.timeline-item:nth-child(odd){

    margin-left:0;
    text-align:right;

}

.timeline-item:nth-child(even){

    margin-left:50%;
    text-align:left;

}

}


/*=====================================================
CONNECTOR
=====================================================*/

.timeline-item::before{

    content:"";

    position:absolute;


    top:57px;

    width:60px;
    height:2px;

    background:var(--kelpak);

    transform:scaleX(0);

}

.timeline-item:nth-child(odd)::before{

    right:10px;
    transform-origin:right;

}

.timeline-item:nth-child(even)::before{

    left:10px;
    transform-origin:left;

}


/*=====================================================
NODE
=====================================================*/

.timeline-item::after{

    content:"";

    position:absolute;

    top:48px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:#fff;

    border:4px solid var(--kelpak);

    box-shadow:0 0 0 8px rgba(118,134,67,.08);

}

.timeline-item:nth-child(odd)::after{

    /* now that padding is inside the 50% box, the item's right edge
       IS the spine, so -10px centres the 20px node exactly on it */
    right:-10px;

}

.timeline-item:nth-child(even)::after{

    left:-10px;

}


/*=====================================================
YEAR
=====================================================*/

.timeline-year{

    font-size:80px;

    font-weight:800;

    line-height:1.5;

    color:#a5b27c;

    opacity:.10;

    letter-spacing:-6px;
    text-transform:uppercase;

    margin-bottom:14px;

}


/*=====================================================
CARD
=====================================================*/

.timeline-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.timeline-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 22px 60px rgba(0,0,0,.12);

}


/*=====================================================
IMAGE
=====================================================*/

.timeline-card img{

    width:100%;
    display:block;

    height:280px;

    object-fit:cover;

    transition:1.1s;

}

.timeline-card:hover img{

    transform:scale(1.05);

}


/*=====================================================
CONTENT
=====================================================*/

.timeline-content{

    padding:35px;

}

.timeline-content h3{

font-size:22px;

    margin:0 0 18px;

    font-weight:700;

    color:#68773a;

}

.timeline-content p{

    margin:0;

    line-height:1.8;

}


/*=====================================================
ANIMATIONS — triggered by adding the ".in-view" class
   to each .timeline-item via a small IntersectionObserver
   script (timeline.js). Works in every browser.
=====================================================*/


/* CONNECTOR — grows outward from the spine */

.timeline-item::before{

    transition:transform .5s ease .15s;

}

.timeline-item.in-view::before{

    transform:scaleX(1);

}


/* NODE — pops in */

.timeline-item::after{

    opacity:0;
    transform:scale(0);

    transition:
        opacity .4s cubic-bezier(.22,1,.36,1) .1s,
        transform .5s cubic-bezier(.34,1.56,.64,1) .1s;

}

.timeline-item.in-view::after{

    opacity:1;
    transform:scale(1);

}


/* YEAR — slides in from the outer edge */

.timeline-item:nth-child(odd) .timeline-year{

    opacity:0;
    transform:translateX(40px);

    transition:
        opacity .5s ease .2s,
        transform .5s ease .2s;

}

.timeline-item:nth-child(even) .timeline-year{

    opacity:0;
    transform:translateX(-40px);

    transition:
        opacity .5s ease .2s,
        transform .5s ease .2s;

}

.timeline-item.in-view .timeline-year{

    opacity:1;
    transform:translateX(0);

}


/* CARD — slides in from the spine side */

.timeline-item:nth-child(odd) .timeline-card{

    opacity:0;
    transform:translateX(70px) translateY(10px);

    transition:
        opacity .6s cubic-bezier(.22,1,.36,1) .25s,
        transform .6s cubic-bezier(.22,1,.36,1) .25s;

}

.timeline-item:nth-child(even) .timeline-card{

    opacity:0;
    transform:translateX(-70px) translateY(10px);

    transition:
        opacity .6s cubic-bezier(.22,1,.36,1) .25s,
        transform .6s cubic-bezier(.22,1,.36,1) .25s;

}

.timeline-item.in-view .timeline-card{

    opacity:1;
    transform:none;

}


/* IMAGE — wipes into view */

.timeline-card img{

    clip-path:inset(0 0 100% 0);

    transition:clip-path .6s ease .35s;

}

.timeline-item.in-view .timeline-card img{

    clip-path:inset(0);

}


@media (prefers-reduced-motion:reduce){

.timeline-item::after,
.timeline-item::before,
.timeline-year,
.timeline-card,
.timeline-card img{

    transition:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:inset(0) !important;

}

}


@media (prefers-reduced-motion:reduce){

.timeline-item::after,
.timeline-item::before,
.timeline-year,
.timeline-card,
.timeline-card img{

    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:inset(0) !important;

}

}


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

@media (max-width:900px){

.timeline::before{

left:35px;

}

.timeline-item{

width:100%;

margin:0 !important;


padding:0 24px 80px 90px;

text-align:left;

}

.timeline-item::after{

left:25px !important;
right:auto;

}

.timeline-item::before{

left:45px !important;
right:auto;

width:30px;

transform-origin:left;

}

}