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

.coming-soon {

    padding: 120px 0;

}

.coming-card {

    position: relative;

    overflow: hidden;

    min-height: 560px;

    border-radius: 36px;

    background: #050505;

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 35px 90px rgba(0,0,0,.35);

}

/*==================================================
Animated Background
==================================================*/

.gradient-container {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: 1;

    background:
        radial-gradient(circle at center,
        #111111 0%,
        #080808 55%,
        #040404 100%);

}

/*==================================================
Glass Overlay
==================================================*/

.glass-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    backdrop-filter: blur(70px);

    -webkit-backdrop-filter: blur(70px);

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.04),

            rgba(255,255,255,.015)

        );

}

/*==================================================
Noise
==================================================*/

.noise {

    position: absolute;

    inset: 0;

    z-index: 3;

    opacity: .05;

    background-image:

        radial-gradient(#ffffff 1px, transparent 1px);

    background-size: 12px 12px;

}

/*==================================================
Blobs
==================================================*/

.blob {

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;

    filter: blur(90px);

    opacity: .95;

    will-change: transform;

    pointer-events: none;

}

/*==================================================
Blob Colors
==================================================*/

.red {

    background:

        radial-gradient(

            circle,

            rgba(255,45,45,.95) 0%,

            rgba(255,45,45,.55) 40%,

            rgba(255,45,45,0) 72%

        );

}

.purple {

    background:

        radial-gradient(

            circle,

            rgba(182,65,255,.95) 0%,

            rgba(182,65,255,.55) 40%,

            rgba(182,65,255,0) 72%

        );

}

.blue {

    background:

        radial-gradient(

            circle,

            rgba(40,120,255,.95) 0%,

            rgba(40,120,255,.55) 40%,

            rgba(40,120,255,0) 72%

        );

}

/*==================================================
Content
==================================================*/

.coming-content {

    position: relative;

    z-index: 10;

    min-height: 560px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 70px;

}

.coming-tag {

    color: white;

    opacity: .75;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

    margin-bottom: 24px;

}

.coming-content h2 {

    color: white;

    font-size: clamp(3rem,6vw,5.4rem);

    line-height: .95;

    letter-spacing: -2px;

    margin-bottom: 28px;

}

.coming-description {

    color: rgba(255,255,255,.82);

    font-size: 1.15rem;

    line-height: 2;

    margin-bottom: 48px;

}

/*==================================================
Loading Bar
==================================================*/

.loading-bar {

    width: 340px;

    max-width: 90%;

    height: 10px;

    overflow: hidden;

    border-radius: 999px;

    background:

        rgba(255,255,255,.08);

    border:

        1px solid rgba(255,255,255,.05);

}

.loading-fill {

    width: 35%;

    height: 100%;

    border-radius: inherit;

    background:

        linear-gradient(

            90deg,

            #2D6BFF,

            #B43CFF,

            #FF2D2D

        );

}

/*==================================================
Blob Motion
(JavaScript will control transform)
==================================================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.9;

    pointer-events:none;

    will-change:
        transform,
        left,
        top,
        width,
        height,
        opacity;

    transform:translate(-50%,-50%);

}

/*==================================================
Loading Bar
==================================================*/

.loading-fill{

    animation:

        loading 2.6s ease-in-out infinite,

        shimmer 6s linear infinite;

    background-size:300%;

}

@keyframes loading{

    0%{

        transform:translateX(-220%);

    }

    100%{

        transform:translateX(420%);

    }

}

@keyframes shimmer{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}

/*==================================================
Hover
==================================================*/

.coming-card{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.coming-card:hover{

    transform:translateY(-6px);

    box-shadow:

        0 45px 110px rgba(0,0,0,.42);

}

/*==================================================
Responsive
==================================================*/

@media (max-width:1024px){

    .coming-card{

        min-height:520px;

    }

    .coming-content{

        min-height:520px;

        padding:60px;

    }

}

@media (max-width:768px){

    .coming-soon{

        padding:90px 0;

    }

    .coming-card{

        min-height:460px;

        border-radius:28px;

    }

    .coming-content{

        min-height:460px;

        padding:45px 24px;

    }

    .coming-content h2{

        line-height:1.05;

    }

    .coming-description{

        font-size:1rem;

        line-height:1.8;

    }

    .loading-bar{

        width:240px;

    }

    .blob{

        width:360px;

        height:360px;

        filter:blur(70px);

    }

}

@media (max-width:480px){

    .coming-card{

        border-radius:24px;

    }

    .coming-content{

        padding:40px 20px;

    }

    .coming-content h2{

        font-size:2.5rem;

    }

    .coming-description{

        font-size:.95rem;

    }

    .blob{

        width:280px;

        height:280px;

        filter:blur(55px);

    }

}