/* A name that does not hold still (glitch-name.js): doubled in red and cyan, jolted sideways, and
   now and then torn across, another name showing through underneath. */
.glitch-name {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    white-space: nowrap;
}
.glitch-name__face {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    transform: translateX(var(--glitch-x, 0)) skewX(var(--glitch-skew, 0));
    text-shadow: 2px 0 rgb(255 30 90 / .75), -2px 0 rgb(30 220 255 / .75);
}
.glitch-name::after {
    content: attr(data-echo);
    content: attr(data-echo) / "";
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    clip-path: inset(var(--glitch-cut, 40%) 0 0 0);
    transform: translateX(calc(-1 * var(--glitch-x, 0)));
    text-shadow: -3px 0 rgb(255 30 90 / .8), 3px 0 rgb(30 220 255 / .8);
    pointer-events: none;
}
.glitch-name.is-torn .glitch-name__face { clip-path: inset(0 0 calc(100% - var(--glitch-cut, 40%)) 0); }
.glitch-name.is-torn::after { opacity: .9; }
.glitch-name__spoken {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.motion-reduced .glitch-name__face { transform: none; }
.motion-reduced .glitch-name::after { display: none; }