/* CONFIGURATION GENERALE */
@font-face {
    font-family: "Funnel Display";
    src: url(/fonts/FunnelDisplay-VariableFont_wght.ttf);
}

:root {
    --blanc: #ededed;
    --noir: #141414;
    --orange: #ff4000;
    --vert: #93FF00;
    --gris: #848484;
}

::selection {
    color: var(--blanc);
    background-color: var(--orange);
}

/* PAGE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Funnel Display";
}

html {
    overflow: hidden;
}

body {
    background-color: var(--noir);
    color: var(--blanc);
    overflow: hidden;

    /* Empecher le scroll quand le panel contact est ouvert*/
    &.no-scroll {
        overflow: hidden;
    }
}

/* ELEMENTS */
h1 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    margin: 8px 0;
    color: var(--blanc);
}

h2 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    margin: 6px 0;
    color: var(--blanc);
}

h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    margin: 6px 0;
    color: var(--blanc);
}

p {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.25;
    color: var(--blanc);
}

a {
    text-decoration: none;
    color: var(--blanc);
    cursor: pointer;
}

button {
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--blanc);
    cursor: pointer;
}

/* ANIMATIONS */
/* online icon*/
@keyframes actif {
    from {
        filter: drop-shadow(0px 0px 0px #93FF0050);
        opacity: 0.6;
    }

    to {
        filter: drop-shadow(0px 0px 4px #93FF00);
        opacity: 1;
    }
}
/* mode focus */
.project-active main > h1,
.project-active main > button.sound,
.project-active main > div.icon-available,
.project-active .title {
    filter: blur(14px);
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
    transition: all 1s ease;
}
main > h1,
main > button.sound,
main > div.icon-available,
.title {
    transition: all 1s ease;
}
.project-active > div.video-background::after {
    background: rgba(0, 0, 0, 0.3);
    transition: all 1s ease;
}
div.video-background::after {
    transition: all 1s ease;
}

.project-active main > div.projects {
    transform: translateY(50px);
}

main > div.projects {
    transition: transform 1s ease;
}

/* VIDEO BACKGROUND */
.video-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;

    & video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & #bg-video {
        transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    }
}

/* HEADER */
header {
    display: block;
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    mix-blend-mode: difference;
    z-index: 999;
    user-select: none;

    & div.header-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;

        & .header-section {
            font-size: 12px;

            & a {
                color: var(--orange);
                font-size: 12px;
                line-height: 1;

                & img {
                width: 60px;
                }
            }
        }
    }
}

/* MAIN */
main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1.5fr 1.5fr auto auto;
    grid-template-areas:
    "description ."
    "button button"
    "projects projects"
    "available available"
    "title title" ;
    align-items: baseline;
    gap: 0 15px;
    padding: 50px 10px 0px 10px;
    height: calc(var(--vh) * 100);

    & h1 {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 400;
        color: var(--orange);
        max-width: 190px;
        grid-area: description;
        mix-blend-mode: difference;
    }

    & button.sound {
        position: relative;
        overflow: hidden;
        height: 18px;
        width: 95px;
        display: flex;
        justify-content: center;
        align-items: start;
        justify-self: center;
        text-align: center;
        font-size: 14px;
        grid-area: button;
        mix-blend-mode: difference;
        user-select: none;

        &::before {
            content: "[";
            font-size: 14px;
            line-height: 1.1;
        }

        &::after {
            content: "]";
            font-size: 14px;
            line-height: 1.1;
        }

        & .sound-wrapper {
            position: relative;
            height: 18px;
            width: 100%;

            & .sound-text {
                position: absolute;
                left: 0;
                width: 100%;
                text-align: center;
                transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
            }

            /* ETAT INITIAL */
            & .sound-off {
                transform: translateY(0%);
            }

            & .sound-on {
                transform: translateY(100%);
            }

            /* QUAND ACTIVÉ */
            & .sound-on.active {
                transform: translateY(0%);
            }

            & .sound-off.move-up {
                transform: translateY(-100%);
            }

            /* ANIMATION INVERSE */
            & .sound-on.move-down {
                transform: translateY(100%);
            }
        }
    }

    & div.projects {
        grid-area: projects;
        display: grid;
        gap: 20px;
        width: fit-content;
        justify-self: center;
        justify-content: center;
        align-self: center;
        user-select: none;

        & div.project {
            justify-content: center;
            mix-blend-mode: difference;

            & a {
                display: flex;
                align-items: center;
                width: fit-content;
                justify-self: center;

                & h2 {
                    font-size: 18px;
                    font-style: italic;
                    font-weight: 400;
                    margin: 0;
                    text-align: center;

                    & span {
                        font-size: 9px;
                        font-style: normal;
                        vertical-align: super;
                        margin-left: 7px;
                    }
                }
            }

            & a::before {
                content: "[";
                font-size: 18px;
                line-height: 1;
                margin-right: 5px;
                transition: all 0.3s ease-in-out;
            }

            & a::after {
                content: "]";
                font-size: 18px;
                line-height: 1;
                margin-left: 5px;
                transition: all 0.3s ease-in-out;
            }

            &.active-project .item-project::before {
                color: var(--orange);
                margin-right: 12px;
                transition: all 0.3s ease;
            }

            &.active-project .item-project::after {
                color: var(--orange);
                margin-left: 12px;
                transition: all 0.3s ease;
            }

            &.active-project a h2 {
                color: var(--orange);
                transition: all 0.3s ease;
            }
        }
    }

    & div.icon-available {
        display: flex;
        grid-area: available;
        justify-content: end;
        pointer-events: none;
        user-select: none;

        & img {
            width: 8px;
            object-fit: contain;
            animation: 1.2s ease-in-out 0s infinite alternate actif;
        }

        & p {
            font-size: 10px;
            margin-left: 3px;
            color: var(--vert);
            text-transform: uppercase;
            animation: 1.2s ease-in-out 0s infinite alternate actif;
        }
    }

    & div.title {
        grid-area: title;
        position: relative;
        left: 0px;
        bottom: -5px;
        width: 100%;
        align-self: end;
        mix-blend-mode: difference;
        pointer-events: none;
        user-select: none;

        & img {
            width: 100%;
            object-fit: contain;
        }
    }
}

/* CONTACT PANEL */
.contact-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 550px;
    height: calc(var(--vh) * 100);
    background-color: #14141410;
    backdrop-filter: blur(14px);
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    &.active {
        transform: translateX(0%);
    }

    & .contact-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto 0.5fr 1fr auto;
        grid-template-areas:
        "close close"
        "name name"
        ". skills"
        ". details"
        "awards awards";
        padding: 10px;
        height: 100%;

        & .close-btn {
            align-self: flex-end;
            font-size: 12px;
            color: var(--orange);
            text-align: right;
            grid-area: close;
        }

        & h2 {
            mix-blend-mode: difference;
            font-size: 42px;
            font-weight: 700;
            letter-spacing: -2pt;
            line-height: 0.8;
            margin: 0;
            text-align: center;
            grid-area: name;
            justify-self: center;
            align-self: center;
        }

        & p.description {
            line-height: 1;
            text-align: left;
            grid-area: skills;
            align-self: baseline;
            color: var(--gris);
        }

        & div.details {
            grid-area: details;

            & h3 {
                font-size: 12px;
                margin: 20px 0 5px 0;
                color: var(--gris);
            }

        }

        & div.awards {
            grid-area: awards;
            align-self: end;

            & h3 {
                font-size: 14px;
            }

            & p {
                font-size: 10px;
            }
        }
    }
}

/* VERSION ORDINATEUR */
@media screen and (min-width: 1000px){

    main {

        & button.sound {
            font-size: 14px;
            width: 100px;
            height: 20px;
            align-self: center;

            &::before {
                font-size: 14px;
            }

            &::after {
                font-size: 14px;
            }
        }

        & div.projects {

            & div.project {

                & a {

                    & h2 {
                        font-size: 26px;
                    }

                    &::before {
                        font-size: 26px;
                    }

                    &::after {
                        font-size: 26px;
                    }
                }
            }
        }

        & div.icon-available {

            & img {
                width: 12px;
            }

            & p {
                font-size: 13px;
                margin-left: 6px;
            }
        }
    }

}