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

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

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

body{
    font-family:"Orbitron",sans-serif;
    background:#05050a;
    color:#ffffff;
    overflow:hidden;
}

/* ===================================
   BACKGROUND
=================================== */

.background{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

.background img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* ===================================
   OVERLAY
=================================== */

.overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;

    background:
    linear-gradient(
        rgba(0,0,0,.30),
        rgba(0,0,0,.55)
    );
}

/* ===================================
   HEADER
=================================== */

header{
    position:fixed;
    top:30px;
    left:40px;
    z-index:10;
}

.logo{
    width:190px;
    height:auto;
    display:block;
}

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

.hero{
    position:relative;
    z-index:5;

    width:100%;
    height:100vh;

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

    text-align:center;
}

.content{
    padding:20px;
}

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

/* ==============================
   MODERN COMING SOON TITLE
============================== */

h1{

    position:relative;

    font-size:clamp(70px,8vw,150px);

    font-weight:900;

    line-height:.85;

    text-transform:uppercase;

    letter-spacing:5px;

    animation:titleFloat 4s ease-in-out infinite;

}


/* COMING */

.coming{

    display:block;

    color:#55e6ff;

    background:
    linear-gradient(
        90deg,
        #55e6ff,
        #ffffff,
        #55e6ff
    );

    background-size:200% auto;

    -webkit-background-clip:text;

    color:transparent;

    animation:shineBlue 3s linear infinite;


    text-shadow:
    0 0 15px rgba(85,230,255,.8),
    0 0 40px rgba(85,230,255,.5);

}


/* SOON */

.soon{

    display:block;

    color:#ff315c;

    background:
    linear-gradient(
        90deg,
        #ff315c,
        #ffffff,
        #ff315c
    );

    background-size:200% auto;

    -webkit-background-clip:text;

    color:transparent;

    animation:shineRed 3s linear infinite;


    text-shadow:
    0 0 15px rgba(255,49,92,.8),
    0 0 40px rgba(255,49,92,.5);

}



/* حركة لمعان */

@keyframes shineBlue{

    from{
        background-position:200% center;
    }

    to{
        background-position:-200% center;
    }

}



@keyframes shineRed{

    from{
        background-position:200% center;
    }

    to{
        background-position:-200% center;
    }

}


/* حركة عائمة بسيطة */

@keyframes titleFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

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

.content p{

    margin-top:30px;

    color:#f0f0f0;

    font-size:18px;

    letter-spacing:4px;

    line-height:1.8;

}

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

@media (max-width:768px){

    header{

        top:20px;
        left:20px;

    }

    .logo{

        width:140px;

    }

    h1{

        font-size:58px;

    }

    .content p{

        font-size:14px;

        letter-spacing:2px;

    }

}