@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:black;

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

}

#background-video{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.05);

    filter:
        blur(7px)
        brightness(.45);

    transition:
        filter 1.2s ease,
        transform 1.2s ease;

}

#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    transition:1.2s;

}

#enter-screen{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:5;

}

#enter-screen h1{

    color:white;

    font-size:28px;

    font-weight:300;

    letter-spacing:.5px;

    cursor:pointer;

    user-select:none;

    opacity:.75;

    animation:breathe 2.5s ease-in-out infinite;

    transition:
        transform .35s,
        letter-spacing .35s;

}

#enter-screen h1:hover{

    transform:scale(1.05);

    letter-spacing:2px;

}

@keyframes breathe{

    0%,100%{

        opacity:.45;

    }

    50%{

        opacity:1;

    }

}

body.entered #background-video{

    transform:scale(1);

    filter:
        blur(0px)
        brightness(1);

}

body.entered #overlay{

    background:rgba(0,0,0,.08);

}

body.entered #enter-screen{

    opacity:0;

    pointer-events:none;

    transition:1s;

}

#profile{

    position:absolute;

    top:50%;
    left:50%;

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

    display:flex;
    flex-direction:column;
    align-items:center;

    z-index:10;

    pointer-events:none;

}

body.entered #profile{

    pointer-events:auto;

}

.avatar-wrapper{

    width:125px;
    height:125px;

    margin-bottom:20px;

    border-radius:50%;

    position:relative;

    overflow:visible;

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

}

.avatar-wrapper::before{

    content:"";

    position:absolute;

    inset:-15px;

    border-radius:50%;

   background:radial-gradient(
    circle,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.04) 60%,
    transparent 85%
);

    filter:blur(14px);

    opacity:0;

    transition:opacity .55s ease;

    z-index:-1;

}

.avatar-wrapper:hover::before{

    opacity:1;

}

#avatar{

    width:100%;
    height:100%;

    border-radius:50%;

    object-fit:cover;

    display:block;

    transform:translateZ(0);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1);

    box-shadow:
        0 12px 30px rgba(0,0,0,.45);

}

#profile h2{

    color:white;

    font-size:44px;

    font-weight:600;

    margin-bottom:8px;

}

#profile p{

    color:#d9d9d9;

    font-size:20px;

    margin-bottom:25px;

}

.socials{

    display:flex;

    gap:18px;

}

.socials img{

    width:38px;

    filter:drop-shadow(0 2px 8px rgba(0,0,0,.8));

    transition:
        transform .25s ease,
        filter .25s ease;

}

.socials img:hover{

    transform:scale(1.15);

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.25))
        drop-shadow(0 2px 12px rgba(0,0,0,.9));

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

#avatar,
#profile h2,
#profile p,
.socials{

    opacity:0;

    transform:translateY(18px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

body.entered #avatar{

    opacity:1;
    transform:translateY(0);

    transition-delay:.15s;

}

body.entered #profile h2{

    opacity:1;
    transform:translateY(0);

    transition-delay:.35s;

}

body.entered #profile p{

    opacity:1;
    transform:translateY(0);

    transition-delay:.55s;

}

body.entered .socials{

    opacity:1;
    transform:translateY(0);

    transition-delay:.75s;

}

.socials a{

    width:46px;
    height:46px;

    display:flex;

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

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    transition:.25s;

}

.socials a:hover{

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

    transform:translateY(-2px);

}

#profile h2,
#profile p{

    user-select:none;
    cursor:default;

}

#volume-control{

    position:fixed;

    top:20px;
    left:20px;

    display:flex;
    align-items:center;
    gap:16px;

    padding:12px 16px;

    border-radius:18px;

    background:rgba(15,15,15,.45);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:0 8px 30px rgba(0,0,0,.35);

    z-index:999;

    user-select:none;

    opacity:0;
    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .25s ease;

    transform:translateY(-10px);

}

#volume-control.show{

    opacity:.45;

    pointer-events:auto;

    transform:translateY(0);

}

#volume-control:hover{

    opacity:1;

    background:rgba(20,20,20,.65);

}

#volume-icon{

    width:24px;
    height:24px;

    opacity:.9;

    transition:
        transform .25s ease,
        opacity .25s ease;

}

#volume-control:hover #volume-icon{

    opacity:1;

    transform:scale(1.08);

}

#volume-slider{

    -webkit-appearance:none;
    appearance:none;

    width:120px;
    height:5px;

    border-radius:999px;

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

    outline:none;

    cursor:pointer;

}

/* Barra preenchida (Chrome/Edge) */

#volume-slider::-webkit-slider-runnable-track{

    height:5px;

    border-radius:999px;

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

}

/* Botão */

#volume-slider::-webkit-slider-thumb{

    -webkit-appearance:none;

    appearance:none;

    width:14px;
    height:14px;

    border-radius:50%;

    background:white;

    border:none;

    margin-top:-4.5px;

    box-shadow:
        0 0 8px rgba(255,255,255,.25),
        0 2px 8px rgba(0,0,0,.45);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

#volume-slider:hover::-webkit-slider-thumb{

    transform:scale(1.15);

    box-shadow:
        0 0 14px rgba(255,255,255,.45),
        0 3px 12px rgba(0,0,0,.5);

}

#volume-slider:active::-webkit-slider-thumb{

    transform:scale(1.25);

}

.name-container {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.name-container h2 {
    position: relative;
    z-index: 2;

    color: white;
    font-size: 64px;
    font-weight: 800;

    text-shadow:
        0 0 10px rgba(255,255,255,.8),
        0 0 35px rgba(255,255,255,.25);
}


#dust {
    opacity: 0;
    position: absolute;
    z-index: 0;

    width: 280px;
    height: 120px;

    left: 50%;
    top: 50%;

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

    transition:
        opacity 2.5s ease,
        transform 3s cubic-bezier(.22,1,.36,1);

    pointer-events: none;
}

body.entered #dust {
    opacity: 1;

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

    transition-delay: 1.2s;
}