.home-title--vhs {
position: relative;
display: inline-block;
isolation: isolate;
text-shadow:
0.05em 0 0 rgba(255, 0, 120, 0.45),
-0.05em 0 0 rgba(0, 255, 230, 0.45);
animation: home-title-vhs-shadow 0.35s steps(1) infinite;
}
@keyframes home-title-vhs-shadow {
0% {
text-shadow:
0.06em 0 0 rgba(255, 0, 100, 0.5),
-0.04em 0 0 rgba(0, 255, 255, 0.45);
transform: translate(0, 0);
}
33% {
text-shadow:
-0.05em 0.02em 0 rgba(255, 180, 0, 0.55),
0.05em -0.02em 0 rgba(120, 0, 255, 0.4);
transform: translate(1px, 0);
}
66% {
text-shadow:
0.04em -0.02em 0 rgba(0, 255, 200, 0.5),
-0.06em 0.03em 0 rgba(255, 0, 80, 0.45);
transform: translate(-1px, 1px);
}
}
.home-title--vhs::before,
.home-title--vhs::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
pointer-events: none;
font: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-align: inherit;
} .home-title--vhs::before {
z-index: -1;
clip-path: polygon(0 0, 100% 0, 100% 48%, 0 48%);
color: rgba(255, 60, 140, 0.92);
transform: translate(-4px, 0);
animation: home-title-vhs-layer-top 2.6s steps(1) infinite;
} .home-title--vhs::after {
z-index: -1;
clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%);
color: rgba(0, 255, 245, 0.92);
transform: translate(4px, 0);
animation: home-title-vhs-layer-bottom 3.1s steps(1) infinite;
}
@keyframes home-title-vhs-layer-top {
0%,
55%,
100% {
transform: translate(-3px, 0);
opacity: 0.88;
}
8% {
transform: translate(-10px, 2px);
opacity: 1;
}
10% {
transform: translate(6px, -1px);
}
18% {
transform: translate(-7px, 0);
}
42% {
transform: translate(8px, 1px);
opacity: 0.75;
}
44% {
transform: translate(-4px, 0);
}
}
@keyframes home-title-vhs-layer-bottom {
0%,
60%,
100% {
transform: translate(3px, 0);
opacity: 0.88;
}
12% {
transform: translate(11px, -2px);
}
14% {
transform: translate(-5px, 1px);
}
28% {
transform: translate(7px, 0);
}
50% {
transform: translate(-9px, 2px);
opacity: 0.7;
}
52% {
transform: translate(4px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.home-title--vhs,
.home-title--vhs::before,
.home-title--vhs::after {
animation: none;
}
.home-title--vhs {
text-shadow: none;
transform: none;
}
}