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

html,
body {
    width: 100%;
    height: 100%;
	    overflow: hidden;
}

body {
    background: #000;
    color: #fff;
    font-family: "Inter Tight", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page {
    width: 100%;
    height: 100vh;

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

.logo {
 position: relative;

    font-size: clamp(56px, 8vw, 96px);
    font-weight: 500;

    letter-spacing: -0.02em;
    line-height: .9;

    white-space: nowrap;

    opacity: 0;
    filter: blur(4px);

    will-change: opacity, filter;

}

body.is-loaded .logo {
    animation: logoReveal 2s cubic-bezier(.22,1,.36,1) .11s forwards
}

.logo span{

    position:absolute;

    top:-0.18em;
    right:-0.38em;

    font-size:.18em;
    font-weight:700;

}

@keyframes logoReveal{

    0%{

        opacity:0;
        filter:blur(4px);

    }

    100%{

        opacity:1;
        filter:blur(0);

    }

}