/* ------------Main------------ */


main {
    opacity: 0;
    filter: blur(4px);
    transform-origin: top;
    transition: opacity 0.2s ease-in-out,
                filter 0.2s ease-in-out,
                scale 0.2s ease-in-out;
}

main.load {
    opacity: 1;
    filter: none;
    scale: 1;
}

main.hidden {
    opacity: 0;
    filter: blur(4px);
    scale: 0.98;
}

main.fixed {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
}


/* ------------Nav------------ */


/* ---Projects--- */

.project {
    border-top: 1px solid var(--color-element-08);
}

.project:active, 
.project.active {
    border-top: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.project-info {
    color: var(--color-text-60);
}

.project:active .project-info,
.project.active .project-info {
    color: var(--color-primary);
}

.project .chevron-right {
    position: absolute;
    right: 0;
    fill: var(--color-text);
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.2s ease-in-out,
                transform 0.2s ease-in-out;
}


/* ---Archive--- */

#archive {
    border-top: 1px solid var(--color-element-08);
    color: var(--color-text-60);
}

#archive .chevron-down {
    fill: var(--color-text-60);
    transition: transform 0.4s ease-in-out;
}

.chevron-down.rotate {
    transform: rotate(-180deg);
}


/* ---Archive Container--- */

.archive-container {
    height: 0px;
    opacity: 0;
    filter: blur(2px);
    overflow: hidden;
    transition: height 0.4s ease-in-out 0.2s,
                opacity 0.4s ease-in-out,
                filter 0.4s ease-in-out;
}

.archive-container.show {
    height: calc(66px * var(--archive-number));
    opacity: 1;
    filter: none;
    transition: height 0.4s ease-in-out,
                opacity 0.4s ease-in-out 0.2s,
                filter 0.4s ease-in-out 0.2s;
}


/* ------------Project Page------------ */


.project-page {
    position: fixed;
    height: 100%;
    opacity: 0;
    filter: blur(4px);
    scale: 0.98;
    visibility: hidden;
    transform-origin: top;
    transition: opacity 0.2s ease-in-out,
                filter 0.2s ease-in-out,
                scale 0.2s ease-in-out,
                visibility 0.2s ease-in-out;
}

.project-page.show {
    opacity: 1;
    filter: none;
    scale: none;
    visibility: visible;
}

.project-page.absolute {
    position: absolute;
    height: auto;
}


/* ------------Back Button------------ */

.back-button {
    right: 18px;
    top: 16px;
    opacity: 0;
    filter: blur(4px);
    scale: 0.98;
    visibility: hidden;
    transition: right 0.2s ease-in-out,
                width 0.2s ease-in-out 0.2s,
                opacity 0.2s ease-in-out,
                filter 0.2s ease-in-out,
                scale 0.2s ease-in-out,
                visibility 0.2s ease-in-out;
}

.project-page.show ~ .back-button {
    right: 16px;
    opacity: 1;
    filter: none;
    scale: none;
    visibility: visible;
    transition: right 0.2s ease-in-out,
                width 0.2s ease-in-out,
                opacity 0.2s ease-in-out,
                filter 0.2s ease-in-out,
                scale 0.2s ease-in-out,
                visibility 0.2s ease-in-out;
}

.back-button {
    width: 72px;
    background: var(--color-button);
    color: var(--color-text);
}

.back-button:hover,
.back-button:active {
    background: var(--color-primary);
    color: var(--color-background);
}

.back-button .chevron-left {
    left: 8px;
    opacity: 0;
    fill: var(--color-text);
    transition: left 0.2s ease-in-out,
                opacity 0.2s ease-in-out;
}


/* ------------Next Button------------ */

.next-button {
    background: var(--color-button);
    color: var(--color-text);
}

.next-button.load {
    color: var(--color-background);
    transition: color 0.4s ease-in-out 0.8s;
}

.next-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position 0.8s ease-in-out;
    z-index: -2;
}

.next-button.load::before {
    background-position: left bottom;
}

.next-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    border-radius: calc(var(--border-radius) - 1px);
    background: var(--color-background-light);
    z-index: -1;
    transform: translate(-50%, -50%);
}

.next-button.load::after {
    background: var(--color-primary);
    transition: background 0.4s ease-in-out 0.8s;
}


/* ------------Hover Device------------ */


@media (hover) {

    /* ---------Nav--------- */


    /* ---Projects--- */

    .project:hover {
        border-top: 1px solid var(--color-primary);
        color: var(--color-primary);
    }

    .project:hover .project-info {
        color: var(--color-primary);
    }

    .project .year {
        transition: opacity 0.2s ease-in-out 0.2s;
    }

    .project:hover .year,
    .project:active .year,
    .project.active .year {
        opacity: 0;
        transition: none;
    }

    .project:hover .chevron-right,
    .project:active .chevron-right,
    .project.active .chevron-right {
        fill: var(--color-primary);
        opacity: 1;
        transform: none;
    }

    .project::after {
        content: "View";
        position: absolute;
        right: 25px;
        opacity: 0;
        font-size: 0.75rem;
        line-height: 0.625rem;
        transition: right 0.2s ease-in-out,
                    opacity 0.2s ease-in-out;
    }

    .project:hover::after,
    .project:active::after {
        right: 20px;
        opacity: 1;
    }

    .project.active::after {
        right: 25px;
        opacity: 0;
        transition: right 0.2s ease-in-out 0.2s,
                    opacity 0.2s ease-in-out 0.2s;
    }


    /* ---Archive--- */

    #archive:hover, 
    #archive:active {
        border-top: 1px solid var(--color-primary);
        color: var(--color-primary);
    }

    #archive:hover .chevron-down, 
    #archive:active .chevron-down {
        fill: var(--color-primary);
    }


    /* ---------Back Button--------- */

    
    .project-page.show ~ .back-button:hover, 
    .project-page.show ~ .back-button:active {
        width: 84px;
    }

    .back-button:hover .chevron-left, 
    .back-button:active .chevron-left {
        left: 12px;
        opacity: 1;
        fill: var(--color-background);
    }


    /* ---------Next Button--------- */


    .next-button:hover,
    .next-button:hover::after,
    .next-button.load:hover,
    .next-button.load:hover::after {
        background: var(--color-primary);
        color: var(--color-background);
        transition: none;
    }

}


@media screen and (min-width: 442px) {

    /* ---------Nav--------- */


    .archive-container {
        margin-bottom: 22px;
    }


    /* ---------Back Button--------- */

    .back-button {
        top: 24px;
        right: 32px;
    }

    .project-page.show ~ .back-button {
        right: 24px;
    }

}


@media screen and (min-width: 982px) {

    /* ------------Main------------ */


    main.hidden, main.fixed {
        position: static;
        height: auto;
        width: 344px;
        opacity: 1;
        filter: none;
        scale: 1;
    }


    /* ---------Project Page--------- */


    .project-page, .project-page.absolute {
        position: relative;
        height: calc(100vh - 48px);
        filter: none;
        scale: 1;
    }

}