section {
    display: grid;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

section p {
    margin: 0;
    font-size: clamp(1.25rem, 5vw, 2.25rem);
    color: hsl(0 0% 40%);
    text-align: center;
    background: linear-gradient(#f1a2ff, #7E1891);
    color: transparent;
    background-clip: text;
    padding: 10px;
}

.code {
    font-size: clamp(1.5rem, 5vw, 3rem);
    display: flex;
    color: #FCC737;
    background: #7E1891;
    justify-content: center;
    box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
}

.code:hover {
    cursor: grab;
}

.digit {
    display: flex;
    height: 100%;
    padding: 5.5rem 1rem;
}

.digit:focus-visible {
    outline-color: hsl(0 0% 50% / 0.25);
    outline-offset: 1rem;
}

.digit span {
    scale: calc(var(--active, 0) + 0.5);
    filter: blur(calc((1 - var(--active, 0)) * 1rem));
    transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
}

ul {
    padding: 0;
    margin: 0;
}

.digit:first-of-type {
    padding-left: clamp(1rem, 5vw, 5rem);
}

.digit:last-of-type {
    padding-right: clamp(1rem, 5vw, 5rem);
}

:root {
    --lerp-0: 1;
    /* === sin(90deg) */
    --lerp-1: calc(sin(50deg));
    --lerp-2: calc(sin(45deg));
    --lerp-3: calc(sin(35deg));
    --lerp-4: calc(sin(25deg));
    --lerp-5: calc(sin(15deg));
}

.digit:is(:hover, :focus-visible) {
    --active: var(--lerp-0);
}

.digit:is(:hover, :focus-visible)+.digit,
.digit:has(+ .digit:is(:hover, :focus-visible)) {
    --active: var(--lerp-1);
}

.digit:is(:hover, :focus-visible)+.digit+.digit,
.digit:has(+ .digit + .digit:is(:hover, :focus-visible)) {
    --active: var(--lerp-2);
}

.digit:is(:hover, :focus-visible)+.digit+.digit+.digit,
.digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) {
    --active: var(--lerp-3);
}

.digit:is(:hover, :focus-visible)+.digit+.digit+.digit+.digit,
.digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
    --active: var(--lerp-4);
}

.digit:is(:hover, :focus-visible)+.digit+.digit+.digit+.digit+.digit,
.digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
    --active: var(--lerp-5);
}