body {
    overflow-x:hidden;
}



.hero {
    height: 100dvh;
    background: var(--color-dark-sea);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    color:var(--color-creme);
    position:relative;
    text-align:center;

    & .blinds-text-wrapper {
        justify-content: center;
    }
    & h1 {
        color:var(--color-creme);
    }
    & * {
        position:relative;
        z-index:1;
    }
    & h4 {
        color:white;
    }
    & .button {
        margin-top:28px;
    }

    & .text-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-top: 100px;
        justify-content: space-around;
        padding-bottom: 100px;
    }

    & .background {
        position:absolute;
        top:0;
        left:0;
        z-index:0;
        width:100%;
        height:100%;

        &:after {
            content: ' ';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 120px;
            background: linear-gradient(to bottom, #0000007a, transparent);
            width: 100%;
            z-index: 1;
        }
        &:before {
            content: ' ';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 50%;
            background: linear-gradient(to top, #0000007a, transparent);
            width: 100%;
            z-index: 2;
        }

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


.intro-text {
    padding:120px 0;
    padding-bottom:20px;
    transform-origin:top;
    background:var(--color-creme);
    border-top-right-radius:40px;
    border-top-left-radius:40px;
    margin-top:-40px;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position:relative;
    z-index:2;

    & .blinds-text-wrapper {
        justify-content: center;
    }
    & .button {
        margin-top:24px;
    }
}

.side-scroll {
    position:relative;

    & .draw-me {
        position:absolute;
        pointer-events:none;
        left:10vw;
        width:calc(100% - 10vw);
        height:90%;
        z-index:2;
        margin:auto;
        top:0;
        bottom:0;
        & svg {
            width:100%;
            height:100%;
        }
    }

    & .spacer {
        height:700vh;
        position:relative;
    }
    & .sections {
        height:100dvh;
        width:100vw;
        position:sticky;
        overflow:hidden;

        z-index:5;
        white-space:nowrap;
        top:0;
    }
    & section {
        position:relative;
        z-index:2;
    }

    & .final {
        height:100%;
        width:100%;
        position:sticky;
        top:0;
        left:0;
        z-index:2;
        display:flex;
        align-items: center;
        justify-content: center;

        & .blinds-text-wrapper {
            justify-content: center;
        }

        & h2 {
            position:relative;
            z-index:2;
            padding:0 10vw;
            color:var(--color-creme);
            text-align: center;
        }

        & img {
            height:100%;
            width:100%;
            top:0;
            left:0;
            position:absolute;
            object-fit:cover;
        }
    }

    & .inner {
        display:inline-flex;
        width:auto;
        will-change: transform;
        background-color:var(--color-creme);
    }

    & section {
        display: inline-flex;
        height:100dvh;
        align-items:center;
        justify-content: center;
        padding:0 6vw;
        box-sizing:border-box;
        padding-right:20vw;
        margin-left:-2px;

        & h2 {
            font-size:3vw;
            margin-bottom:16px;
            margin-top:50px;
        }
    }
    & section:first-of-type {

        & .grid div:first-child {
            display: flex;
            align-items: flex-end;
            & img {
                margin-bottom:30%;
                
            }
        }
        & .grid div:last-child {
            display: flex;
            justify-content: flex-end;
            flex-direction:column;
            & img {
                width:80%;
            }
        }
    }
    & section:nth-of-type(2){
        & .grid div:last-child {
            & img {
                margin-top:20%;
            }
        }
    }
    & section:last-child {
        border-top-right-radius:40px;
        border-bottom-right-radius:40px;
        padding-right:30vw;
        & .grid div:last-child {
            & video {
                margin-top:20%;
            }
        }
    }

    & p {
        white-space:wrap;
    }
}


.waitlist {
    min-height:50vh;
    padding:120px 0;
    z-index: 2;
    background:var(--color-creme);
    
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:40px;

    & h2 {
        font-size:38px;
        margin-bottom:16px;
    }
    & .grid div:first-child {
        display:flex;
        align-items: flex-end;
        & img {
            margin-bottom:20%;
        }
    }
    & .grid div:last-child {
        display:flex;
        flex-direction:column;
        align-items: flex-start;
        justify-content: center;
        & .button {
            margin-top:16px;
        }
    }
    
}
.waitlist:before {
    position:absolute;
    top:-40px;
    margin-top:-40px;
    left:0;
    width: 100%;
    border-top-right-radius:40px;
    border-top-left-radius:40px;
    z-index:0;
    height:80px;
    background:var(--color-creme);
    content:' ';
}





@media screen and (max-width:800px) {
    .waitlist {
        flex-wrap:wrap;   

        & .grid {
            grid-template-columns: 100%;
        } 
    }

    .side-scroll section .grid {
        grid-template-columns: 70vw 70vw;
    }

    .side-scroll {
        & section {
            & h2 {
                font-size:8vw;
            }
        }
        & section {
            padding-right:30vw;
            & .grid > div:first-child {
                display:none!important /*I'm so sorry */
            }
        }
        & section:last-child {
            padding-right:80vw;
        }
        & .draw-me {
            height:80%;
        }
    }

    .waitlist {
        padding-top:0;
        & .grid > div:first-child {
            display:none;
        }
        & .grid {
            row-gap:4vw;
        }
    }

    .bouncy {
        transform:none;
        opacity:1;
    }
    .visible .bouncy {
        animation:none;
    }
   
}