/*******************************************************************************
    (2D) Projects
*******************************************************************************/
#projects {
    --accent-color: #7c9033;
    --dim-accent-color: #daff5454;
    --button-top: 15vh;
    justify-content: center;
    background: linear-gradient(to bottom, #8cb3f0, #ffffff 50%,  #8cb3f0);
}

/* Header ******************************************************************* */
.projects-header {
    top: 55vh;
    padding-bottom: 1vh;
    z-index: 5;
    color: white;
}


/* Down Arrow *************************************************************** */
#projects-arrow {
    background: var(--accent-color);
    box-shadow: 0 1px 6px var(--dim-black) inset;
    z-index: 6;
    transition: 0.5s ease, opacity 1s ease;
}
@media(hover: hover) and (pointer: fine) {
    #projects-arrow:hover { box-shadow: 0 1px 10px var(--dim-black) inset; }
}


/* Mask Button ************************************************************** */
#projects-button {
    --mask-height: min(40dvh,90vw);
    --mask-top: 10dvh;

    --clip-path:  url(#projects-mask);
    --clip-path-fill:  url(#projects-mask-fill);
    --background-image: url(../images/projects/portfolio-background.jpg);

    --tint: var(--dim-accent-color);
    --zoomed-tint: #ffffff11;
}
#projects-line {
    position: absolute;
    width: 1px;
    height: var(--mask-top);
    top: calc(-1*var(--mask-top));
    background: #ffffff66;
}



/* Background *************************************************************** */
#clouds {
    position: absolute;
    width: 100vw;
}

.drone {
    --animation-duration: 40s;
    position: absolute;
    height: 7dvh;
    top: 30dvh;
    left: 5000px;
    z-index: 4;

    transition: opacity 0.5s ease;

    animation: move_across var(--animation-duration) linear 3s infinite;
    animation-play-state: var(--animation-play-state);
}
#reflected-drone { top: 65dvh; }

.UAV {
    --animation-duration: 60s;
    position: absolute;
    height: 14dvh;
    bottom: 10dvh;
    left: 5000px;
    z-index: 4;

    transition: opacity 0.5s ease;

    animation: move_across var(--animation-duration) linear 13s infinite;
    animation-play-state: var(--animation-play-state);
}


/*******************************************************************************
    Projects Subsection
*******************************************************************************/
#projects-subsection {
    display: flex;
    justify-content: center;
    align-items: center;

    transition: opacity 0.5s ease-out;

    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}
#projects-subsection::-webkit-scrollbar { display: none; }



/* Icons */
#projects-close-button {
    position: absolute;
    aspect-ratio: 1;
    height: 6vh;
    right: 0;
    top: 0;
    margin: calc(var(--margin) - 1.25vh);

    border-radius: 50%;
    background: var(--accent-color);
    filter: drop-shadow(1px 3px 5px var(--extra-dim-black));

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;

    cursor: pointer;
    transition: transform 0.5s ease-out;
}
@media(hover: hover) and (pointer: fine) {
    #projects-close-button:hover {
        transform: scale(1.1);
    }
}



.project-message {
    color: white;
}

#portfolio-download {
    position: relative;
    transform: scale(1.5);
    top: 10vh;
    color: white;
    text-align: center;
}
#portfolio-text {
    opacity: 0;
    position: absolute;
    padding: 0.75vh 0;
    width: 20vw;

    font-size: 2vh;
    color: var(--dim-white);

    transform: translate(-45%,-25%);
    transition: 0.5s ease;
    text-align: center;
}
#file-icon:hover + #portfolio-text {
    opacity: 1;
    transform: translate(-45%,0);
}


#file-icon {
    --color: var(--dim-white);
    height: 4vh;

    cursor: pointer;

    transition: 0.5s ease-out;
}
#file-icon > path {
    fill: var(--color);
}
@media(hover: hover) and (pointer: fine) {
    #file-icon:hover { --color: white; transform: scale(1.1); }
}