/*==================================================
 L2RAIZ LANDING PREMIUM
 STYLE.CSS
==================================================*/

/*==============================
 RESET
==============================*/

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

html{
    scroll-behavior:smooth;
}

:root{

    --gold:#d4af37;
    --gold-light:#f4d77b;
    --gold-dark:#8d6b29;

    --white:#ffffff;
    --text:#e7e7e7;
    --muted:#9b9b9b;

    --bg:#050505;
    --bg2:#0b0b0b;
    --bg3:#121212;

    --glass:rgba(255,255,255,.04);
    --glass-border:rgba(255,255,255,.08);

    --shadow:
        0 30px 80px rgba(0,0,0,.65);

    --transition:.35s ease;

}

/*==============================
 BODY
==============================*/

body{

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

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;
    overflow-y:auto;

    min-height:100vh;

    position:relative;

    opacity:0;

    transition:opacity .8s;

}

body.loaded{

    opacity:1;

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

.landing{

    width:100%;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    align-items:center;

    position:relative;

    padding:40px;

    z-index:1;

}

/*==============================
 BACKGROUND
==============================*/

.background{

    position:fixed;

    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.82)
    ),

    url("../assets/banners/hero-bg.webp")
    center center /
    cover
    no-repeat;

    z-index:-6;

    transform:scale(1.05);

}

/*==============================
 DARK OVERLAY
==============================*/

.overlay{

    position:fixed;

    inset:0;

    background:

    radial-gradient(
        circle at center,
        rgba(212,175,55,.06),
        transparent 45%
    ),

    linear-gradient(
        180deg,

        rgba(0,0,0,.15),

        rgba(0,0,0,.60),

        rgba(0,0,0,.96)
    );

    z-index:-5;

}

/*==============================
 LIGHT EFFECT
==============================*/

.light{

    position:fixed;

    inset:0;

    background:

    radial-gradient(

        circle at 50% 15%,

        rgba(255,220,120,.10),

        transparent 35%

    );

    filter:blur(40px);

    z-index:-4;

}

/*==============================
 FOG
==============================*/

.fog{

    position:fixed;

    inset:0;

    background:

    url("../img/fog.webp")
    center bottom /
    cover
    no-repeat;

    opacity:.25;

    z-index:-3;

}

/*==============================
 PARTICLES
==============================*/

#particles{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:-2;

}

/*==============================
 HERO
==============================*/

.hero{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    position:relative;

}

/*==============================
 CONTENT
==============================*/

.hero-content{

    width:min(100%,900px);

    text-align:center;

}

/*==============================
 LOGO
==============================*/

.logo{

    width:360px;

    max-width:90%;

    display:block;

    margin:auto;

    user-select:none;

    filter:

        drop-shadow(0 0 10px rgba(255,210,100,.20))

        drop-shadow(0 0 30px rgba(255,210,100,.15))

        drop-shadow(0 0 80px rgba(255,210,100,.08));

}

/*==============================
 BADGE
==============================*/

.badge{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:28px;

    padding:11px 28px;

    border-radius:40px;

    border:1px solid rgba(212,175,55,.22);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    color:var(--gold-light);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:12px;

    font-weight:600;

}

/*==============================
 TITLE
==============================*/

.hero h1{

    margin-top:35px;

    font-family:"Cinzel",serif;

    font-size:clamp(52px,7vw,92px);

    font-weight:900;

    color:#fff;

    line-height:1.05;

    text-shadow:

        0 0 12px rgba(255,220,120,.15),

        0 0 40px rgba(255,210,100,.10);

}

/*==============================
 DESCRIPTION
==============================*/

.hero p{

    width:min(720px,100%);

    margin:28px auto 0;

    color:#cfcfcf;

    font-size:18px;

    line-height:1.9;

    font-weight:300;

}

/*==============================
 SELECTION
==============================*/

::selection{

    background:var(--gold);

    color:#000;

}

/*==============================
 SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:var(--gold-dark);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}
/*==================================================
  COUNTDOWN PREMIUM
==================================================*/

.countdown{

    width:100%;

    margin-top:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

}

/*=========================================
 CARD
=========================================*/

.card{

    position:relative;

    width:150px;

    height:170px;

    overflow:hidden;

    border-radius:24px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

    backdrop-filter:blur(18px);

    border:1px solid rgba(212,175,55,.12);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 15px 40px rgba(0,0,0,.45);

    transition:.45s ease;

}

/*=========================================
 REFLEXO
=========================================*/

.card::before{

    content:"";

    position:absolute;

    left:-150%;

    top:0;

    width:80px;

    height:220%;

    transform:rotate(25deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.16),

            transparent

        );

    transition:1s;

}

.card:hover::before{

    left:180%;

}

/*=========================================
 GLOW
=========================================*/

.card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

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

    box-shadow:

        inset 0 0 20px rgba(255,210,120,.04),

        0 0 25px rgba(255,210,120,.03);

    pointer-events:none;

}

/*=========================================
 HOVER
=========================================*/

.card:hover{

    transform:

        translateY(-10px)

        scale(1.04);

    border-color:rgba(212,175,55,.35);

    box-shadow:

        0 25px 60px rgba(0,0,0,.60),

        0 0 35px rgba(212,175,55,.12),

        inset 0 1px 0 rgba(255,255,255,.12);

}

/*=========================================
 NUMBER
=========================================*/

.card span{

    font-family:"Cinzel",serif;

    font-size:68px;

    font-weight:900;

    color:#ffffff;

    line-height:1;

    text-shadow:

        0 0 12px rgba(255,215,120,.20),

        0 0 35px rgba(255,215,120,.08);

}

/*=========================================
 LABEL
=========================================*/

.card small{

    margin-top:16px;

    font-size:12px;

    font-weight:600;

    color:#c9c9c9;

    letter-spacing:3px;

    text-transform:uppercase;

}

/*=========================================
 ANIMAÇÃO
=========================================*/

.card{

    animation:

        cardFloat 5s ease-in-out infinite;

}

.card:nth-child(2){

    animation-delay:.4s;

}

.card:nth-child(3){

    animation-delay:.8s;

}

.card:nth-child(4){

    animation-delay:1.2s;

}

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================
 SEPARADOR DOURADO
=========================================*/

.countdown::before{

    content:"";

    position:absolute;

    width:420px;

    height:1px;

    margin-top:-140px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(212,175,55,.35),

            transparent

        );

}

.countdown::after{

    content:"";

    position:absolute;

    width:420px;

    height:1px;

    margin-top:240px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(212,175,55,.20),

            transparent

        );

}

/*==================================================
    SERVER INFO
==================================================*/

.server-info{

    width:100%;

    margin-top:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

}

.info{

    min-width:140px;

    height:52px;

    padding:0 22px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

    border-radius:50px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    backdrop-filter:blur(18px);

    border:1px solid rgba(212,175,55,.12);

    transition:.35s ease;

}

.info::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70px;

    height:200%;

    transform:rotate(25deg);

    background:

        linear-gradient(
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:.8s;

}

.info:hover::before{

    left:180%;

}

.info:hover{

    transform:translateY(-4px);

    border-color:rgba(212,175,55,.35);

    box-shadow:

        0 10px 30px rgba(0,0,0,.45),

        0 0 20px rgba(212,175,55,.10);

}

.info span{

    color:#f1f1f1;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:13px;

    font-weight:600;

}

/*==================================================
    BUTTONS
==================================================*/

.buttons{

    margin-top:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:22px;

}

/*=========================
 BOTÃO BASE
=========================*/

.btn{

    position:relative;

    overflow:hidden;

    width:260px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

    transition:.35s ease;

}

/*=========================
 REFLEXO
=========================*/

.btn::before{

    content:"";

    position:absolute;

    left:-160%;

    top:0;

    width:90px;

    height:200%;

    transform:rotate(25deg);

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transition:1s;

}

.btn:hover::before{

    left:180%;

}

/*=========================
 ENTRAR NO SITE
=========================*/

.primary{

    background:

        linear-gradient(
            180deg,
            #d8b65b,
            #9f7425
        );

    color:#ffffff;

    border:1px solid rgba(255,220,120,.25);

    box-shadow:

        0 15px 35px rgba(212,175,55,.18);

}

.primary:hover{

    transform:

        translateY(-4px)

        scale(1.02);

    box-shadow:

        0 18px 45px rgba(212,175,55,.35),

        0 0 30px rgba(212,175,55,.15);

}

/*=========================
 FACEBOOK
=========================*/

.secondary{

    background:

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

    backdrop-filter:blur(18px);

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

    color:#ffffff;

}

.secondary:hover{

    transform:

        translateY(-4px);

    border-color:rgba(212,175,55,.30);

    box-shadow:

        0 15px 40px rgba(0,0,0,.50);

}

/*=========================
 GLOW
=========================*/

.primary::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:14px;

    box-shadow:

        inset 0 0 20px rgba(255,255,255,.12),

        0 0 25px rgba(212,175,55,.12);

    pointer-events:none;

}

/*==================================================
    FOOTER
==================================================*/

footer{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:min(1200px,90%);

    text-align:center;

}

.footer-line{

    width:100%;

    height:1px;

    margin-bottom:18px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(212,175,55,.30),

            transparent

        );

}

footer p{

    color:#7b7b7b;

    font-size:13px;

    letter-spacing:2px;

}

/*==================================================
    HOVER GERAL
==================================================*/

.logo:hover{

    filter:

        drop-shadow(0 0 20px rgba(255,220,120,.30))

        drop-shadow(0 0 60px rgba(255,220,120,.18))

        drop-shadow(0 0 120px rgba(255,220,120,.10));

}
/*==================================================
        PREMIUM EFFECTS
==================================================*/

/*==========================================
BACKGROUND CINEMATIC
==========================================*/

.background{

    animation:
        backgroundZoom 30s ease-in-out infinite alternate;

}

@keyframes backgroundZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.12);

    }

}

/*==========================================
LIGHT
==========================================*/

.light{

    animation:
        lightPulse 8s ease-in-out infinite;

}

@keyframes lightPulse{

    0%{

        opacity:.45;

        transform:scale(1);

    }

    50%{

        opacity:.9;

        transform:scale(1.08);

    }

    100%{

        opacity:.45;

        transform:scale(1);

    }

}

/*==========================================
FOG
==========================================*/

.fog{

    animation:
        fogMove 45s linear infinite;

    opacity:.28;

}

@keyframes fogMove{

    from{

        transform:translateX(-4%);

    }

    to{

        transform:translateX(4%);

    }

}

/*==========================================
LOGO FLOAT
==========================================*/

.logo{

    animation:
        logoFloat 6s ease-in-out infinite;

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================
LOGO GLOW
==========================================*/

.logo::after{

    content:"";

    position:absolute;

    inset:0;

}

/*==========================================
HERO
==========================================*/

.hero-content{

    animation:
        heroFade 1.6s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==========================================
TITLE
==========================================*/

.hero h1{

    animation:
        titleGlow 5s ease-in-out infinite;

}

@keyframes titleGlow{

    0%{

        text-shadow:
        0 0 18px rgba(255,220,120,.18);

    }

    50%{

        text-shadow:

        0 0 35px rgba(255,220,120,.30),

        0 0 90px rgba(255,220,120,.10);

    }

    100%{

        text-shadow:

        0 0 18px rgba(255,220,120,.18);

    }

}

/*==========================================
BADGE
==========================================*/

.badge{

    animation:

        badgeGlow 4s ease-in-out infinite;

}

@keyframes badgeGlow{

    0%{

        box-shadow:

            0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:

            0 0 25px rgba(212,175,55,.12);

    }

    100%{

        box-shadow:

            0 0 0 rgba(212,175,55,0);

    }

}

/*==========================================
SERVER INFO
==========================================*/

.info{

    animation:

        infoFloat 7s ease-in-out infinite;

}

.info:nth-child(2){

    animation-delay:.4s;

}

.info:nth-child(3){

    animation-delay:.8s;

}

.info:nth-child(4){

    animation-delay:1.2s;

}

@keyframes infoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================
BUTTON GLOW
==========================================*/

.primary{

    animation:

        buttonGlow 3s ease-in-out infinite;

}

@keyframes buttonGlow{

    0%{

        box-shadow:

        0 10px 30px rgba(212,175,55,.12);

    }

    50%{

        box-shadow:

        0 15px 45px rgba(212,175,55,.28);

    }

    100%{

        box-shadow:

        0 10px 30px rgba(212,175,55,.12);

    }

}

/*==========================================
GOLD PARTICLES
==========================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    opacity:.45;

    background:

        radial-gradient(circle at 15% 20%, rgba(255,220,120,.18) 2px, transparent 3px),

        radial-gradient(circle at 75% 30%, rgba(255,220,120,.12) 2px, transparent 4px),

        radial-gradient(circle at 40% 80%, rgba(255,220,120,.15) 2px, transparent 4px),

        radial-gradient(circle at 85% 70%, rgba(255,220,120,.14) 2px, transparent 4px),

        radial-gradient(circle at 30% 50%, rgba(255,220,120,.10) 2px, transparent 4px);

    animation:

        particlesFloat 28s linear infinite;

}

@keyframes particlesFloat{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-180px);

    }

}

/*==========================================
BOTTOM LIGHT
==========================================*/

body::after{

    content:"";

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    pointer-events:none;

    background:

        linear-gradient(

            transparent,

            rgba(0,0,0,.65)

        );

}

/*==========================================
SMOOTH
==========================================*/

.logo,
.card,
.btn,
.info{

    will-change:transform;

}
/*==================================================
            FINAL POLISH
            L2RAIZ PREMIUM
==================================================*/

/*==============================
SMOOTH TRANSITIONS
==============================*/

*{

    transition:

        background .35s ease,

        border-color .35s ease,

        color .35s ease,

        transform .35s ease,

        box-shadow .35s ease,

        opacity .35s ease;

}

/*==============================
MOUSE CURSOR
==============================*/

body{

    cursor:default;

}

/*==============================
HERO SHADOW
==============================*/

.hero{

    position:relative;

}

.hero::after{

    content:"";

    position:absolute;

    width:900px;

    height:400px;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    background:

        radial-gradient(

            ellipse,

            rgba(0,0,0,.60),

            transparent 70%

        );

    z-index:-1;

}

/*==============================
LOGO HOVER
==============================*/

.logo:hover{

    transform:

        scale(1.03)

        translateY(-4px);

}

/*==============================
COUNTDOWN
==============================*/

.card{

    overflow:hidden;

}

.card::before{

    animation:

        shineMove 6s linear infinite;

}

@keyframes shineMove{

    0%{

        left:-180%;

    }

    100%{

        left:180%;

    }

}

/*==============================
BUTTON PREMIUM
==============================*/

.btn{

    letter-spacing:2px;

    font-size:14px;

    font-weight:700;

}

.btn:active{

    transform:scale(.97);

}

/*==============================
BUTTON SHINE
==============================*/

.primary{

    position:relative;

}

.primary::before{

    animation:

        buttonShine 5s linear infinite;

}

@keyframes buttonShine{

    0%{

        left:-180%;

    }

    100%{

        left:180%;

    }

}

/*==============================
SERVER INFO
==============================*/

.info{

    position:relative;

}

.info::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50px;

    pointer-events:none;

    box-shadow:

        inset 0 0 15px rgba(255,255,255,.02);

}

/*==============================
FOOTER
==============================*/

footer{

    backdrop-filter:blur(8px);

}

footer p{

    transition:.4s;

}

footer:hover p{

    color:#b9b9b9;

}

/*==============================
FADE
==============================*/

.hero-content>*{

    opacity:0;

    transform:translateY(20px);

    animation:

        fadeItem .8s forwards;

}

.hero-content>*:nth-child(1){

    animation-delay:.2s;

}

.hero-content>*:nth-child(2){

    animation-delay:.4s;

}

.hero-content>*:nth-child(3){

    animation-delay:.6s;

}

.hero-content>*:nth-child(4){

    animation-delay:.8s;

}

.hero-content>*:nth-child(5){

    animation-delay:1s;

}

.hero-content>*:nth-child(6){

    animation-delay:1.2s;

}

@keyframes fadeItem{

    to{

        opacity:1;

        transform:none;

    }

}

/*==============================
BACKGROUND GLOW
==============================*/

.background::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle,

            rgba(255,220,120,.03),

            transparent 65%

        );

}

/*==============================
VIGNETTE
==============================*/

body{

    box-shadow:

        inset 0 0 220px rgba(0,0,0,.65);

}

/*==============================
TEXT
==============================*/

.hero p{

    text-shadow:

        0 2px 12px rgba(0,0,0,.8);

}

/*==============================
BADGE
==============================*/

.badge{

    box-shadow:

        inset 0 0 15px rgba(255,255,255,.04),

        0 0 20px rgba(212,175,55,.08);

}

/*==============================
SCROLL FIX
==============================*/

html,

body{

    width:100%;

    min-height:100%;

}

/*==============================
ANTI BLUR
==============================*/

img{

    image-rendering:auto;

}

/*==============================
PERFORMANCE
==============================*/

.logo,

.background,

.light,

.fog,

.card,

.info,

.btn{

    will-change:

        transform,

        opacity;

}
/*==================================================
    MOUSE GLOW
==================================================*/

.mouse-glow{

    position:fixed;

    width:450px;
    height:450px;

    border-radius:50%;

    pointer-events:none;

    background:radial-gradient(
        circle,
        rgba(212,175,55,.18) 0%,
        rgba(212,175,55,.08) 35%,
        transparent 70%
    );

    filter:blur(80px);

    z-index:5;

    mix-blend-mode:screen;

}
/*==================================================
CUSTOM CURSOR
==================================================*/

body{
    cursor:none;
}

.cursor{

    position:fixed;

    left:0;
    top:0;

    width:38px;
    height:38px;

    border:2px solid rgba(212,175,55,.8);

    border-radius:50%;

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

    pointer-events:none;

    z-index:99999;

    transition:
        width .25s ease,
        height .25s ease,
        border-color .25s ease,
        background .25s ease;

    box-shadow:
        0 0 18px rgba(212,175,55,.35);

}

.cursor-dot{

    position:fixed;

    left:0;
    top:0;

    width:8px;
    height:8px;

    background:#d4af37;

    border-radius:50%;

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

    pointer-events:none;

    z-index:100000;

    box-shadow:
        0 0 12px #d4af37,
        0 0 25px rgba(212,175,55,.5);

}

.cursor.active{

    width:58px;
    height:58px;

    background:rgba(212,175,55,.10);

    border-color:#FFD76A;

}
/*==============================
THE END
==============================*/