@font-face {
    font-family: "Avenir Next Pro Bold";
    src: url(./assets/fonts/AvenirNextLTPro-Bold.woff) format("woff");
}

@font-face {
    font-family: "Avenir Next Pro Regular";
    src: url(./assets/fonts/AvenirNextLTPro-Regular.woff) format("woff");
}

html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

html {
    scroll-behavior: smooth;
    container-type: scroll-state;
    container-name: scroller;
}

body {
    background-color: black;
    min-height: 100dvh;
    color: white;
    font-family: "Avenir Next Pro Regular", Arial, sans-serif;
}

.full-height-pages{
    .logo {
        position: fixed;
        top: 20px;
        left: calc(50% - 100px);
        width: 200px;
        height: 80px;
        background-image: url('./assets/images/logo_clem.svg');
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 1000;
        /* animation: logo-appear 1s ease forwards; */
    }
    
    .backdrop-blur-for-logo {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 400px;
        backdrop-filter: blur(5px);
        z-index: 999;
        mask-image: linear-gradient(to bottom, white 100px, transparent 100%);
    }

    h1{
        font-family: "Avenir Next Pro Bold", Arial, sans-serif;
        font-size: 3rem;
        margin: 0;
        letter-spacing: 0.1rem;
        text-align: center;
        transform: translateY(35px);
        animation: title-appear 1s ease forwards;
    }

    h2{
        letter-spacing: 0.1rem;
    }

    & > section {
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &.its-me{
            position: relative;

            &>p{
                font-size: 1.5rem;
                margin: 10px 0 0 0;
                opacity: 0;
                animation: fade-in 2s ease forwards .4s;
            }

            &::after {
                content: "";
                position: fixed;
                bottom: 20px;
                left: 50%;
                width: 10px;
                height: 10px;
                border-left: 2px solid white;
                border-bottom: 2px solid white;
                transform: translateX(-50%) rotate(-45deg);
                animation: bounce 2s infinite;
                transition: opacity 0.5s ease;
            }
        }
    }
}

@container scroller scroll-state(scrollable: top) {
  .full-height-pages section.its-me::after {
    opacity: 0;
  } 
}

@media screen and (max-width: 768px) {
    .full-height-pages {
        h1 {
            font-size: 2rem;
        }

        h2{
            font-size: 1.2rem;
        }

        p{
            font-size: 1.2rem !important;
        }

        .logo {
            width: 150px;
            height: 60px;
            left: calc(50% - 75px);
        }

        .backdrop-blur-for-logo {
            height: 300px;
            mask-image: linear-gradient(to bottom, white 80px, transparent 100%);
        }
    }
    
}

@keyframes title-appear {
    from {
        transform: translateY(50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0) rotate(-45deg);
    }
    40% {
        transform: translateX(-50%) translateY(-20px) rotate(-45deg);
    }
    60% {
        transform: translateX(-50%) translateY(-10px) rotate(-45deg);
    }
}

@keyframes logo-appear {
    from {
        opacity: 0;
        top: calc(50% + 200px);
        height: 400px;
        width: 800px;
        left: calc(50% - 400px);
    }
    30% {
        opacity: 0.5;
        top: calc(50% + 100px);
        left: calc(50% - 300px);
        height: 300px;
        width: 600px;
    }
    60% {
        opacity: 0.8;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
        height: 200px;
        width: 400px;
    }
    to {
        opacity: 1;
        top: 20px;
        left: calc(50% - 100px);
        width: 200px;
        height: 80px;
    }
}