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

body{
    background:
        linear-gradient(
            rgba(0,0,0,.65),
            rgba(0,0,0,.85)
        ),
        url("assets/background.webp");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:white;
    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
}



.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:25px;
    background:#000;
    border-bottom:1px solid rgba(255,255,255,.25);
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:1000;
    box-sizing:border-box;
}

.nav-links{
    display:flex;
    gap:50px;
}

.nav-links a{
    color:white;
    text-decoration:none;
    letter-spacing:2px;
    font-size:14px;
    transition:.3s;
}

.nav-links a:hover{
    opacity:.7;
}



.hero{
    min-height:100vh;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    position:relative;
}

.bg-text{
    position:absolute;

    font-family:'Bebas Neue',sans-serif;

    font-size:20rem;

    color:white;

    opacity:.03;

    user-select:none;
}

.title{
    font-family:'Bebas Neue',sans-serif;

    font-size:8rem;

    letter-spacing:8px;

    z-index:2;
}

.subtitle{
    margin-top:10px;

    letter-spacing:4px;

    opacity:.8;

    z-index:2;
}

.member-btn{
    margin-top:40px;

    background:transparent;

    color:white;

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

    padding:18px 40px;

    cursor:pointer;

    letter-spacing:3px;

    transition:.3s;

    z-index:2;
}

.member-btn:hover{
    border-color:white;

    transform:translateY(-4px);

    box-shadow:0 0 20px rgba(255,255,255,.15);
}



@media(max-width:900px){

    .title{
        font-size:4rem;
    }

    .bg-text{
        font-size:10rem;
    }

    .nav-links{
        gap:20px;
        flex-wrap:wrap;
    }
}


body{
    animation: pageFade 1s ease;
}

@keyframes pageFade{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.members-hero{
min-height:40vh;


display:flex;
flex-direction:column;

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

text-align:center;


}

.members-title{
font-family:'Bebas Neue',sans-serif;
font-size:6rem;
letter-spacing:8px;
}

.members-subtitle{
letter-spacing:3px;
opacity:.8;
}

.member-grid{
width:90%;
margin:auto;


display:grid;
grid-template-columns:1fr 1fr;

gap:110px;

padding-bottom:100px;


}

.member-card{
text-decoration:none;
color:white;


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

overflow:hidden;

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

transition:.4s;


}

.member-card:hover{
    transform:translateY(-3px);

    border-color:white;

    box-shadow:0 0 25px rgba(255,255,255,.15);
}


.member-image{
height:450px;
overflow:hidden;
}

.member-image img{
width:100%;
height:100%;
object-fit:cover;


transition:.5s;


}

.member-card:hover img{
    transform:scale(1.03);
}

.member-info{
padding:25px;
text-align:center;
}

.member-info h2{
font-family:'Bebas Neue',sans-serif;
letter-spacing:4px;
}

@media(max-width:900px){


.member-grid{
    grid-template-columns:1fr;
}


}


.member-card{
    opacity:100;

    filter:blur(0px);

    transition:
        opacity 1s ease,
        transform 1s ease,
        filter 1s ease;
}

.top-reveal{
    transform:translateY(-100px);
}

.bottom-reveal{
    transform:translateY(40px);
    opacity:0;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.6s ease;
}

.bottom-reveal.show{
    transform:translateY(0);
    opacity:1;
}

.member-card.show{
    opacity:1;

    transform:translateY(0);

    filter:blur(0);
}
.profile-section{

    width:90%;

    max-width:1400px;

    margin:auto;

    padding-top:150px;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:40px;
}

.profile-image{

    width:774px;

    flex-shrink:0;

    border:1px solid white;

    overflow:hidden;
}

.profile-image img{

    width:100%;

    display:block;
}

.profile-content{

    max-width:800px;
}

.profile-content h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:5rem;

    letter-spacing:6px;

    margin-bottom:15px;
}

.profile-content p{

    line-height:1.8;

    margin-bottom:25px;
}

.info-row{

    display:flex;

    gap:20px;
}

.social-box,
.skills-box{

    flex:1;

    border:1px solid white;

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

    padding:20px;
}

.social-box h3,
.skills-box h3{

    margin-bottom:15px;

    letter-spacing:3px;
}

.social-box ul,
.skills-box ul{

    list-style:none;
}

.social-box li,
.skills-box li{

    padding:6px 0;
}

.social-box a{

    color:white;

    text-decoration:none;
}

.gallery-grid{
    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:25px;
}

.gallery-grid img{
    width:100%;

    height:auto;

    object-fit:contain;

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

    transition:.4s;
}

@media(max-width:900px){

    .gallery-grid{
        grid-template-columns:repeat(2, 1fr);
    }

}

@media(max-width:600px){

    .gallery-grid{
        grid-template-columns:1fr;
    }

}

.gallery-section{
    width:90%;
    margin:auto;

    padding:100px 0 200px 0;
}

.name-header{
    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:15px;
}

.member-icon{
    width:150px;
    height:150px;

    object-fit:contain;
}

.name-header h1{
    margin:0;
}



.about-hero{

    min-height:60vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;
}

.about-hero h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:7rem;

    letter-spacing:8px;

    z-index:2;
}

.about-hero p{

    letter-spacing:3px;

    opacity:.8;

    z-index:2;
}

.about-section{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:80px 0;
}

.about-section h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:3rem;

    letter-spacing:4px;

    margin-bottom:20px;
}

.about-section p{

    line-height:1.8;

    max-width:900px;
}



.service-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:25px;

    margin-top:30px;
}

.service-card{

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

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

    padding:30px;

    text-align:center;

    transition:.3s;
}

.service-card:hover{

    border-color:white;

    transform:translateY(-3px);
}

.service-card h3{

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:3px;

    margin-bottom:10px;
}



.join-section{

    width:90%;

    max-width:1200px;

    margin:auto;

    text-align:center;

    padding:120px 0 200px 0;
}

.join-section h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:4rem;

    letter-spacing:6px;
}

.join-btn{

    display:inline-block;

    margin-top:30px;

    color:white;

    text-decoration:none;

    border:1px solid white;

    padding:18px 40px;

    transition:.3s;
}

.join-btn:hover{

    background:white;

    color:black;
}

@media(max-width:900px){

    .service-grid{

        grid-template-columns:1fr;
    }

}



.timeline-section{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:100px 0;
}

.timeline-section h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:3rem;

    letter-spacing:4px;

    margin-bottom:60px;

    text-align:center;
}

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;
}

.timeline::before{

    content:"";

    position:absolute;

    left:20px;

    top:0;

    width:2px;

    height:100%;

    background:rgba(255,255,255,.2);
}

.timeline-item{

    position:relative;

    padding-left:70px;

    margin-bottom:60px;
}

.timeline-dot{

    position:absolute;

    left:11px;

    top:5px;

    width:20px;

    height:20px;

    border:2px solid white;

    border-radius:50%;

    background:black;
}

.timeline-content{

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

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

    padding:25px;

    transition:.3s;
}

.timeline-content:hover{

    border-color:white;

    transform:translateX(5px);
}

.timeline-content h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:2rem;

    letter-spacing:3px;

    margin-bottom:10px;
}



.founders-section{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:50px 0 100px 0;

    text-align:center;
}

.founders-section h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:3rem;

    letter-spacing:4px;

    margin-bottom:50px;
}

.founders-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;
}

.founder-card{

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

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

    padding:35px;

    transition:.3s;
}

.founder-card:hover{

    border-color:white;

    transform:translateY(-3px);
}

.founder-card img{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid white;

    margin-bottom:20px;
}

.founder-card h3{

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:3px;

    font-size:2rem;

    margin-bottom:10px;
}

.founder-card p{

    line-height:1.6;

    opacity:.85;
}



.apply-hero{

    min-height:50vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;
}

.apply-hero h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:7rem;

    letter-spacing:8px;

    z-index:2;
}

.apply-hero p{

    max-width:700px;

    opacity:.8;

    z-index:2;
}

.apply-section{

    width:90%;

    max-width:1000px;

    margin:auto;

    padding:50px 0 250px 0;
}

.apply-card{

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

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

    padding:50px;

    text-align:center;
}

.apply-card h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:3rem;

    letter-spacing:4px;

    margin-bottom:25px;
}

.apply-card p{

    line-height:1.8;

    margin-bottom:20px;
}

.discord-btn{

    display:inline-block;

    margin-top:20px;

    padding:18px 45px;

    border:1px solid white;

    color:white;

    text-decoration:none;

    letter-spacing:2px;

    transition:.3s;
}

.discord-btn:hover{

    background:white;

    color:black;
}



.gallery-hero{

    min-height:45vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;
}

.gallery-hero h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:7rem;

    letter-spacing:8px;

    z-index:2;
}

.gallery-hero p{

    max-width:700px;

    opacity:.8;

    z-index:2;
}



.gallery-page{

    width:90%;

    max-width:1400px;

    margin:auto;

    padding:50px 0 250px 0;
}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:25px;
}

.gallery-grid img{
    width:100%;

    height:auto;

    object-fit:contain;

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

    transition:.4s;
}

.gallery-grid img:hover{

    transform:scale(1.02);

    border-color:white;

    box-shadow:0 0 20px rgba(255,255,255,.15);
}



@media(max-width:900px){

    .gallery-grid{

        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:600px){

    .gallery-grid{

        grid-template-columns:1fr;
    }
}

.coming-section{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:120px 20px;
    text-align:center;
}

.coming-container{
    max-width:900px;
}

.coming-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:6rem;
    letter-spacing:6px;
    margin-bottom:10px;
}

.coming-subtitle{
    opacity:.8;
    letter-spacing:2px;
    margin-bottom:40px;
}

.coming-box{
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.03);
    padding:40px;
    text-align:left;
}

.coming-box h2{
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:3px;
    margin-bottom:10px;
    margin-top:20px;
}

.coming-box p{
    line-height:1.8;
    margin-bottom:15px;
    opacity:.9;
}

.warning{
    margin-top:20px;
    text-align:center;
    font-weight:bold;
    letter-spacing:2px;
    color:#ff4d4d;
}

.creators-page{
    padding-top:120px;
    width:90%;
    margin:auto;
    text-align:center;
}

.creators-header h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:6rem;
    letter-spacing:6px;
}

.creators-header p{
    opacity:.8;
    margin-bottom:20px;
}


#creatorSearch{
    padding:12px 20px;
    width:300px;
    border:1px solid rgba(255,255,255,.3);
    background:transparent;
    color:white;
    outline:none;
    text-align:center;
    margin-bottom:60px;
}


.section-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:2.5rem;
    letter-spacing:4px;
    margin:40px 0 20px;
}


.creator-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
    margin-bottom:80px;
}


.creator-card{
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.03);
    padding:15px;
    transition: border-color 0.3s ease, transform 0.3s ease;
    will-change:transform;
    overflow:hidden;
    display:block;
    text-decoration:none;
    color:white;
}


.creator-card:hover{
    border-color:white;
    transform:translateY(-4px);
}


.creator-card img{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
    transition: transform 0.4s ease;
}

.creator-card:hover img{
    transform:scale(1.02);
}


.creator-card h2{
    margin-top:10px;
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:3px;
}


@media(max-width:900px){
    .creator-grid{
        grid-template-columns:1fr;
    }
}

.creators-hero{
    min-height:40vh;

    display:flex;
    flex-direction:column;

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

    text-align:center;
}

.creator-search{
    margin-top:30px;

    width:350px;

    padding:15px 20px;

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

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

    color:white;

    outline:none;
}

.featured-section,
.all-creators-section{
    width:90%;
    margin:auto;
    padding-bottom:100px;
}

.featured-title{
    font-family:'Bebas Neue',sans-serif;

    font-size:3rem;

    letter-spacing:4px;

    margin-bottom:25px;

    text-align:center;
}

.creator-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:40px;
}

/* Override member hover effect */
.creator-card{
    text-decoration:none;
    color:white;

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

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

    overflow:hidden;

    transition:border-color .3s;
}

.creator-card:hover{
    border-color:white;

    transform:none !important;
    box-shadow:none !important;
}

@media(max-width:900px){

    .creator-grid{
        grid-template-columns:1fr;
    }

    .creator-search{
        width:90%;
    }

}


.audio-btn{

    display:flex;

    align-items:flex-end;

    gap:3px;

    background:none;

    border:none;

    cursor:pointer;

    margin-right:15px;
}

.audio-btn span{

    width:4px;

    background:white;

    border-radius:3px;

    transition:.2s;
}

.audio-btn span:nth-child(1){
    height:12px;
}

.audio-btn span:nth-child(2){
    height:20px;
}

.audio-btn span:nth-child(3){
    height:16px;
}

.audio-btn span:nth-child(4){
    height:10px;
}

.audio-btn:hover span{

    opacity:.7;
}

.wave-playing span{

    animation:wave .5s infinite alternate;
}

.wave-playing span:nth-child(2){
    animation-delay:.1s;
}

.wave-playing span:nth-child(3){
    animation-delay:.2s;
}

.wave-playing span:nth-child(4){
    animation-delay:.3s;
}

@keyframes wave{

    from{
        transform:scaleY(.5);
    }

    to{
        transform:scaleY(1.5);
    }

}

.audio-btn{
    display:flex;
    align-items:flex-end;
    gap:3px;

    background:none;
    border:none;

    cursor:pointer;

    margin-right:15px;
}

.audio-btn span{
    width:4px;
    height:15px;

    background:white;

    border-radius:2px;
}

.wave-playing span{
    animation:wave .5s infinite alternate;
}

.wave-playing span:nth-child(2){
    animation-delay:.1s;
}

.wave-playing span:nth-child(3){
    animation-delay:.2s;
}

.wave-playing span:nth-child(4){
    animation-delay:.3s;
}
.wave-playing span:nth-child(5){
    animation-delay:.4s;
}
.wave-playing span:nth-child(6){
    animation-delay:.5s;
}
.wave-playing span:nth-child(7){
    animation-delay:.6s;
}
.wave-playing span:nth-child(8){
    animation-delay:.7s;
}
.wave-playing span:nth-child(9){
    animation-delay:.3s;
}


@keyframes wave{
    from{
        transform:scaleY(.5);
    }

    to{
        transform:scaleY(1.5);
    }
}

.creator-badge{
    display:inline-block;

    margin-bottom:20px;

    padding:8px 16px;

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

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

    letter-spacing:2px;

    font-size:12px;
}

.intro-overlay{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:black;

    display:flex;

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

    z-index:99999;

    cursor:pointer;

    transition:opacity .8s ease;
}

.intro-overlay.fade-out{
    opacity:0;

    pointer-events:none;
}

.intro-content{
    text-align:center;
}

.intro-content h1{
    font-family:'Bebas Neue',sans-serif;

    font-size:8rem;

    letter-spacing:10px;

    margin-bottom:15px;
}

.intro-content p{
    opacity:.7;

    letter-spacing:3px;
}

.intro-overlay{
    position:fixed;
    inset:0;

    background:#000;

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

    z-index:99999;

    cursor:pointer;

    opacity:1;
    transition:opacity .8s ease;
}

.intro-overlay.fade-out{
    opacity:0;
}

.intro-content{
    text-align:center;
}

.intro-content h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:8rem;
    letter-spacing:8px;
}

.intro-content p{
    margin-top:10px;
    opacity:.7;
}

.snowflake{
    position:absolute;
    top:-10%;
    color:white;
    opacity:.7;
    animation:snowFall linear infinite;
}

.snow-container{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.snowflake{
    position:absolute;
    top:-10%;
    color:white;
    opacity:.7;
    animation:snowFall linear infinite;
}

@keyframes snowFall{
    from{
        transform:translateY(-100px) rotate(0deg);
    }

    to{
        transform:translateY(110vh) rotate(360deg);
    }
}