.hero{

    position:relative;

    width:100%;
    min-height:100vh;

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

    overflow:hidden;

    isolation:isolate;

}

.hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(0,255,140,.12),
        transparent 40%
    );

    pointer-events:none;

    z-index:-1;

}

.hero-background{

    position:absolute;
    inset:0;

    background-image:url("../img/backgrounds/hero.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    z-index:-3;

    transform:scale(1.1);
    animation:heroZoom 20s ease-in-out infinite alternate;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.55),

        rgba(0,0,0,.85)

    );

    z-index:-2;

}

.hero-light{

    position:absolute;

    width:800px;
    height:800px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(47,168,255,.15),
        transparent 65%
    );

    filter:blur(120px);

    top:-200px;
    right:-200px;

    z-index:-1;

    animation:lightMove 10s ease-in-out infinite alternate;

}

.hero-noise{

    position:absolute;
    inset:0;

    background-image:url("https://www.transparenttextures.com/patterns/noise.png");
    opacity:0.04;

    z-index:-0;

    pointer-events:none;

}

.hero-content{

    position:relative;

    width:min(1100px,92%);

    text-align:center;

    letter-spacing:2px;
    
    text-shadow:0 0 30px rgba(0,0,0,.4);

}

.hero-subtitle{

    color:#d4af37;

    letter-spacing:8px;

    font-size:14px;

}

.hero-content h1{

    font-size:7rem;

    margin:20px 0;

    font-weight:900;

    text-transform:uppercase;

}

.hero-content h1 span{

    color:#d4af37;

}

.hero-content p{

    max-width:700px;

    margin:auto;

    font-size:20px;

    color:#ddd;

    line-height:1.8;

}

.hero-buttons{

    margin-top:60px;

    display:flex;

    justify-content:center;

    gap:25px;

}

.btn{

    position:relative;

    padding:18px 45px;

    border-radius:60px;

    font-weight:600;

    transition:all .3s ease;

    overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transition:.5s;

}

.btn:hover::after{
    left:100%;
}

.btn-primary{

    background:#d4af37;

    color:black;

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 0 40px rgba(212,175,55,.6);

}

.btn-secondary{

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

    backdrop-filter:blur(20px);

}

.btn-secondary:hover{

    background:white;

    color:black;

}

.btn:hover{
    transform:translateY(-4px);
}

.scroll-down{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    z-index:2;

}

.scroll-down span{

    width:26px;

    height:45px;

    border:2px solid white;

    display:block;

    border-radius:50px;

    position:relative;

}

.scroll-down span::before{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    background:white;

    border-radius:50%;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    animation:scroll 2s infinite;

}

.lore{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        to bottom,
        #05070d,
        #0b0f18
    );

}

.lore-container{

    width:min(1000px,92%);
    margin:auto;

    text-align:center;

}

.section-subtitle{

    color:var(--primary);

    letter-spacing:6px;

    font-size:13px;

    text-transform:uppercase;

}

.section-title{

    font-family:"Cinzel", serif;

    font-size:3rem;

    margin:20px 0 40px;

    color:var(--text);

}

.lore-text{

    font-size:1.1rem;

    color:var(--text-secondary);

    line-height:1.8;

    margin-bottom:20px;

}

.reveal{

    opacity:0;
    transform:translateY(40px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;
    transform:translateY(0);

}

.factions{

    position:relative;

    padding:120px 0;

    background:#0b0f18;

}

.factions-container{

    width:min(1100px,92%);
    margin:auto;

    text-align:center;

}

.factions-grid{

    margin-top:60px;

    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:25px;

}

.faction-card{

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

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

    border-radius:20px;

    padding:30px;

    text-align:left;

    transition:all .3s ease;

    backdrop-filter:blur(10px);

    position:relative;

    overflow:hidden;

}

.faction-card:hover{

    transform:translateY(-8px);

    border-color:rgba(47,168,255,.4);

    box-shadow:0 20px 50px rgba(0,0,0,.4);

}

.faction-card::before{

    content:"";

    position:absolute;

    top:-50%;
    left:-50%;

    width:200%;
    height:200%;

    background:radial-gradient(
        circle,
        rgba(47,168,255,.12),
        transparent 60%
    );

    opacity:0;

    transition:opacity .4s ease;

}

.faction-card:hover::before{
    opacity:1;
}

.faction-card h3{

    font-family:"Cinzel", serif;

    font-size:1.6rem;

    margin-bottom:10px;

    color:var(--text);

}

.faction-card p{

    color:var(--text-secondary);

    line-height:1.6;

}

@keyframes scroll{

    0%{

        opacity:0;

        top:8px;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        top:24px;

    }

}

@keyframes heroZoom{

    from{
        transform:scale(1.1) translateY(0px);
    }

    to{
        transform:scale(1.15) translateY(-10px);
    }

}

@keyframes lightMove{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-40px,40px);
    }

}