._hpdemo {
    --w: 800px;
    --h: calc(var(--w) * 6/16);
    width: var(--w);
    height: var(--h);
}
._hpdemo * {
    box-sizing: border-box;
    text-decoration-skip-ink: none;
    text-decoration-skip: none;
}
._hpdemo > div {
    --base: calc(var(--h) * 11/240);
    position: relative;
    inset: 0;
    width: var(--w);
    height: var(--h);
    font-family: Helvetica, sans-serif;
    font-size: var(--base);
}
._hpdemo > div > main {
    --r: 37.5deg;
    width: var(--w);
    height: var(--h);
    position: relative;
    inset: 0;
    perspective: calc(var(--h) * 3);
    perspective-origin: center bottom;
}
._hpdemo > div > main > div {
    --self-w: 52em;
    --self-h: 20em;
    --t: rotateX(var(--r));
    --step-y: 0;
    --step-c: 0;
    --step-u: 0;
    --step-r: 0;
    --label-shift: 0;
    width: var(--self-w);
    height: calc(var(--self-h) - var(--label-shift) * 2em);
    padding: 1em;
    position: absolute;
    inset: calc(var(--h)/2 - var(--self-h)/2) 0 0 calc(var(--w)/2 - var(--self-w)/2);
    transform: translateZ(calc(
        0em
        /* if u, then (7n)em */
        + var(--step-u) * var(--n) * 7em
        /* else... */
        + (1 - var(--step-u)) * (
            -5em
            /* if c, raise 3em */
            + var(--step-c) * 3em
            /* raise (y)em */
            + 2em * var(--step-y)
        )
    )) translateY(calc(
        0em
        /* if u, push back (7n)em */
        - var(--step-u) * var(--n) * 7em
        /* if c, push back 7em */
        - var(--step-c) * 7em
    )) var(--t) translateX(calc(
        0em
        + var(--step-r) * 2 * var(--self-w)
    ));
    transition: all 0.5s;
}
._hpdemo > div > main > div > span {
    font-size: 7em;
    color: transparent;
}
._hpdemo > div > main > div > label {
    color: initial;
    font-size: var(--base);
    position: absolute;
    bottom: 0;
    right: 0;
}

._hpdemo > div > main > div.h,
._hpdemo > div > main > div.q > label {
    opacity: 0;
}
._hpdemo > div > main > div.q {
    background-color: transparent !important;
    outline-color: transparent !important;
}
._hpdemo > div > main > div.f {
    --r: 0deg;
}