html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    overflow-x: hidden;
}

/*
====================================================
                    HERO
==================================================== */

.container {
    
    & .hero {
        position: relative;
        min-height: 100svh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 1.2s ease;
        scroll-snap-align: start;
        &.blur {
            filter: blur(10px);
        }


        & .hero_bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 119%;
            object-fit: cover;
            object-position: 39%;
            z-index: 0;
            transform: scale(1.2);

        }

        & .hero_title {
            display: flex;
            flex-direction: column;
            position: absolute;
            height: 65%;
            width: 70%;
            z-index: 2;
            text-align: left;
            color: white;
            line-height: 1.1;
            
            & span {
                font-size: var(--fs-hero-span);
                font-family: var(--fontSecondary);
                font-weight: 300;
            }

            & h1 {
                font-size: var(--fs-hero);
                font-weight: 700;
                letter-spacing: 1px;
                font-family: var(--fontPrimary);
                
            }
            & .btn_hero_explorer {
                display: flex;
                justify-content: center;
                text-align: center;
                width: clamp(120px, 50%, 150px);
                background-color: transparent;
                color: var(--lightColor);

                font-family: var(--fontSecondary);
                font-size: var(--fs-hero-button);
                font-weight: lighter;
                border: 1px solid var(--lightColor);
                /* A DECIDIR border-radius: 25px; */
                padding: 0.3rem 0.5rem;
                margin-top: 1rem;
                cursor: pointer;
                
                
                
                &:hover {
                    background-color: var(--outlinerColor);
                    border: none;
                    box-shadow: 0.5px 0.5px 15px var(--outlinerColor);
                }
            }
        }
    }
/*
====================================================
                    HERO Responsive
==================================================== */

/* ===================================================== 
                            SESSAO STORYTELLING 
    ===================================================== */

    .storytelling {
        scroll-snap-align: start;
        min-height: 100vh;
        width: 100%;
        position: relative;
        
        display: flex;
        flex-direction: column;
        justify-content: end;
        text-align: center;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            inset: 0;

            background-image: url(../assets/img/paulofischerFACE-9298.jpg);
            background-size: cover;
            background-position: 36%;
            transform: scale(1.1);
            z-index: 0;
        }


        .overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.25);
        }

        .story_content {
            position: relative;
            z-index: 2;
            padding: 1.5rem;
            color: var(--lightColor);

            h1 {
                font-size: clamp(5rem, 6vw, 8rem);

            }
            span {
                transform: rotate(90deg);
                position: absolute;
                left: -130px;
                top: 0;
                display: inline-block;
            }

            p {
                margin-top: 1rem;
                opacity: 0.8;
                font-size: clamp(2rem, 6vw, 5rem);
                
            }
        }
    }



/*
====================================================
                    Section HUB
==================================================== */

    .hub {
        display: flex;
        flex-direction: column;
        min-height: 50dvh;
        
        & .hub_item {
            font-family: var(--fontSecondary);
            letter-spacing: 0.3rem;
            overflow: hidden;
            position: relative;
            min-height: 0;
            height: 50dvh;
            width: 100%;
            scroll-snap-align: start;
            
            & .hub_img_photo {
                height: 100%;
                width: 100%;
                
                position: absolute;
                inset: 0;
                background-image: url(../assets/img/hub_photo3.jpg);
                background-size: cover;
                transform-origin: top;
                background-position: left 31%;
                transform: scale(1.6);
                transition: transform 0.3s ease;
                
            }
            & .hub_img_dev {
            height: 100%;
            width: 100%;

            position: absolute;
            inset: 0;
            transform: scale(1.35);
            object-fit: cover;
            object-position: 102% 75%;
            transition: transform 0.3s ease;
            opacity: 0.5;

            }

            & .hub_content {
                width: 90%;
                height: 90%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: absolute;
                z-index: 2;

                .hub_title {
                    font-size: var(--fs-hub-title);
                }
            
                & .hub_subtitle {
                    font-weight: 500;
                    font-size: var(--fs-hub-subtitle);
                    margin-bottom: 0.5rem;
    
                }
                & .btn_hub_explorer {
                    display: flex;
                    justify-content: center;
                    padding: 0.5rem;
                    margin-top: 1.5rem;
                    margin-left: 1.1rem;
                    background-color: transparent;
                    width: 51%;
                    font-family: var(--fontSecondary);
                    font-size: clamp(1rem, 1.7vw, 5rem)/* 1.4rem */;
                    font-weight: lighter;
                    
                    &.photo {
                        color: black;
                        font-weight: 500;
                        border: 1px solid black;
                    }
                    &.dev {
                        color: var(--lightColor);
                        font-weight: 500;
                        border: 1px solid var(--lightColor);
                    }
                    &:hover {
                        background-color: var(--outlinerColor);
                        color: var(--lightColor);
                        border: none;
                        box-shadow: 0.5px 0.5px 15px var(--outlinerColor);

                    }
                }
            }
            &.photo { /* hub_item photo */
                color: black;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                
            }
            &.dev {/* hub_item dev */
                color: white;
                background-color: black;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;   
            }
        }
    }


/*
====================================================
                    RESPONSIVE HUB
==================================================== */

    @media (min-width: 678px){
        .hub_item.photo, .hub_item.dev {
            aspect-ratio: 16/9;
            /* height: 100%; */
            height: 100vh;
            min-height: 0;
        }
        
        .hub_img_photo, .hub_img_dev {
            aspect-ratio: auto;
            background-size: cover;
            background-position: bottom 10%;
        }
        .btn_hub_explorer {
            max-width: 300px;
        }
    }

/*  ==================================================== */
/*
====================================================
                    Sessão ABOUT
==================================================== */
    .about {
        scroll-snap-align: start;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
        background-color: #727272;
        .about_img {
            position: relative;
            height: 70%;
            display: flex;
            
            img {
                position: absolute;
                height: 100%;
                inset: 0;
                object-fit: cover;
                object-position: 56% 18%;
                transform-origin: 20% 150%;
                width: 100%;
                transform: scale(1.2);
                filter: contrast(1.7);
                opacity: 0.6;
                -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
                mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
                
            }

            .about_msg {
                position: absolute;
                color: var(--lightColor);
                font-family: var(--fontSecondary);
                font-size: var(--fs-about-span);
                font-weight: 300;
                padding: 0.5rem 2rem;
                line-height: 0.9;
                text-transform: capitalize;

            }
            span { /* texto maior */
                font-size:var(--fs-about);
                font-family: var(--fontPrimary);
                font-weight: 700;

            }
        }
        .about_content {
            position: absolute;
            top: 55%;
            height: 40%;
            width: 100%;

            .about_description {
                height: 100%;
                font-family: var(--fontSecondary);
                color: var(--lightColor);
                padding: 0 3rem;
                font-size: var(--fs-text);
                font-weight: lighter;
                line-height: 1.5;
                text-shadow: 1px 1px 10px black;
                text-align: center;
            }
        }
    }

/*
====================================================
                    RESPONSIVE ABOUT
==================================================== */
    @media (min-width: 678px) {
        .about_img {
            transform-origin: 36% 156%;
            transform: scale(1);
            transition: transform-origin 1s ease;
        }
        
        .about_description {
            max-height: 100%;
            max-width: 80%;
            margin: 0 auto;
            text-align: center;
            display: flex;
            justify-content: center;
            
        }
        
    }


/*
====================================================
                    
==================================================== */


}