document.addEventListener('DOMContentLoaded', function () {
// --- MENU GLITCH (unchanged behavior) ---
const glitchMap = {
'attending': 'CHOOSE GAME',
'at the convention': 'EXPLORE MAP',
'charity': 'INSERT COIN',
'accommodation': 'SAVEPOINTS',
'get involved': 'START QUEST',
'dealers den': 'ITEM SHOP',
'coming soon': 'DOWNLOADING PATCH',
};
document.querySelectorAll('.glitch-nav .menu-text').forEach(function (span) {
if (span.dataset.glitchInit === '1') return;
const original = span.textContent.trim();
const alt = glitchMap[original.toLowerCase()] || original.toUpperCase();
span.dataset.glitchInit = '1';
span.innerHTML =
'' +
'';
});
// --- GENERAL INLINE GLITCH (new) ---
document.querySelectorAll('.glitch-inline').forEach(function (el) {
if (el.dataset.glitchInit === '1') return;
const original = el.textContent.trim();
const alt = glitchMap[original.toLowerCase()] || original.toUpperCase();
el.dataset.glitchInit = '1';
el.innerHTML =
'' + original + '' +
'' + alt + '';
});
});
/* =========================
NAV GLITCH
========================= */
/* Link container for noise overlay */
.glitch-nav .awb-menu__main-a {
position: relative;
overflow: visible;
}
/* Wrapper around both base + glitch */
.glitch-nav .menu-text {
position: relative;
display: inline-block;
}
/* Base text (default) */
.glitch-nav .menu-text__base {
position: relative;
display: inline-block;
}
/* Glitch text (replacement label) */
.glitch-nav .menu-text__glitch {
position: relative;
display: none; /* only appears on hover */
font-family: 'Press Start 2P', monospace;
text-transform: uppercase;
color: #009BDF;
font-size: 0.8em;
}
/* Responsive glitch font size */
@media (max-width: 1024px) {
.glitch-nav .menu-text__glitch {
font-size: 0.75em;
}
}
@media (max-width: 800px) {
.glitch-nav .menu-text__glitch {
font-size: 10px;
}
}
/* Hover swap */
.glitch-nav .awb-menu__li:hover .menu-text__base {
display: none;
}
.glitch-nav .awb-menu__li:hover .menu-text__glitch {
display: inline-block;
}
/* Glitch layers */
.glitch-nav .menu-text__glitch::before,
.glitch-nav .menu-text__glitch::after {
content: attr(data-glitch);
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
pointer-events: none;
opacity: 0;
}
/* Color channels */
.glitch-nav .menu-text__glitch::before {
text-shadow: -1px 0 0 #009BDF;
}
.glitch-nav .menu-text__glitch::after {
text-shadow: 1px 0 0 #FF2F92;
}
/* Only run glitch visuals when accessibility mode is NOT active */
body:not(.mdp-readabler-stop-animations) .glitch-nav .awb-menu__li:hover .menu-text__glitch::before {
opacity: 1;
animation:
glitch-burst-1 0.25s steps(2, end) 0s 1,
glitch-soft-1 1.6s linear 0.25s infinite;
}
body:not(.mdp-readabler-stop-animations) .glitch-nav .awb-menu__li:hover .menu-text__glitch::after {
opacity: 1;
animation:
glitch-burst-2 0.25s steps(2, end) 0s 1,
glitch-soft-2 1.6s linear 0.25s infinite;
}
/* Noise overlay */
.glitch-nav .awb-menu__main-a::after {
content: "";
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(
0deg,
rgba(0,155,223,0.18) 0px,
rgba(0,155,223,0.18) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
}
/* Only run noise shimmer when accessibility mode is NOT active */
body:not(.mdp-readabler-stop-animations) .glitch-nav .awb-menu__li:hover > .awb-menu__main-a::after {
opacity: 0.14;
animation:
noise-burst 0.25s steps(2, end) 0s 1,
noise-soft 1.8s linear 0.25s infinite;
}
/* =========================
INLINE GLITCH
========================= */
.glitch-inline {
position: relative;
display: inline-block;
}
/* Base text */
.glitch-inline .glitch-inline__base {
position: relative;
display: inline-block;
}
/* Glitch text (shown on hover/focus) */
.glitch-inline .glitch-inline__glitch {
position: relative;
display: none;
font-family: 'Press Start 2P', monospace;
text-transform: uppercase;
color: #009BDF;
font-size: 0.9em;
}
/* Swap on hover + keyboard focus */
.glitch-inline:hover .glitch-inline__base,
.glitch-inline:focus .glitch-inline__base,
.glitch-inline:focus-within .glitch-inline__base {
display: none;
}
.glitch-inline:hover .glitch-inline__glitch,
.glitch-inline:focus .glitch-inline__glitch,
.glitch-inline:focus-within .glitch-inline__glitch {
display: inline-block;
}
/* Glitch layers */
.glitch-inline .glitch-inline__glitch::before,
.glitch-inline .glitch-inline__glitch::after {
content: attr(data-glitch);
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
pointer-events: none;
opacity: 0;
}
/* Color channels */
.glitch-inline .glitch-inline__glitch::before {
text-shadow: -1px 0 0 #009BDF;
}
.glitch-inline .glitch-inline__glitch::after {
text-shadow: 1px 0 0 #FF2F92;
}
/* Only run inline glitch visuals when accessibility mode is NOT active */
body:not(.mdp-readabler-stop-animations) .glitch-inline:hover .glitch-inline__glitch::before,
body:not(.mdp-readabler-stop-animations) .glitch-inline:focus .glitch-inline__glitch::before,
body:not(.mdp-readabler-stop-animations) .glitch-inline:focus-within .glitch-inline__glitch::before {
opacity: 1;
animation:
glitch-burst-1 0.25s steps(2, end) 0s 1,
glitch-soft-1 1.6s linear 0.25s infinite;
}
body:not(.mdp-readabler-stop-animations) .glitch-inline:hover .glitch-inline__glitch::after,
body:not(.mdp-readabler-stop-animations) .glitch-inline:focus .glitch-inline__glitch::after,
body:not(.mdp-readabler-stop-animations) .glitch-inline:focus-within .glitch-inline__glitch::after {
opacity: 1;
animation:
glitch-burst-2 0.25s steps(2, end) 0s 1,
glitch-soft-2 1.6s linear 0.25s infinite;
}
/* =========================
ACCESSIBILITY HARD STOP
Completely remove motion/glitch layers when plugin class is active
========================= */
body.mdp-readabler-stop-animations .glitch-nav .menu-text__glitch::before,
body.mdp-readabler-stop-animations .glitch-nav .menu-text__glitch::after,
body.mdp-readabler-stop-animations .glitch-inline .glitch-inline__glitch::before,
body.mdp-readabler-stop-animations .glitch-inline .glitch-inline__glitch::after,
body.mdp-readabler-stop-animations .glitch-nav .awb-menu__main-a::after {
content: none !important;
animation: none !important;
opacity: 0 !important;
transform: none !important;
clip-path: none !important;
text-shadow: none !important;
background: none !important;
filter: none !important;
}
body.mdp-readabler-stop-animations .glitch-nav .menu-text__glitch,
body.mdp-readabler-stop-animations .glitch-inline .glitch-inline__glitch {
text-shadow: none !important;
filter: none !important;
}
/* =========================
KEYFRAMES
========================= */
@keyframes glitch-burst-1 {
0% { transform: translate(0, 0); clip-path: inset(0 0 80% 0); }
25% { transform: translate(-3px, -2px); clip-path: inset(10% 0 40% 0); }
50% { transform: translate(3px, 2px); clip-path: inset(40% 0 20% 0); }
75% { transform: translate(-2px, 1px); clip-path: inset(5% 0 65% 0); }
100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes glitch-burst-2 {
0% { transform: translate(0, 0); clip-path: inset(80% 0 0 0); }
25% { transform: translate(2px, 2px); clip-path: inset(40% 0 10% 0); }
50% { transform: translate(-3px, -1px); clip-path: inset(20% 0 40% 0); }
75% { transform: translate(1px, -2px); clip-path: inset(65% 0 5% 0); }
100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes glitch-soft-1 {
0%, 70%, 100% { transform: translate(0, 0); }
40% { transform: translate(-0.5px, 0); }
55% { transform: translate(0.5px, 0); }
}
@keyframes glitch-soft-2 {
0%, 70%, 100% { transform: translate(0, 0); }
40% { transform: translate(0.5px, 0.5px); }
55% { transform: translate(-0.5px, 0); }
}
@keyframes noise-burst {
0% { transform: translate(0, 0); }
50% { transform: translate(-2px, 1px); }
100% { transform: translate(2px, -1px); }
}
@keyframes noise-soft {
0%, 100% { transform: translate(0, 0); }
40% { transform: translate(-0.5px, 0.5px); }
60% { transform: translate(0.5px, -0.5px); }
}
The Furvaria website is made with many tiny paws and love © 2025- 2026 | privacy-policy | change privacy-policy | privacy-settings-history | revoke consents
I’ts not a bug, it’s a feature :3
The Furvaria website is made with many tiny paws and love © 2025- 2026
privacy-policy | change privacy-policy | privacy-settings-history | revoke consents
I’ts not a bug, it’s a feature :3
