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

:root{

    --primary:#5a4cff;
    --primary-light:#8f85ff;

    --bg:#f7f7f8;

}

body{

    background:var(--bg);

    overflow:hidden;

    font-family:'Inter',sans-serif;

    color:#333;

}

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

.hero{

    position:relative;

    width:100vw;
    height:100vh;

    display:flex;

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

    overflow:hidden;

}

/* =====================
   TREE CANVAS
===================== */

#treeCanvas{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    z-index:1;

    pointer-events:none;

}

/* =====================
   CENTER GROUP
===================== */

.center-group{

    position:relative;

    z-index:10;

    display:flex;

    flex-direction:column;

    align-items:center;

}

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

.logo{

    width:min(620px,48vw);

    user-select:none;

    pointer-events:none;

    position:relative;

    z-index:5;

}

/* glow behind logo */

.center-group::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(90,76,255,.08),
        transparent 70%
    );

    filter:blur(30px);

    z-index:-1;

}

/* =====================
   SOCIALS
===================== */

.socials{

    display:flex;

    gap:14px;

    margin-top:10px;

    flex-wrap:wrap;

    justify-content:center;

}

.social-btn{

    padding:12px 20px;

    border-radius:999px;

    text-decoration:none;

    color:var(--primary);

    font-size:.95rem;

    font-weight:500;

    border:1px solid rgba(90,76,255,.12);

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

    backdrop-filter:blur(12px);

    transition:.3s ease;

    animation:float 4s ease-in-out infinite;

}

.social-btn:hover{

    transform:translateY(-4px);

    border-color:rgba(90,76,255,.4);

    box-shadow:
    0 8px 30px rgba(90,76,255,.15);

}

.social-btn:nth-child(2){
    animation-delay:.4s;
}

.social-btn:nth-child(3){
    animation-delay:.8s;
}

.social-btn:nth-child(4){
    animation-delay:1.2s;
}

/* =====================
   TAGLINE
===================== */

.tagline{

    margin-top:22px;

    font-size:1.15rem;

    opacity:.8;

    text-align:center;

}

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

.mouse-scroll{

    position:absolute;

    bottom:50px;
    left:50%;

    transform:translateX(-50%);

    width:34px;
    height:58px;

    border:2px solid rgba(90,76,255,.25);

    border-radius:40px;

    z-index:20;

}

.wheel{

    width:4px;
    height:10px;

    border-radius:20px;

    background:var(--primary);

    margin:auto;
    margin-top:8px;

    animation:wheel 1.8s infinite;

}

/* =====================
   ANIMATIONS
===================== */

@keyframes wheel{

    0%{
        opacity:1;
        transform:translateY(0);
    }

    100%{
        opacity:0;
        transform:translateY(20px);
    }

}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }

    100%{
        transform:translateY(0);
    }

}