/*=========================================
GPS OF TRUTH
CINEMATIC LANDING PAGE
PART 1
=========================================*/

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

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    background:#000;

    font-family:"Montserrat",sans-serif;

}

body{

    position:relative;

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

    color:#fff;

}

/*=========================================*/

.background{

    position:fixed;

    inset:0;

    background:#000;

    z-index:0;

}

/*=========================================*/

.hero{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    overflow:hidden;

}

/*=========================================*/

.hero picture{

    position:absolute;

    inset:0;

    width:100vw;
    height:100vh;

    display:block;

}

/*=========================================*/

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top ;

    display:block;

    will-change:transform;

    backface-visibility:hidden;

}
/*=========================================*/

.overlay{

    position:fixed;

    inset:0;

    background:

    linear-gradient(
    rgba(0,0,0,.15),
    rgba(0,0,0,.28),
    rgba(0,0,0,.72)
    );

    z-index:2;

}

/*=========================================*/

.content{

    position:absolute;

    left:50%;
    top:50%;

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

    width:min(900px,90%);

    text-align:center;

    z-index:20;

}

/*=========================================*/

.subtitle{

    color:#d4a44b;

    font-family:"Cinzel",serif;

    letter-spacing:.6rem;

    font-size:clamp(.9rem,2vw,1.3rem);

    margin-bottom:30px;

    opacity:0;

}

/*=========================================*/

#title{

    font-size:clamp(2.2rem,5vw,5rem);

    font-weight:800;

    line-height:1.1;

    min-height:120px;

    text-transform:uppercase;

    text-shadow:

    0 0 25px rgba(0,0,0,.6);

}

/*=========================================*/

#description{

    margin-top:25px;

    font-size:1rem;

    letter-spacing:.3rem;

    color:#ddd;

    min-height:60px;

}

/*=========================================*/

.socials{

    display:flex;

    justify-content:center;

    gap:35px;

    margin-top:60px;

}/*=========================================
PART 2
SOCIALS + CONTENT ANIMATION
=========================================*/

.social{

    width:110px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:15px;

    text-decoration:none;

    color:#ffffff;

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.social.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================*/

.social i{

    width:82px;

    height:82px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:2rem;

    color:#d4a44b;

    border:1px solid rgba(212,164,75,.35);

    background:

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

    backdrop-filter:blur(12px);

    transition:.35s;

}

/*=========================================*/

.social:hover i{

    transform:

    translateY(-6px)

    scale(1.08);

    color:#fff;

    box-shadow:

    0 0 18px rgba(212,164,75,.45),

    0 0 45px rgba(212,164,75,.25);

}

/*=========================================*/

.social span{

    font-size:.78rem;

    letter-spacing:.25rem;

    text-transform:uppercase;

    color:#e8e8e8;

}

/*=========================================*/

.spotify:hover i{

    box-shadow:

    0 0 35px rgba(30,215,96,.45);

}

.youtube:hover i{

    box-shadow:

    0 0 35px rgba(255,0,0,.40);

}

.instagram:hover i{

    box-shadow:

    0 0 35px rgba(225,48,108,.40);

}

.tiktok:hover i{

    box-shadow:

    0 0 35px rgba(0,255,255,.30);

}

/*=========================================*/

#particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:1;

}

.particle{

    position:absolute;

    border-radius:50%;

    background:#d4a44b;

    opacity:.18;

    animation:floating linear infinite;

}

/*=========================================*/




@keyframes floating{

    from{

        transform:

        translateY(110vh);

        opacity:0;

    }

    15%{

        opacity:.2;

    }

    to{

        transform:

        translateY(-120vh)

        translateX(30px);

        opacity:0;

    }

}/*=========================================
PART 3
CINEMATIC ATMOSPHERE
=========================================*/

.background::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at center,

rgba(212,164,75,.18),

transparent 60%

);

filter:blur(80px);

animation:

glowPulse 10s ease-in-out infinite;

}

/*=========================================*/

.background::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle,

transparent 45%,

rgba(0,0,0,.88) 100%

);

}

/*=========================================*/

.content::before{

content:"";

position:absolute;

left:50%;

top:50%;

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

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(212,164,75,.10),

transparent 72%

);

filter:blur(100px);

z-index:-1;

animation:

contentGlow 8s ease-in-out infinite;

}

/*=========================================*/

.subtitle{

animation:

fadeUp 1.5s ease forwards;

animation-delay:.4s;

}

#title{

animation:

fadeUp 1.6s ease forwards;

animation-delay:.8s;

opacity:0;

}

#description{

animation:

fadeUp 1.8s ease forwards;

animation-delay:1.2s;

opacity:0;

}

/*=========================================*/

.hero{

animation:

introFade 2s ease;

}

/*=========================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(30px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

/*=========================================*/

@keyframes introFade{

from{

opacity:0;

}

to{

opacity:1;

}

}

/*=========================================*/

@keyframes glowPulse{

0%,100%{

opacity:.35;

transform:scale(1);

}

50%{

opacity:.8;

transform:scale(1.08);

}

}

/*=========================================*/

@keyframes contentGlow{

0%,100%{

opacity:.25;

transform:

translate(-50%,-50%)

scale(1);

}

50%{

opacity:.65;

transform:

translate(-50%,-50%)

scale(1.08);

}

}

/*=========================================*/

@media(max-width:768px){

.content{

width:92%;

}

.subtitle{

font-size:.95rem;

letter-spacing:.35rem;

}

#title{

font-size:clamp(2rem,8vw,3.2rem);

min-height:90px;

}

#description{

font-size:.9rem;

letter-spacing:.18rem;

padding:0 10px;

}

.socials{

gap:18px;

flex-wrap:wrap;

}

.social{

width:90px;

}

.social i{

width:68px;

height:68px;

font-size:1.5rem;

}

.social span{

font-size:.65rem;

letter-spacing:.12rem;

}

.hero-image{

object-position:center;

}

}
body.loaded{

    opacity:1;

}

body{

    opacity:0;

    transition:opacity 1.2s ease;

}