@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap");

body {
    -webkit-font-smoothing: antialiased;
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
    display: grid;
    place-items: center;
    color: white;
    background: #02040c;

    font-weight: 500;
    font-style: normal;
}

h1.logo {
    position: relative;
}



.m-auto {
    max-width: 500px;
    margin: auto;
}

h1.logo, h1.logo::after {
    margin: 0;
    font-size: clamp(2rem, 1rem + 3vw, 12rem);
    background: linear-gradient(90deg in lch longer hue, oklch(0.737 0.158 235.851) 0 0);
    /*   background: linear-gradient(90deg in hsl longer hue, hsl(0 100% 70%) 0 0); */
    background-size: 500% 100%;
    animation: blend 30s infinite linear;
    color: transparent;
    background-clip: text;
}

h1.logo::after {
    content: 'hello.';
    filter: blur(8px);
    position: absolute;
    /*   z-index: -1; */
    left: 0;
    mix-blend-mode: plus-lighter;
}

@keyframes blend {
    to { background-position: 500% 100%; }
}