/* Reset */

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

/* Body */

body
{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    font-family:"Tajawal",sans-serif;
    background:radial-gradient(circle at top,#1c1c1d 0%,#0b0b0c 60%);
    color:#fff;
}

/* Background */

.background-grid
{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:50px 50px;
    mask-image:radial-gradient(circle at center,black 30%,transparent 90%);
}

/* Layout */

.coming-page
{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:2;
}

/* Card */

.coming-card
{
    position:relative;
    width:100%;
    max-width:650px;
    padding:75px 50px;
    text-align:center;
    overflow:hidden;
    border-radius:35px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
    0 0 80px rgba(212,175,55,.08),
    0 25px 80px rgba(0,0,0,.5);
    animation:
    fadeUp 1s ease,
    floatingCard 6s ease-in-out infinite;
}

/* Border */

.card-border
{
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, rgba(212,175,55,.7), transparent, rgba(212,175,55,.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    pointer-events:none;
    animation:borderRotate 6s linear infinite;
}

/* Logo */

.logo
{
    margin-bottom:24px;
    font-size:22px;
    font-weight:800;
    letter-spacing:10px;
    color:#d4af37;
    animation:glowText 3s ease-in-out infinite;
}

/* Titles */

h1
{
    margin-bottom:15px;
    font-size:78px;
    line-height:1;
    background:linear-gradient(to bottom, #fff, #d4af37);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 30px rgba(212,175,55,.25);
    animation:titleFloat 4s ease-in-out infinite;
}

h2
{
    margin-bottom:28px;
    color:#fff;
    font-size:32px;
    font-weight:700;
    letter-spacing:3px;
}

/* Text */

p
{
    margin-bottom:40px;
    color:rgba(255,255,255,.7);
    font-size:18px;
    line-height:2;
}

/* Status */

.status
{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:14px 24px;
    border-radius:999px;
    background:rgba(212,175,55,.08);
    border:1px solid rgba(212,175,55,.18);
    color:#f1d67c;
    font-size:15px;
    font-weight:600;
    animation:pulseBox 3s infinite;
}

.status-dot
{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#d4af37;
    box-shadow:0 0 15px #d4af37;
    animation:pulseDot 1.5s infinite;
}

/* Glow */

.glow
{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.35;
    z-index:1;
}

.glow-1
{
    top:-180px;
    left:-120px;
    width:450px;
    height:450px;
    background:#d4af37;
    animation:glowMove 8s ease-in-out infinite;
}

.glow-2
{
    right:-180px;
    bottom:-180px;
    width:550px;
    height:550px;
    background:#7d5d0f;
    animation:glowMove 10s ease-in-out infinite reverse;
}

/* Particles */

.particles span
{
    position:absolute;
    display:block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    box-shadow:0 0 10px rgba(255,255,255,.4);
    animation:particlesMove linear infinite;
}

.particles span:nth-child(1)
{
    top:12%;
    left:10%;
    animation-duration:10s;
}

.particles span:nth-child(2)
{
    top:80%;
    left:20%;
    animation-duration:16s;
}

.particles span:nth-child(3)
{
    top:25%;
    right:12%;
    animation-duration:12s;
}

.particles span:nth-child(4)
{
    right:20%;
    bottom:15%;
    animation-duration:18s;
}

.particles span:nth-child(5)
{
    top:50%;
    left:50%;
    animation-duration:14s;
}

.particles span:nth-child(6)
{
    top:70%;
    right:40%;
    animation-duration:20s;
}

/* Animations */

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

    to
    {
        opacity:1;
        transform:translateY(0);
    }
}

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

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

@keyframes glowMove
{
    0%,100%
    {
        transform:translate(0,0);
    }

    50%
    {
        transform:translate(30px,30px);
    }
}

@keyframes pulseDot
{
    0%
    {
        transform:scale(1);
        opacity:1;
    }

    50%
    {
        transform:scale(1.5);
        opacity:.5;
    }

    100%
    {
        transform:scale(1);
        opacity:1;
    }
}

@keyframes particlesMove
{
    0%
    {
        transform:translateY(0);
        opacity:0;
    }

    10%
    {
        opacity:1;
    }

    90%
    {
        opacity:1;
    }

    100%
    {
        transform:translateY(-150px);
        opacity:0;
    }
}

@keyframes glowText
{
    0%,100%
    {
        text-shadow:0 0 10px rgba(212,175,55,.4);
    }

    50%
    {
        text-shadow:0 0 25px rgba(212,175,55,.8);
    }
}

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

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

@keyframes pulseBox
{
    0%,100%
    {
        box-shadow:0 0 0 rgba(212,175,55,0);
    }

    50%
    {
        box-shadow:0 0 20px rgba(212,175,55,.12);
    }
}

@keyframes borderRotate
{
    0%
    {
        transform:rotate(0);
    }

    100%
    {
        transform:rotate(360deg);
    }
}

/* Responsive */

@media (max-width:700px)
{
    body
    {
        overflow:hidden;
    }

    .coming-page
    {
        padding:18px;
    }

    .coming-card
    {
        max-width:100%;
        padding:48px 24px;
        border-radius:26px;
    }

    .logo
    {
        margin-bottom:20px;
        font-size:18px;
        letter-spacing:7px;
    }

    h1
    {
        margin-bottom:12px;
        font-size:52px;
    }

    h2
    {
        margin-bottom:22px;
        font-size:23px;
        letter-spacing:2px;
    }

    p
    {
        margin-bottom:32px;
        font-size:15px;
        line-height:1.8;
    }

    .status
    {
        padding:12px 20px;
        font-size:14px;
    }

    .glow-1
    {
        top:-140px;
        left:-180px;
        width:350px;
        height:350px;
    }

    .glow-2
    {
        right:-200px;
        bottom:-160px;
        width:420px;
        height:420px;
    }
}

@media (max-width:420px)
{
    .coming-card
    {
        padding:42px 20px;
        border-radius:22px;
    }

    .logo
    {
        font-size:16px;
        letter-spacing:6px;
    }

    h1
    {
        font-size:46px;
    }

    h2
    {
        font-size:20px;
    }

    p
    {
        font-size:14px;
    }

    .status
    {
        padding:11px 18px;
        font-size:13px;
    }
}