@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;600&family=Shadows+Into+Light&display=swap');
/**************/
/*** LAYOUT ***/
/**************/

body{
    font-family: 'Poppins';
    margin: 0; 
    overflow :hidden;
}

.content-container{
    background-image: linear-gradient( rgba(43, 10, 104, 0.5),  rgba(0, 0, 0, 0.8) ),  url('../img/bg/milky-way-bg.png');
    background-size: cover;
    height: 100vh;
    display: grid;
    align-items: center;
}
.content-container.green{
    background-image: linear-gradient( rgba(73, 210, 23, 0.5), rgba(43, 10, 104, 0.5),  rgba(0, 0, 0, 0.8) ),  url('../img/bg/milky-way-bg.png');
}
.svg-container{
    display: grid;
}
.centered-svg{
    max-width: 100vw;
    max-height: 82.5vh;
    overflow: visible;
    margin: 0 auto;
}
.title-container{
    display: grid;
    justify-content: center;
}
.title{
   display: inline-block;
    font-size: max(3.5vw, 3.5vh);
    text-align: center;
    text-transform: uppercase;
}
.title-button{
    display: inline-block;
    cursor: pointer;
    font-size: max(3.5vw, 3.5vh);
    align-self: middle;
    transform: scaleY(2);
    transition: 0.2s;
}
.title-button:active{
    transform: scaleY(1);
}
.button-prev{
    justify-self: right;
    padding-right: 1rem;
}
.button-next{
    justify-self: left;
    padding-left: 1rem;
}

/***********************/
/*  BASE SVG STYLING   */
/***********************/

    /* Network elements */
    .project-value-bg,
    .node-bg,
    .node-outline, 
    .year-node-group, 
    .ls-node-label,
    .year-node-label,
    .cluster-node-label,
    .orgType-node-label{
        pointer-events: none;
    }
    .ls-node-group, 
    .project-node, 
    .menu-item{
        cursor: pointer;
    }
    .bg-layer,
    .node-bg,
    .project-node{
        fill: #F0EAD6;
        stroke: none;
    }
    .ls-node{
        fill: #dc143c;
    }
    .project-node-outline, 
    .project-link,
    .cluster-outline,
    .year-node-group,
    .gridline{
        fill: none;
    }
    .gridline,
    .project-node-outline, 
    .project-link{
        stroke: #333333;
        stroke-linejoin: round;
        stroke-linecap: round;
    }
    .cluster-outline{
        stroke: #fff;
        stroke-width: 1px;
    }
    .gridline{
        stroke-width: 0.25px;
        stroke-opacity: 0.5;
    }
    .project-link.indirect{
        stroke-dasharray: 2px 4px;
    }
    .project-link.network{
        stroke-dasharray: 2px 4px;
        stroke-opacity: 0.2;
    }

    /*** Typography ***/
    .ls-node-label, 
    .cluster-node-label{
        font-family: 'Shadows Into Light';
        text-anchor: middle;
    }
    .ls-node-label{
        font-size: 40px;
        font-weight: 600;
        fill: #fff;
    }
    .year-node-label,
    .cluster-node-label,
    .orgType-node-label{
        fill:  #333333;
        text-anchor: middle;
        font-size: 16px;
        font-weight: 600;
    }
    .cluster-node-label{
        font-size: 30px;
        font-weight: 800;
        text-transform: uppercase;
        text-shadow: 3px 3px 5px rgba(46, 12, 96, 0.75), 
                -3px -3px 5px rgba(46, 12, 96, 0.75), 
                0px 3px 5px rgb(46, 12, 96, 75%);
    }
    .annotation,
    .menu-item, 
    .menu-header{
        font-size: 18px;
    }
    .menu-item{
        opacity: 0.7;
    }
    .menu-item.selected{
        font-weight: 600;
        opacity: 1
    }

    /* Organisation type Colour palettes */
    .public-sector{
        fill:       url(#rg-public-sector);
        background : #88FEDB;
    }
    .private-sector{
        fill:       url(#rg-private-sector);  
        background:  #FEB9E7;;
    }
    .non-government-organisation{
        fill: url(#rg-non-government-organisation);
        background: #90DAFF;
    }
    .non-government-organisation.pro-bono{
        fill: url(#rg-ngo-pro-bono);
    }
    .not-for-profit{
        fill: url(#rg-not-for-profit);
        background: #C2B5F4;
    }
    .education-and-research{
        fill: url(#rg-education-and-research);
        background: #C2EFAC;
    }
    .education-and-research.lab{
        fill: url(#rg-education-and-research-lab);
    }
    .community{
        fill: url(#rg-community);
        background: #FFF7A8;
    }


/***********************/
/* DARK MODE STYLING   */
/***********************/

.dark .title-container{
    color: #fff;
}
.dark .project-link:not(.root),
.dark .gridline, 
.dark .project-node-outline{
    stroke: #fff;   
}
.dark .year-node-label,
.dark .cluster-node-label,
.dark .orgType-node-label, 
.dark .project-value-bg, 
.dark .annotation,
.dark .menu-group{
    fill:  #fff;
}
.dark .cluster-outline{
    stroke-width: 0;
}
.dark .project-node{
    cursor: pointer;
}
.dark .project-node.highlight{
    filter: url(#softGlow);
}
.dark .project-node.no-mix-blend{
    mix-blend-mode: unset;
}
.dark .project-value-bg{
    opacity: 0.4;
    mix-blend-mode: soft-light;
}
.dark .ls-node{
    filter: url(#softGlow);
}
.project-node.mute{
    filter: grayscale(75%);
   -webkit-filter: grayscale(75%); 
   -moz-filter: grayscale(75%);
   -ms-filter: grayscale(75%);
   -o-filter: grayscale(75%);
}
/******************************************/
/*  PROJECT DETAILS MODEL STYLING OVERLAY */
/*****************************************/

    #project-details-container{
        position: absolute;
        top: 0;
        left: 0;
        height: calc(100vh - 4vh);
        width: calc(100vw - 4vw);
        padding: 2vw;
        overflow: hidden;
    }
    #project-details-container.hidden{
        display: none;
    }

    /* Portrait modal styling */
    @media screen and (orientation:portrait) {
        #project-details-container{
            grid-template-columns: 1.5fr 1fr;
        }
        .project-title{
            padding-top: 2vh;
            font-size: 5vh;
        }
        .project-subtitle{
            font-size: 2vh;
        }
        .project-close-button{
            font-size: 3vh;
        }
        .project-content-container{
            font-size: 1.55vh;
        }
        .project-images-container{
            transform: perspective(3000px) translateY(-2.5%) translateX(-40%) rotateX(65deg) rotateZ(45deg) scale(1);
        }
    }
    /* Landscape model styling*/
    @media screen and (orientation:landscape) {
        #project-details-container{
            grid-template-columns: 2fr 1fr;
        }
        .project-title{
            font-size: 7.5vh;
            margin-right: 10vw;
        }
        .project-subtitle{
            font-size: 3vh;
            margin-right: 20vw;
        }
        .project-close-button{
            font-size: 2.5vw;
        }
        .project-content-container{
            font-size: 1.75vh;
            width: 50vw;
        }
        .project-images-container{
            right: 0;
            transform: perspective(3000px) translateY(0%) translateX(30%) rotateX(45deg) rotateZ(40deg) scale(0.65);
        }
    }

.project-title,
.project-subtitle,
.project-close-button{
    color: rgba(0, 0, 0, 0.8);
    text-shadow: #fff 1px 1px 5px, #fff 1px 1px 5px, #fff 1px 1px 10px
}
.project-close-button{
    position: absolute;
    top: 3vw;
    right: 3vw;
    z-index: 10;    
    cursor: pointer;
    transition: 0.2s;
}
.project-close-button:hover{
    font-weight: 800;
}
.project-close-button:active{
    transform: scale(1.5);
}
a.project-external-link{
    color:rgba(46, 12, 96, 0.75);
}
.project-details-label,
.project-details-content{
    display: inline-block
}
.project-details-label.about{
    width: 100%;    
}
.project-details-label{
    font-weight: 600;
    width: 25%;
    vertical-align: top;
}
.project-details-content{
    width: 75%;
    font-weight: 400;
}

.project-title-container{
    grid-area: 1 / 1 / 2 / 3;
    display: grid;
    height: fit-content
}
    .project-title{
        margin-top: 1vw;
        font-weight: 600;
        line-height: 1;
        text-transform: uppercase;
        font-weight: 600;
    }
    .project-subtitle{
        padding: 0.5rem 0;
        line-height: 1.25;
        font-weight: 600;
    }
    .project-content-container{
        grid-area: 2 / 1 / 3 / 2;
        z-index: 10
    }
    .project-info-container{
        padding-top: 1rem;  
    }
    .project-description-container{
        padding-top: 1rem;  
    }
    .project-description-container P:first-of-type{
        margin-block-start: 0.25rem;
    } 

.project-images-container{
    z-index: 0;
    padding: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    transform-style: preserve-3d; 
    transform-origin: bottom left;
}
    .grid{
        list-style: none;
    }
    .project-img-container.grid__item{
        padding: 10px;
    }
    a.grid__link {
        -webkit-transform-style: flat;
        transform-style: flat;
        transform: translate3d(0,0,0);
    }
    .project-img-container img{
        object-fit: cover;
        width: 100%;
        max-height: 100%;
        object-position: left top;
        border: 20px solid #fff;
        border-width: 40px 20px;
        box-shadow: -1px 1px 5px rgb(0 0 0 / 8%);
    }

/*********************************/
/*  SKETCH MODE FILTER CLASSES   */
/*******************************/

.sketch .bg-layer{
    filter: url(#roughPaper);
}
.sketch .project-link,
.sketch .project-node-outline{
    filter: url(#pencilTexture4);
}


/***********************/
/* TOOLTIP STYLING  */
/***********************/

    .tooltip{
        opacity: 0;
        position: absolute; 
        top: 0;
        left: 0;
        width: 25vw;
        padding: 0.75em 1em;    
        border-radius: 1rem;
        z-index: 10; 
        pointer-events: none;
        box-shadow:
            inset 0 0 10px #fff,      /* inner  */
            0 0 30px #fff,            /* outer  */
            5px 0 10px rgb(185, 153, 185),        /* outer left  */
            -5px 0 5px rgb(196, 134, 247);         /* outer right  */
    }
    .tooltip-header,
    .tooltip-client{
        text-align: center;
    }
    .tooltip-header,
    .tooltip-content{
        line-height: 1.25;
    }
    .tooltip-header{
        font-weight: 600;
    }
    .tooltip-client{
        font-style: italic;
        font-weight: 300;
        padding-top: 0.25em;
        padding-bottom: 0.75em;
    }

    /* Portrait tooltip styling */
    @media screen and (orientation:portrait) {
        .tooltip{
            width: 30vh;
        }
        .tooltip-header{
            font-size: 1.75vh; 
        }
        .tooltip-client{
            font-size: 1.5vh; 
        }
        .tooltip-content{
            font-size: 1.25vh; 
        }
    }

    /* Landscape tooltip styling*/
    @media screen and (orientation:landscape) {
        .tooltip{
            width: 25vw;
        }
        .tooltip-header{
            font-size: 1.75vh; 
        }
        .tooltip-client{
            font-size: 1.5vh; 
        }
        .tooltip-content{
            font-size: 1.25vh; 
        }

    }



/***********************/
/* CSS ANIMATIONS  */
/***********************/

.pulse{
    animation: pulse 1.5s infinite;
}


@keyframes pulseHeart {
	0%      { transform: scale(5);    }
	65%     { transform: scale(5.5);   }
	100%    { transform: scale(5);    }
}
@keyframes pulseLogoText {
	0%      { transform: scale(1);    }
	65%     { transform: scale(1.0625);   }
	100%    { transform: scale(1);    }
}
@keyframes pulseHeartSmall {
	0%      { transform: scale(3);    }
	65%     { transform: scale(3.25);   }
	100%    { transform: scale(3);    }
}
@keyframes pulseLogoTextSmall {
	0%      { transform: scale(0.65);    }
	65%     { transform: scale(0.725);   }
	100%    { transform: scale(0.65);    }
}

@keyframes pulse {
	0%      { transform: scale(1);    }
	70%     { transform: scale(1.25);   }
	100%    { transform: scale(1);    }
}