/* =========================================================
   GLOBAL
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;

    background: #080d12;

    color: #ffffff;

    overflow: hidden;
}


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

.hero {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        url("assets/hero.webp")
        center center / cover
        no-repeat;

    overflow: hidden;
}


/* =========================================================
   CINEMATIC DARK OVERLAY
   ========================================================= */

.overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 12, 18, 0.72) 0%,
            rgba(5, 12, 18, 0.40) 45%,
            rgba(5, 12, 18, 0.08) 100%
        );
}


/* =========================================================
   DESERT DUST
   ========================================================= */

.desert-dust {
    position: absolute;

    inset: 0;

    z-index: 2;

    overflow: hidden;

    pointer-events: none;
}


/*
 * Main cloud
 * Starts around the motorcycle and moves toward the left.
 */

.dust {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    will-change: transform, opacity;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 177, 105, 0.75) 0%,
            rgba(224, 126, 62, 0.55) 25%,
            rgba(158, 87, 48, 0.30) 48%,
            rgba(92, 55, 38, 0.12) 65%,
            transparent 78%
        );
}


/* CLOUD 1 */

.dust-1 {
    width: 900px;
    height: 260px;

    right: -400px;
    bottom: 4vh;

    filter: blur(45px);

    animation:
        dustCloud1 12s
        ease-in-out
        infinite;
}


/* CLOUD 2 */

.dust-2 {
    width: 700px;
    height: 190px;

    right: -300px;
    bottom: 13vh;

    filter: blur(60px);

    opacity: 0;

    animation:
        dustCloud2 17s
        ease-in-out
        infinite;

    animation-delay: -5s;
}


/* CLOUD 3 */

.dust-3 {
    width: 1100px;
    height: 170px;

    right: -600px;
    bottom: -2vh;

    filter: blur(70px);

    opacity: 0;

    animation:
        dustCloud3 22s
        linear
        infinite;

    animation-delay: -8s;
}


/* CLOUD 4 */

.dust-4 {
    width: 600px;
    height: 300px;

    right: 5vw;
    bottom: 7vh;

    filter: blur(90px);

    opacity: 0;

    animation:
        dustFloat 15s
        ease-in-out
        infinite;

    animation-delay: -3s;
}


/* =========================================================
   DUST ANIMATIONS
   ========================================================= */

@keyframes dustCloud1 {

    0% {
        transform:
            translate3d(250px, 20px, 0)
            scale(0.55);

        opacity: 0;
    }

    15% {
        opacity: 0.75;
    }

    40% {
        opacity: 0.60;
    }

    75% {
        opacity: 0.35;
    }

    100% {
        transform:
            translate3d(-1500px, -45px, 0)
            scale(1.6);

        opacity: 0;
    }
}


@keyframes dustCloud2 {

    0% {
        transform:
            translate3d(250px, 30px, 0)
            scale(0.6);

        opacity: 0;
    }

    20% {
        opacity: 0.55;
    }

    60% {
        opacity: 0.30;
    }

    100% {
        transform:
            translate3d(-1400px, -80px, 0)
            scale(1.8);

        opacity: 0;
    }
}


@keyframes dustCloud3 {

    0% {
        transform:
            translate3d(400px, 0, 0)
            scaleX(0.7);

        opacity: 0;
    }

    20% {
        opacity: 0.40;
    }

    70% {
        opacity: 0.25;
    }

    100% {
        transform:
            translate3d(-1800px, -30px, 0)
            scaleX(1.8);

        opacity: 0;
    }
}


@keyframes dustFloat {

    0% {
        transform:
            translate3d(150px, 50px, 0)
            scale(0.7);

        opacity: 0;
    }

    30% {
        opacity: 0.35;
    }

    55% {
        transform:
            translate3d(-200px, -30px, 0)
            scale(1.1);

        opacity: 0.25;
    }

    100% {
        transform:
            translate3d(-750px, -80px, 0)
            scale(1.5);

        opacity: 0;
    }
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.content {
    position: relative;

    z-index: 5;

    width: 90%;
    max-width: 900px;

    text-align: center;

    transform: translateX(-12%);
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
    width: min(390px, 75vw);

    height: auto;

    margin-bottom: 45px;
}


/* =========================================================
   TITLE
   ========================================================= */

h1 {
    display: flex;
    flex-direction: column;

    font-size: clamp(
        1.8rem,
        3vw,
        3.2rem
    );

    line-height: 1.35;

    letter-spacing: 0.28em;

    font-weight: 400;
}

h1 span {
    color: #ffffff;
}

h1 strong {
    color: #ff7417;

    font-weight: 400;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.divider {
    width: 90px;
    height: 1px;

    margin: 42px auto;

    background: #ff7417;
}


/* =========================================================
   COMING SOON
   ========================================================= */

h2 {
    font-size: clamp(
        1.3rem,
        2vw,
        2rem
    );

    font-weight: 400;

    letter-spacing: 0.4em;

    margin-bottom: 25px;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

p {
    color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    font-size: clamp(
        0.7rem,
        1vw,
        1rem
    );

    line-height: 1.8;

    letter-spacing: 0.28em;
}


/* =========================================================
   ENTER SCREEN
   ========================================================= */

.enter-screen {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(
            5,
            12,
            18,
            0.45
        );

    backdrop-filter: blur(3px);

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


.enter-screen.hidden {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   ENTER BUTTON
   ========================================================= */

#enter-button {
    padding:
        18px
        34px;

    border:
        1px solid
        rgba(
            255,
            116,
            23,
            0.8
        );

    background:
        rgba(
            5,
            12,
            18,
            0.65
        );

    color: #ffffff;

    font-size: 14px;

    letter-spacing: 0.3em;

    cursor: pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


#enter-button span {
    display: block;

    margin-top: 8px;

    color: #ff7417;

    font-size: 8px;

    letter-spacing: 0.25em;
}


#enter-button:hover {
    background: #ff7417;

    border-color: #ff7417;

    transform: scale(1.03);
}


#enter-button:hover span {
    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .content {
        transform: none;
    }

    .overlay {
        background:
            rgba(
                5,
                12,
                18,
                0.45
            );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .hero {
        background-position:
            65% center;
    }


    .overlay {
        background:
            linear-gradient(
                rgba(
                    5,
                    12,
                    18,
                    0.35
                ),
                rgba(
                    5,
                    12,
                    18,
                    0.65
                )
            );
    }


    .content {
        width: 88%;
    }


    .logo {
        width: 260px;

        margin-bottom: 35px;
    }


    h1 {
        font-size: 1.55rem;

        letter-spacing: 0.14em;

        line-height: 1.5;
    }


    .divider {
        margin: 30px auto;

        width: 65px;
    }


    h2 {
        font-size: 1.1rem;

        letter-spacing: 0.3em;
    }


    p {
        font-size: 0.65rem;

        letter-spacing: 0.16em;

        line-height: 1.8;
    }


    /*
     * Reduce dust complexity on mobile
     */

    .dust-1 {
        width: 600px;
        height: 180px;
    }

    .dust-2 {
        width: 500px;
        height: 160px;
    }

    .dust-3 {
        display: none;
    }

    .dust-4 {
        display: none;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dust {
        animation: none;
    }

}