:root {
    --graphite: #0b1220;
    --paper: #f7f5f2;
    --accent: #5fd1c4;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

html {
    background: var(--graphite);
}

body {
    overflow: hidden;
    color: var(--paper);
    -webkit-font-smoothing: antialiased;
}

.stage {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 100svh;
    place-items: center;
    overflow: hidden;
    background: var(--graphite);
}

.brand {
    position: relative;
    width: clamp(8.6rem, 15.5vw, 12.6rem);
    aspect-ratio: 1;
    margin: 0;
}

.brand__mark {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter:
        drop-shadow(0 1.5rem 2.8rem rgba(0, 0, 0, .42))
        drop-shadow(0 0 1.4rem rgba(95, 209, 196, .07));
}

.brand__a,
.brand__l {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-width: 1.8;
    stroke-linejoin: miter;
    fill-opacity: 0;
}

.brand__a {
    fill: var(--paper);
    stroke: var(--paper);
    animation:
        trace-mark 1.35s cubic-bezier(.72, 0, .22, 1) .15s forwards,
        fill-mark .7s ease-out 1.05s forwards;
}

.brand__l {
    fill: var(--accent);
    stroke: var(--accent);
    animation:
        trace-mark 1.05s cubic-bezier(.72, 0, .22, 1) .52s forwards,
        fill-mark .65s ease-out 1.22s forwards;
}

@keyframes trace-mark {
    to { stroke-dashoffset: 0; }
}

@keyframes fill-mark {
    to { fill-opacity: 1; }
}

@media (max-width: 640px) {
    .brand {
        width: clamp(8rem, 38vw, 10rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand,
    .brand__mark,
    .brand__a,
    .brand__l {
        animation: none;
    }

    .brand__a,
    .brand__l {
        fill-opacity: 1;
        stroke-dashoffset: 0;
    }
}