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

body{
    overflow:hidden;
    font-family:Georgia, serif;
    background:#ffffff;
}

.hero{
    position:relative;
    width:100%;
    height:100vh;
    background:url("Logo.png")
    center center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
}

.overlay{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at center,
    rgba(255,215,0,.08),
    rgba(0,0,0,.92));
}

.content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:20px;
}

.content h1{
    font-size:clamp(4rem,10vw,9rem);
    letter-spacing:12px;
    color:#d4af37;
    text-shadow:
        0 0 10px rgba(212,175,55,.8),
        0 0 30px rgba(212,175,55,.6),
        0 0 60px rgba(212,175,55,.4);
    animation:goldGlow 4s ease-in-out infinite;
}

.content p{
    margin-top:15px;
    color:#fff;
    font-size:clamp(1rem,2vw,1.5rem);
    letter-spacing:4px;
    text-transform:uppercase;
}

/* Loading */

.loading-wrapper{
    margin-top:40px;
    width:min(350px,80vw);
    margin-left:auto;
    margin-right:auto;
}

.loading-text{
    color:#d4af37;
    font-size:14px;
    letter-spacing:3px;
    margin-bottom:12px;
}

.loading-bar{
    width:100%;
    height:8px;
    border-radius:50px;
    overflow:hidden;
    background:rgba(255,255,255,.15);
    box-shadow:0 0 15px rgba(212,175,55,.2);
}

.loading-progress{
    width:0%;
    height:100%;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        #7a5b00,
        #d4af37,
        #ffd700
    );
    box-shadow:
        0 0 15px #d4af37,
        0 0 30px #ffd700;
    animation:loading 8s linear forwards;
}

@keyframes loading{
    from{
        width:0%;
    }
    to{
        width:100%;
    }
}

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

    50%{
        text-shadow:
            0 0 20px rgba(255,215,0,1),
            0 0 60px rgba(255,215,0,.8),
            0 0 100px rgba(255,215,0,.5);
    }
}

.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.particle{
    position:absolute;
    border-radius:50%;
    background:rgba(255,215,0,.85);
    pointer-events:none;
    animation:float linear infinite;
}

@keyframes float{
    from{
        transform:translateY(100vh);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    to{
        transform:translateY(-120px);
        opacity:0;
    }
}

@media(max-width:768px){

    .content h1{
        letter-spacing:6px;
        font-size:4rem;
    }

    .content p{
        font-size:1rem;
        letter-spacing:2px;
    }

    .loading-wrapper{
        width:85vw;
    }
}