body{
    margin:0;
    overflow:hidden;
    font-family:'Segoe UI',sans-serif;
    background:#050816;
}
.coming-container{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(184,134,11,.06),
    transparent 28%),

    radial-gradient(circle at bottom right,
    rgba(148,163,184,.08),
    transparent 30%),

    linear-gradient(
    135deg,
    #0f1115,
    #171a21,
    #1d2430);
}
.coming-container::before{
    content:'';
    position:absolute;
    width:200%;
    height:200%;
    background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:80px 80px;
    animation:gridMove 30s linear infinite;
    transform:rotate(-8deg);
}
.glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    animation:float 10s infinite ease-in-out alternate;
}
.glow1{
    width:280px;
    height:280px;
    background:rgba(180,140,60,.12);
    top:-100px;
    left:-100px;
}

.glow2{
    width:260px;
    height:260px;
    background:rgba(148,163,184,.10);
    bottom:-100px;
    right:-100px;
}

.glow3{
    width:180px;
    height:180px;
    background:rgba(255,255,255,.03);
    top:50%;
    left:15%;
}
.coming-text{
    position:relative;
    z-index:5;
    text-align:center;
    padding:50px 40px;
    max-width:900px;
}
.coming-title{
    font-size:clamp(42px,8vw,100px);
    font-weight:900;
    text-transform:uppercase;
    line-height:1.1;
    letter-spacing:3px;
    margin:0;

    background:linear-gradient(
    90deg,
    #f8f5f0,
    #d6d3d1,
    #bfa27a,
    #e7e5e4,
    #f8f5f0);

    background-size:250%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 4px 30px rgba(255,255,255,.04);

    animation:
    textReveal 1.5s ease,
    gradientMove 12s linear infinite;
}

.coming-title span{
    display:block;

    background:linear-gradient(
    90deg,
    #d4c2a3,
    #f5f1ea,
    #b08d57,
    #d4c2a3);

    background-size:220%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:gradientMove 10s linear infinite;
}

/* Animated subtitle */
.coming-sub{
    margin-top:25px;
    color:rgba(255,255,255,.75);
    font-size:20px;
    letter-spacing:1px;
    animation:fadeUp 2s ease;
}

/* Animated line */
.animated-line{
    width:180px;
    height:4px;
    margin:35px auto 0;
    border-radius:20px;

    background:linear-gradient(
    90deg,
    #b08d57,
    #f5f1ea,
    #d4c2a3);

    position:relative;
    overflow:hidden;
}
.animated-line::after{
    content:'';
    position:absolute;
    left:-50%;
    top:0;
    width:50%;
    height:100%;
    background:rgba(255,255,255,.8);
    filter:blur(8px);
    animation:shine 2s infinite linear;
}

/* Animations */

@keyframes gradientMove{
    0%{background-position:0%}
    100%{background-position:300%}
}

@keyframes gridMove{
    0%{transform:translateY(0) rotate(-12deg);}
    100%{transform:translateY(-120px) rotate(-12deg);}
}

@keyframes float{
    from{
        transform:translateY(0) scale(1);
    }
    to{
        transform:translateY(50px) scale(1.15);
    }
}

@keyframes textReveal{
    from{
        opacity:0;
        transform:translateY(80px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes shine{
    100%{
        left:130%;
    }
}

/* Mobile */
@media(max-width:768px){

    .coming-text{
        padding:20px;
    }

    .coming-sub{
        font-size:16px;
        line-height:1.7;
    }

    .animated-line{
        width:120px;
    }
}