/* The truthful layout lives in base.css. These effects are normally dormant. */
[data-glitch] { position: relative; }
.glitch-character { display: inline-block; }
html[data-signal="glitch"] [data-glitch] { animation: text-fault var(--glitch-period, 9s) steps(1, end) var(--glitch-delay, -3s) infinite; }
[data-glitch][data-text]::before, [data-glitch][data-text]::after { position: absolute; inset: 0; content: attr(data-text); pointer-events: none; opacity: 0; }
html[data-signal="glitch"] [data-glitch][data-text]::before { animation: ghost-a var(--glitch-period, 9s) steps(1, end) var(--glitch-delay, -3s) infinite; color: var(--trans-blue); }
html[data-signal="glitch"] [data-glitch][data-text]::after { animation: ghost-b var(--glitch-period, 9s) steps(1, end) var(--glitch-delay, -3s) infinite; color: var(--lesbian-orange); }
html[data-signal="glitch"] [data-glitch="image"] { animation: image-fault var(--glitch-period, 9s) steps(1, end) var(--glitch-delay, -8s) infinite; }
html[data-signal="glitch"] [data-glitch="frame"] { animation: frame-fault var(--glitch-period, 9s) steps(3, end) var(--glitch-delay, -3s) infinite; }

html[data-signal="broken"] [data-glitch] { animation: broken-text-fault var(--glitch-broken-period, 5s) steps(1, end) var(--glitch-delay, -3s) infinite; }
html[data-signal="broken"] [data-glitch][data-text]::before { animation: broken-ghost-a var(--glitch-broken-period, 5s) steps(1, end) var(--glitch-delay, -3s) infinite; color: var(--trans-blue); }
html[data-signal="broken"] [data-glitch][data-text]::after { animation: broken-ghost-b var(--glitch-broken-period, 5s) steps(1, end) var(--glitch-delay, -3s) infinite; color: var(--lesbian-orange); }
html[data-signal="broken"] [data-glitch="image"] { animation: broken-image-fault var(--glitch-broken-period, 5s) steps(1, end) var(--glitch-delay, -8s) infinite; }

@keyframes text-fault { 0%, 76%, 100% { transform: none; } 78% { transform: translate(var(--glitch-x, 1px), var(--glitch-y, -1px)); } 81% { transform: none; } }
@keyframes image-fault { 0%, 77%, 100% { transform: none; clip-path: inset(0); } 79% { transform: translateX(var(--glitch-x, 2px)); clip-path: inset(34% 0 43% 0); } 82% { transform: none; clip-path: inset(0); } }
@keyframes ghost-a { 0%, 76%, 100% { opacity: 0; transform: none; } 78% { opacity: .7; transform: translateX(calc(var(--glitch-x, 1px) * -1)); clip-path: inset(10% 0 62% 0); } 81% { opacity: 0; } }
@keyframes ghost-b { 0%, 76%, 100% { opacity: 0; transform: none; } 79% { opacity: .6; transform: translateX(var(--glitch-x, 1px)); clip-path: inset(63% 0 9% 0); } 82% { opacity: 0; } }
@keyframes frame-fault { 0%, 43%, 100% { transform: none; filter: none; } 44% { transform: translateX(var(--glitch-x, 1px)) skewX(.8deg); filter: contrast(1.08); } 46% { transform: translateX(calc(var(--glitch-x, 1px) * -1)); filter: none; } 48% { transform: none; } }
@keyframes broken-text-fault { 0%, 67%, 100% { transform: none; } 70% { transform: translate(var(--glitch-broken-x, 4px), var(--glitch-broken-y, -4px)); } 74% { transform: translate(var(--glitch-x, -2px), var(--glitch-y, 2px)); } 78% { transform: none; } }
@keyframes broken-image-fault { 0%, 66%, 100% { transform: none; clip-path: inset(0); } 70% { transform: translateX(var(--glitch-broken-x, 5px)); clip-path: inset(18% 0 54% 0); } 75% { transform: translateX(var(--glitch-x, -2px)); clip-path: inset(62% 0 12% 0); } 79% { transform: none; clip-path: inset(0); } }
@keyframes broken-ghost-a { 0%, 67%, 100% { opacity: 0; transform: none; } 70%, 74% { opacity: .8; transform: translateX(calc(var(--glitch-broken-x, 4px) * -1)); clip-path: inset(6% 0 52% 0); } 78% { opacity: 0; } }
@keyframes broken-ghost-b { 0%, 67%, 100% { opacity: 0; transform: none; } 72%, 76% { opacity: .75; transform: translateX(var(--glitch-broken-x, 4px)); clip-path: inset(49% 0 8% 0); } 79% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}