/* base page / reset */
@font-face {
    font-family: 'Comfortaa';
    src: url('/fonts/Comfortaa-Regular.woff2') format('woff2'),
        url('/fonts/Comfortaa-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AlexBrush';
    src: url('/fonts/AlexBrush-Regular.woff2') format('woff2'),
        url('/fonts/AlexBrush-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.comfortaa {
    font-family: "Comfortaa", serif;
    font-weight: 400;
}

.alexbrush {
    font-family: "AlexBrush", serif;
    font-weight: 400;
    font-size: 53px;
    color: white;
    background: linear-gradient(180deg, black 0%, black 70.5%, white 71%, white 71.5%, black 72%, black 100%);
    ;
}

.signature {
    color: white;
}

html {
    background-color: #000;
}

html,
body {
    scroll-behavior: smooth;
    color: #FFF;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont;
}

h1 {
    color: rgb(255, 255, 255);
    display: block;
    font-weight: 100;
    font-size: xx-large;
    text-align: center;
}

H3 {
    margin-top: 0;
    font-size: xx-large;
    padding: 0px;
    font-weight: 100;
}

.guide {
    margin-bottom: 80vh;
}

.highlight {
    background: linear-gradient(90deg, rgb(255, 212, 104) 0%, rgb(164, 77, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

h2 {
    color: rgb(200, 200, 200);
    display: block;
    font-weight: 100;
    font-size: medium;
    letter-spacing: 2px;
    margin-top: 100px;
    text-transform: uppercase;
}

a {

    border-radius: 100px;
}

a#get-app {
    backdrop-filter: blur(16px);
    font-family: inherit;
    display: inline-flex;
    height: 20px;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-top: 3px;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    color: #ddd;
    border-radius: 100px;
    font-size: 16px;
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    font-weight: 200;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    line-height: 1;
}

button {
    backdrop-filter: blur(16px);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    color: #ddd;
    border-radius: 100px;
    font-size: 16px;
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    font-weight: 200;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    line-height: 1;
}

header {
    background: linear-gradient(0deg, transparent 0%, black 100%);
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 96vw;
    z-index: 999;
    padding: 1vw 2vw 0 2vw;
}

header button {
    margin-left: auto;
    margin-right: 20px;
    margin-top: 8px;
}


#brand-name {
    height: 25px;
    margin: 10px 0 20px 15px;
}


button:hover {
    background: #ddd;
    color: #000;
}

.hidden {
    display: none !important;
}


#background-video {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.2);
}

/* options / nav chips */
.options {
    max-width: 150px;
    width: 20vw;
    font-size: 16px;
    font-weight: 400;
    color: rgb(180, 180, 180);
    padding: 8px 12px;
    border-radius: 30px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.options-container {
    display: flex;
    gap: 3vw;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* main screen */
.screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20vh;
}

.auto-height {
    height: auto;
}

#welcome img {
    position: relative;
    top: -16vh;
    height: 80vh;
}

#welcome video {
    position: relative;
    top: -15vh;
    height: 40vh;

}

#start-btn {
    position: relative;
    top: -30vh;
}



.round-btn {
    padding: 4px;
    width: 37px;
    height: 37px;
}

P {
    font-size: large;
    font-weight: 300;
    color: rgb(180, 180, 180);
    line-height: 1.4;
    padding-left: 20px;
    padding-right: 15px;
}


.round-btn img {
    width: 45px;
    height: 45px;
}

.marquee {
    width: 100%;
    overflow: hidden;
    padding: 5px 0;
}

.track {
    display: flex;
    width: max-content;
    animation: loop 60s linear infinite;
}

.track-reverse {
    display: flex;
    width: max-content;
    animation: reverse-loop 60s linear infinite;
}

.item {
    padding: 0;
    width: 240px;
    aspect-ratio: 3/2;
    flex: 0 0 auto;
    margin-right: 20px;
    background: #333;
    color: #fff;
    border-radius: 6px;
    overflow: hidden;

}

.item IMG {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    object-position: center;
}


.item P {
    background: linear-gradient(0deg, black 0%, transparent 100%);
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0px 0px 5px 15px;
    width: 100%;
    color: white;
    font-size: small;
}

@keyframes loop {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes reverse-loop {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.wrapper {
    height: 1000vh;
    /* page height so we can scroll */
}

.hero {
    height: 900vh;
    position: relative;
}

.hero-main {
    width: 98vw;
    position: absolute;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.4s ease;
    overflow: hidden;
    display: block;
    margin: auto;
}

.hero-main img {

    height: 120%;
    /* or container fixed height */
    object-fit: cover;
    /* THIS crops sides when aspect doesn't match */
    object-position: center;
}

.hero-bottom {
    max-width: 600px;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    opacity: 1;
    background: linear-gradient(0deg, transparent 0%, black 100%);

}

.hero-bottom img {
    width: 100%;
    margin-top: 5vh;
    /* or container fixed height */
    object-fit: cover;
    /* THIS crops sides when aspect doesn't match */
    object-position: center;
}

.hero-background {
    position: sticky;
    top: 0;
    display: block;
    margin: auto;
    width: 98vw;
    padding: 10vh 0 0 0;
    border-radius: 0vw;
    z-index: 4;
    background-color: #000;
}


.hero-description {
    padding-left: 5vw;
    position: sticky;
    top: 70vh;
    flex-direction: column;
    display: flex;
    height: 50vh;
    width: 100vw;
    margin-left: auto;
    margin-top: 200vh;
    z-index: 3;
    justify-content: right;
    background: linear-gradient(180deg, transparent 0%, black 20%);
}

.grid-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    width: 90vw;
    margin: auto;
    overflow-x: scroll;
    gap: 30px;
    /* fill the full height of the viewport */
}

.grid-container-reversed {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    width: 90vw;
    margin: auto;
    overflow-x: scroll;
    gap: 30px;
    /* fill the full height of the viewport */
}

.small-top-cell {
    width: 260px;
    height: 260px;
    scroll-snap-align: start;
    flex: 0 0 260px;
    background-color: lightblue;

    /* for visual representation */
}

.small-bottom-cell {
    width: 260px;
    height: 260px;
    flex: 0 0 260px;
    scroll-snap-align: start;
    background-color: lightgreen;
    /* two rows, top and bottom are half height */
}

.large-cell {
    width: 260px;
    height: 260px;
    scroll-snap-align: start;
    flex: 0 0 260px;
    background-color: red;
    /* for visual representation */
}


.large-cell img,
.small-top-cell img,
.small-bottom-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.two-col {
    display: flex;
    flex-direction: column;

}

.two-col p {
    flex: 1;
}

.circle-wrapper {
    height: 200vh;
    width: 98vw;
    margin-top: 10vh;
}

.circle-slider {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.circle-bg {
    width: 98vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background-image: url('images/lounge.webp');
    background-position: center;
    background-size: cover;
}

.circle {
    width: 98vw;
    height: 100vh;
    position: absolute;
    top: 0;
    margin: auto;
    inset: 0;
    background: black;
    --holeSize: 200px;
    mask:
        radial-gradient(circle var(--holeSize) at 50% 50%, transparent 0 60%, black 61%);
    mask-composite: exclude;
    -webkit-mask:
        radial-gradient(circle var(--holeSize) at 50% 50%, transparent 0 60%, black 61%);
    -webkit-mask-composite: xor;

    background-image: url('images/lounge.webp');
    filter: grayscale(100%) contrast(1.0) brightness(1);

    background-position: center;
    background-size: cover;
}

#dark-phone-frame {
    display: block;
    margin: 7vh auto auto auto;
    height: 50%;
    aspect-ratio: 1/2.2;
    background-color: black;
    border: 1vh solid white;
    border-radius: 4vh;
    box-shadow: 0 0 40px black;
}

#light-phone-frame {
    display: block;
    margin: 7vh auto auto auto;
    height: 50%;
    aspect-ratio: 1/2.2;
    background-color: white;
    border: 1vh solid black;
    border-radius: 4vh;
    box-shadow: 0 0 40px black;
}











/* desktop */
@media (min-width: 700px) {

    H1 {
        font-size: 64px;
    }

    P {
        line-height: 1.8;
        padding: 20px;
        line-height: 1.8;
        max-width: 70%;
    }

    H3 {
        font-size: 44px;

    }

    header button.round-btn {
        margin-right: 50px;
    }

    span.alexbrush {
        font-size: 100px;
    }

    .two-col {
        flex-direction: row;
    }

    .hero-description {
        width: 45vw;
        right: 20px;
        top: 5vh;
        padding-left: 0;
    }

    .hero-bottom {
        z-index: 1;
        opacity: 1;
    }

    .item {
        width: 280px;
        padding: 0;
    }



    .grid-container {
        width: 90vw;
        overflow: hidden;
        scroll-snap-type: none;
        scroll-behavior: none;
        scrollbar-width: none;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(1, 2fr);
        grid-template-areas:
            "small1 large"
            "small2 large";
        /* one row */
        margin: auto;
        gap: 10px;
        /* fill the full height of the viewport */
    }

    .grid-container-reversed {
        width: 90vw;
        overflow: hidden;
        scroll-snap-type: none;
        scroll-behavior: none;
        scrollbar-width: none;
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas:
            "large small1"
            "large small2";
        margin: auto;
        gap: 10px;
    }

    .small-top-cell {
        background-color: lightblue;
        grid-area: small1;
        aspect-ratio: 1 / 1;
        width: auto;
        height: 100%;
        flex: none;
        /* for visual representation */
    }

    .small-bottom-cell {
        background-color: lightgreen;
        display: grid;
        grid-area: small2;
        aspect-ratio: 1 / 1;
        height: 100%;
        width: auto;
        flex: none;
        /* two rows, top and bottom are half height */
    }

    .large-cell {
        background-color: red;
        grid-area: large;
        aspect-ratio: 1 / 1;
        height: 100%;
        width: 100%;
        flex: none;
        /* for visual representation */
    }

}