.animated-heading .headline-wrapper > * > span > span:after {
    text-shadow: 16px 0px 16px rgba(0, 0, 0, 0.15);
    color: #ffffff;
}
 
.animated-heading .headline-wrapper > * > span > span {
    display: inline-block;
    position: relative;
    transform-style: preserve-3d;
    perspective: 550px;
    z-index: 1;
    opacity: 1;
    white-space: pre-wrap;
}
 
.animated-heading .headline-wrapper > * > span {
    white-space: normal;
}
 
.animated-heading .headline-wrapper > * > span > span:before,
.animated-heading .headline-wrapper > * > span > span:after {
    position: absolute;
    content: attr(data-letter);
    line-height: inherit;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    transition: all 0.3s;
}
 
.animated-heading .headline-wrapper > * > span > span:before {
    color: rgba(0, 0, 0, 0.12);
}
 
.animated-heading .headline-wrapper > * > span > span:before,
.animated-heading .headline-wrapper > * > span > span:after {
    transform-origin: var(--origin);
}
 
.animated-heading .headline-wrapper > * > span > span:hover:before {
    transform: var(--hover-before);
}
 
.animated-heading .headline-wrapper > * > span > span:hover:after {
    transform: var(--hover-after);
}