/* ==========================================================
   RESET
========================================================== */

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


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


html {
    background: #343629;
}


body {
    overflow: hidden;
    background: #343629;
}



/* ==========================================================
   LANDING PAGE
========================================================== */

.landing {

    position: relative;

    width: 100vw;

    height: 100vh;
    height: 100svh;


    display: flex;

    align-items: center;

    justify-content: center;


    overflow: hidden;


    /* Court Hintergrund */

    background-image: url("images/court-bg.jpg");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

}



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

.landing-content {

    position: relative;


    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;


    text-align: center;

}



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

.landing-logo {

    display: block;


    width: clamp(
        180px,
        17vw,
        350px
    );


    height: auto;


    /*
    Startzustand
    */

    opacity: 0;


    transform:

        translate3d(0, 0, 0)

        scale(0.90);


    transform-origin: center center;


    /*
    Browser soll Transform + Opacity
    möglichst über die GPU rendern.
    */

    will-change: transform, opacity;


    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;


    /*
    Animation
    */

    animation:

        logoIntro

        3s

        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )

        2.5s

        forwards;

}



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

@keyframes logoIntro {


    from {

        opacity: 0;


        transform:

            translate3d(0, 0, 0)

            scale(0.90);

    }


    to {

        opacity: 1;


        transform:

            translate3d(0, 0, 0)

            scale(1);

    }

}



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

.coming-soon {

    margin-top:

        clamp(
            28px,
            3vh,
            50px
        );


    font-family:

        "Montagu Slab",
        serif;


    font-size:

        clamp(
            32px,
            4vw,
            70px
        );


    font-weight: 500;


    line-height: 1;


    letter-spacing: 0.035em;


    color: #CDC79C;


    /*
    Startzustand
    */

    opacity: 0;


    transform:

        translate3d(
            0,
            12px,
            0
        );


    will-change: transform, opacity;


    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;


    /*
    Text folgt dem Logo
    */

    animation:

        textIntro

        2.4s

        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )

        4.7s

        forwards;

}



/* ==========================================================
   TEXT INTRO
========================================================== */

@keyframes textIntro {


    from {

        opacity: 0;


        transform:

            translate3d(
                0,
                12px,
                0
            );

    }


    to {

        opacity: 1;


        transform:

            translate3d(
                0,
                0,
                0
            );

    }

}



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

@media (max-width: 768px) {


    .landing-logo {

        width:

            clamp(
                150px,
                32vw,
                240px
            );

    }


    .coming-soon {

        font-size:

            clamp(
                28px,
                8vw,
                48px
            );


        margin-top: 25px;

    }

}



/* ==========================================================
   REDUCED MOTION
========================================================== */

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


    .landing-logo,
    .coming-soon {

        animation: none;

        opacity: 1;

        transform: none;

    }

}