.logo-splash {
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.1;
    pointer-events: none;
}

.logo-splash svg {
    width: min(50vmin, 500px);
    height: auto;
}

svg #green,
svg #white {
    stroke-width: 0;
    margin: auto;
    fill-opacity: 0;
    stroke-opacity: 1;

    stroke-dasharray: 1;
    stroke-dashoffset: 1;

    animation-fill-mode: forwards;
}

svg #green {
    stroke: #ffffff;
    fill: #b3ff00;

    animation:
        draw 5s ease forwards,
        revealFill 1.5s ease 2.5s forwards,
        fadeStroke 1.5s ease 2.5s forwards;
}

svg #white {
    stroke: #ffffff;
    fill: #ffffff;

    animation:
        draw 5s ease forwards,
        revealFill 1.5s ease 2.5s forwards,
        fadeStroke 1.5s ease 2.5s forwards;
}

@keyframes draw {
    from {
      stroke-dashoffset: 1;
      stroke-width: 0;
      stroke-opacity: 0;
    }

    to {
      stroke-dashoffset: 0;
      stroke-width: 1px;
      stroke-opacity: 1;
    }
}

@keyframes revealFill {
    from {
        fill-opacity: 0;
    }

    to {
        fill-opacity: 1;
    }
}

@keyframes fadeStroke {
    from {
        stroke-opacity: 1;
    }

    to {
        stroke-opacity: 0;
    }
}