@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@500;600&family=Space+Grotesk:wght@400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0a0a0a; font-family: 'Space Grotesk', sans-serif; } /* ── Main container ── */ .hero { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; } /* ── Text ── */ .error-txt { text-align: center; } .error-txt h1{ font-family: 'Clash Display', sans-serif; font-size: 2.4rem; letter-spacing: 3px; text-transform: uppercase; color: #ffffff; text-shadow: 0 0 8px rgba(255, 69, 0, 0.25); } .error-txt h5 { font-size: 1.1rem; color: #cccccc; margin-top: 10px; } .error-txt a { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 13px 38px; font-family: inherit; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #FF4500; background: transparent; border: 1.5px solid rgba(255, 69, 0, 0.5); border-radius: 4px; cursor: pointer; text-decoration: none; transition: border-color 0.08s ease, box-shadow 0.10s ease, color 1.5s ease; } .error-txt a:hover { border-color: rgba(255, 69, 0, 0.9); box-shadow: 0 0 8px 2px rgba(255, 69, 0, 0.35), 0 0 22px 8px rgba(255, 69, 0, 0.18), 0 0 45px 14px rgba(255, 69, 0, 0.08), inset 0 0 14px 1px rgba(255, 69, 0, 0.07); } /* ── Loading dots — wrap your "..." in ── */ .loading-dots::after { content: ''; display: inline-block; animation: loading-dots 1.4s steps(4, end) infinite; min-width: 1.6em; } @keyframes loading-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } /* ── Glitch wrapper ── */ .glitch { position: relative; display: block; width: 500px; overflow: hidden; } /* All three images share the same size */ .glitch img { display: block; width: 100%; height: auto; } /* ── Scanline overlay — subtle CRT texture ── */ .glitch::before { content: ''; position: absolute; inset: 0; z-index: 8; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.14) 3px, rgba(0, 0, 0, 0.14) 4px ); pointer-events: none; animation: scanline-drift 8s linear infinite; } @keyframes scanline-drift { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } } /* ── Rare full-strip flash — premium wide-bar glitch ── */ .glitch::after { content: ''; position: absolute; left: 0; right: 0; z-index: 9; height: 0; background: rgba(255, 69, 0, 0.06); pointer-events: none; animation: bar-flash 8s steps(1) infinite; } @keyframes bar-flash { 0%, 14.9% { opacity: 0; top: 0; height: 0; } /* Burst A */ 15% { opacity: 1; top: 20%; height: 9%; background: rgba(255,69,0,0.22); } 15.5% { opacity: 1; top: 55%; height: 5%; background: rgba(30,120,255,0.18); } 16% { opacity: 1; top: 35%; height: 11%; background: rgba(255,69,0,0.16); } 16.5% { opacity: 1; top: 68%; height: 4%; background: rgba(30,120,255,0.20); } 17% { opacity: 0; top: 0; height: 0; } 17.1%, 47.9% { opacity: 0; height: 0; } /* Burst B */ 48% { opacity: 1; top: 62%; height: 8%; background: rgba(30,120,255,0.20); } 48.5% { opacity: 1; top: 10%; height: 12%; background: rgba(255,69,0,0.18); } 49% { opacity: 1; top: 40%; height: 5%; background: rgba(30,120,255,0.15); } 49.5% { opacity: 1; top: 75%; height: 7%; background: rgba(255,69,0,0.22); } 50% { opacity: 0; height: 0; } 50.1%, 77.9% { opacity: 0; height: 0; } /* Burst C */ 78% { opacity: 1; top: 30%; height: 10%; background: rgba(255,69,0,0.20); } 78.5% { opacity: 1; top: 70%; height: 6%; background: rgba(30,120,255,0.22); } 79% { opacity: 1; top: 15%; height: 9%; background: rgba(255,69,0,0.16); } 79.5% { opacity: 1; top: 50%; height: 5%; background: rgba(30,120,255,0.18); } 80% { opacity: 0; height: 0; } 80.1%, 100% { opacity: 0; height: 0; } } /* ── Base image ── */ .glitch .base { position: relative; z-index: 0; animation: base-shake 8s steps(1) infinite; } /* ── Right-shifted orangered ghost ── */ .glitch .ghost-r { position: absolute; inset: 0; z-index: 1; opacity: 0; filter: sepia(1) saturate(20) hue-rotate(-15deg) brightness(1.5); mix-blend-mode: screen; animation: ghost-right 8s steps(1) infinite; } /* ── Left-shifted electric blue ghost ── */ .glitch .ghost-l { position: absolute; inset: 0; z-index: 2; opacity: 0; filter: sepia(1) saturate(15) hue-rotate(165deg) brightness(1.3); mix-blend-mode: screen; animation: ghost-left 8s steps(1) infinite; } /* * 8s loop — three burst windows (same relative % as before, just faster cycle) * Burst A 14–24% * Burst B 48–58% * Burst C 78–88% */ @keyframes base-shake { 0%, 13.9% { transform: none; filter: none; } 14% { transform: translateX(-2px) skewX(-0.4deg); filter: brightness(1.08); } 14.5% { transform: translateX(2px); filter: none; } 15% { transform: translateX(-1px) skewX(0.3deg); } 15.5% { transform: translateX(3px) skewX(-0.2deg); filter: brightness(0.94); } 16% { transform: translateX(-2px); filter: none; } 16.5% { transform: translateX(1px) skewX(0.4deg); } 17% { transform: translateX(-3px); filter: brightness(1.05); } 17.5% { transform: translateX(2px) skewX(-0.3deg); filter: none; } 18% { transform: translateX(-1px); } 18.5% { transform: translateX(3px) skewX(0.2deg); filter: brightness(0.96); } 19% { transform: translateX(-2px); filter: none; } 19.5% { transform: translateX(1px); } 20% { transform: translateX(-1px) skewX(-0.4deg); filter: brightness(1.04); } 20.5% { transform: translateX(2px); filter: none; } 21% { transform: translateX(-2px) skewX(0.3deg); } 21.5% { transform: translateX(1px); filter: brightness(0.97); } 22% { transform: translateX(-3px); filter: none; } 22.5% { transform: translateX(2px) skewX(-0.2deg); } 23% { transform: translateX(-1px); filter: brightness(1.03); } 23.5% { transform: translateX(1px) skewX(0.1deg); filter: none; } 24% { transform: none; filter: none; } 24.1%, 47.9% { transform: none; filter: none; } 48% { transform: translateX(2px) skewX(0.5deg); filter: brightness(1.1); } 48.5% { transform: translateX(-3px) skewX(-0.3deg); filter: none; } 49% { transform: translateX(1px); } 49.5% { transform: translateX(-2px) skewX(0.4deg); filter: brightness(0.93); } 50% { transform: translateX(3px); filter: none; } 50.5% { transform: translateX(-1px) skewX(-0.5deg); } 51% { transform: translateX(2px); filter: brightness(1.06); } 51.5% { transform: translateX(-2px) skewX(0.2deg); filter: none; } 52% { transform: translateX(1px); } 52.5% { transform: translateX(-3px) skewX(-0.3deg); filter: brightness(0.95); } 53% { transform: translateX(2px); filter: none; } 53.5% { transform: translateX(-1px) skewX(0.4deg); } 54% { transform: translateX(3px); filter: brightness(1.04); } 54.5% { transform: translateX(-2px); filter: none; } 55% { transform: translateX(1px) skewX(-0.2deg); } 55.5% { transform: translateX(-1px); filter: brightness(0.98); } 56% { transform: translateX(2px) skewX(0.3deg); filter: none; } 56.5% { transform: translateX(-1px); } 57% { transform: translateX(1px); filter: brightness(1.02); } 57.5% { transform: translateX(-1px) skewX(-0.1deg); filter: none; } 58% { transform: none; filter: none; } 58.1%, 77.9% { transform: none; filter: none; } 78% { transform: translateX(-3px) skewX(-0.6deg); filter: brightness(1.12); } 78.5% { transform: translateX(3px) skewX(0.4deg); filter: none; } 79% { transform: translateX(-2px); } 79.5% { transform: translateX(2px) skewX(-0.3deg); filter: brightness(0.91); } 80% { transform: translateX(-1px); filter: none; } 80.5% { transform: translateX(3px) skewX(0.5deg); } 81% { transform: translateX(-3px); filter: brightness(1.08); } 81.5% { transform: translateX(2px) skewX(-0.4deg); filter: none; } 82% { transform: translateX(-1px); } 82.5% { transform: translateX(3px) skewX(0.3deg); filter: brightness(0.94); } 83% { transform: translateX(-2px); filter: none; } 83.5% { transform: translateX(1px); } 84% { transform: translateX(-2px) skewX(-0.2deg); filter: brightness(1.05); } 84.5% { transform: translateX(2px); filter: none; } 85% { transform: translateX(-1px) skewX(0.3deg); } 85.5% { transform: translateX(1px); filter: brightness(0.97); } 86% { transform: translateX(-1px); filter: none; } 86.5% { transform: translateX(1px) skewX(-0.1deg); } 87% { transform: none; filter: brightness(1.01); } 87.5% { transform: none; filter: none; } 88% { transform: none; filter: none; } 100% { transform: none; filter: none; } } @keyframes ghost-right { 0%, 13.9% { opacity: 0; transform: none; clip-path: none; } 14% { opacity: 0.9; transform: translateX(9px); clip-path: inset(8% 0 82% 0); } 14.5% { opacity: 0.75; transform: translateX(6px); clip-path: inset(25% 0 60% 0); } 15% { opacity: 0.85; transform: translateX(11px); clip-path: inset(55% 0 30% 0); } 15.5% { opacity: 0.6; transform: translateX(7px); clip-path: inset(72% 0 12% 0); } 16% { opacity: 0.9; transform: translateX(5px); clip-path: inset(15% 0 70% 0); } 16.5% { opacity: 0.7; transform: translateX(12px); clip-path: inset(40% 0 45% 0); } 17% { opacity: 0.85; transform: translateX(8px); clip-path: inset(68% 0 18% 0); } 17.5% { opacity: 0.55; transform: translateX(10px); clip-path: inset(5% 0 88% 0); } 18% { opacity: 0.8; transform: translateX(7px); clip-path: inset(32% 0 52% 0); } 18.5% { opacity: 0.9; transform: translateX(4px); clip-path: inset(60% 0 25% 0); } 19% { opacity: 0.65; transform: translateX(13px); clip-path: inset(18% 0 68% 0); } 19.5% { opacity: 0.8; transform: translateX(9px); clip-path: inset(78% 0 8% 0); } 20% { opacity: 0.7; transform: translateX(6px); clip-path: inset(44% 0 40% 0); } 20.5% { opacity: 0.9; transform: translateX(8px); clip-path: inset(10% 0 78% 0); } 21% { opacity: 0.6; transform: translateX(11px); clip-path: inset(65% 0 22% 0); } 21.5% { opacity: 0.75; transform: translateX(5px); clip-path: inset(28% 0 58% 0); } 22% { opacity: 0.85; transform: translateX(9px); clip-path: inset(50% 0 35% 0); } 22.5% { opacity: 0.65; transform: translateX(7px); clip-path: inset(82% 0 5% 0); } 23% { opacity: 0.8; transform: translateX(10px); clip-path: inset(20% 0 65% 0); } 23.5% { opacity: 0.5; transform: translateX(6px); clip-path: inset(38% 0 48% 0); } 24% { opacity: 0; transform: none; clip-path: none; } 24.1%, 47.9% { opacity: 0; transform: none; clip-path: none; } 48% { opacity: 0.9; transform: translateX(10px); clip-path: inset(30% 0 55% 0); } 48.5% { opacity: 0.7; transform: translateX(7px); clip-path: inset(70% 0 15% 0); } 49% { opacity: 0.85; transform: translateX(12px); clip-path: inset(12% 0 74% 0); } 49.5% { opacity: 0.6; transform: translateX(5px); clip-path: inset(50% 0 34% 0); } 50% { opacity: 0.9; transform: translateX(9px); clip-path: inset(5% 0 88% 0); } 50.5% { opacity: 0.75; transform: translateX(13px); clip-path: inset(62% 0 24% 0); } 51% { opacity: 0.65; transform: translateX(8px); clip-path: inset(22% 0 64% 0); } 51.5% { opacity: 0.85; transform: translateX(6px); clip-path: inset(80% 0 6% 0); } 52% { opacity: 0.7; transform: translateX(11px); clip-path: inset(40% 0 44% 0); } 52.5% { opacity: 0.9; transform: translateX(4px); clip-path: inset(15% 0 72% 0); } 53% { opacity: 0.6; transform: translateX(9px); clip-path: inset(55% 0 30% 0); } 53.5% { opacity: 0.8; transform: translateX(7px); clip-path: inset(28% 0 58% 0); } 54% { opacity: 0.9; transform: translateX(12px); clip-path: inset(72% 0 14% 0); } 54.5% { opacity: 0.65; transform: translateX(8px); clip-path: inset(8% 0 84% 0); } 55% { opacity: 0.75; transform: translateX(10px); clip-path: inset(45% 0 40% 0); } 55.5% { opacity: 0.85; transform: translateX(6px); clip-path: inset(65% 0 20% 0); } 56% { opacity: 0.55; transform: translateX(9px); clip-path: inset(20% 0 68% 0); } 56.5% { opacity: 0.8; transform: translateX(7px); clip-path: inset(38% 0 50% 0); } 57% { opacity: 0.7; transform: translateX(11px); clip-path: inset(75% 0 10% 0); } 57.5% { opacity: 0.5; transform: translateX(5px); clip-path: inset(52% 0 32% 0); } 58% { opacity: 0; transform: none; clip-path: none; } 58.1%, 77.9% { opacity: 0; transform: none; clip-path: none; } 78% { opacity: 0.95; transform: translateX(11px); clip-path: inset(48% 0 36% 0); } 78.5% { opacity: 0.7; transform: translateX(8px); clip-path: inset(18% 0 68% 0); } 79% { opacity: 0.9; transform: translateX(13px); clip-path: inset(70% 0 14% 0); } 79.5% { opacity: 0.6; transform: translateX(6px); clip-path: inset(6% 0 86% 0); } 80% { opacity: 0.85; transform: translateX(9px); clip-path: inset(35% 0 50% 0); } 80.5% { opacity: 0.75; transform: translateX(12px); clip-path: inset(58% 0 26% 0); } 81% { opacity: 0.9; transform: translateX(7px); clip-path: inset(22% 0 62% 0); } 81.5% { opacity: 0.65; transform: translateX(10px); clip-path: inset(80% 0 8% 0); } 82% { opacity: 0.8; transform: translateX(8px); clip-path: inset(42% 0 42% 0); } 82.5% { opacity: 0.9; transform: translateX(14px); clip-path: inset(12% 0 76% 0); } 83% { opacity: 0.7; transform: translateX(6px); clip-path: inset(66% 0 20% 0); } 83.5% { opacity: 0.85; transform: translateX(9px); clip-path: inset(28% 0 56% 0); } 84% { opacity: 0.6; transform: translateX(11px); clip-path: inset(52% 0 32% 0); } 84.5% { opacity: 0.8; transform: translateX(7px); clip-path: inset(78% 0 10% 0); } 85% { opacity: 0.75; transform: translateX(10px); clip-path: inset(16% 0 70% 0); } 85.5% { opacity: 0.9; transform: translateX(8px); clip-path: inset(44% 0 40% 0); } 86% { opacity: 0.65; transform: translateX(12px); clip-path: inset(60% 0 24% 0); } 86.5% { opacity: 0.7; transform: translateX(5px); clip-path: inset(32% 0 52% 0); } 87% { opacity: 0.55; transform: translateX(9px); clip-path: inset(85% 0 4% 0); } 87.5% { opacity: 0.4; transform: translateX(6px); clip-path: inset(24% 0 64% 0); } 88% { opacity: 0; transform: none; clip-path: none; } 100% { opacity: 0; transform: none; clip-path: none; } } @keyframes ghost-left { 0%, 13.9% { opacity: 0; transform: none; clip-path: none; } 14% { opacity: 0.65; transform: translateX(-8px); clip-path: inset(50% 0 34% 0); } 14.5% { opacity: 0.8; transform: translateX(-5px); clip-path: inset(10% 0 80% 0); } 15% { opacity: 0.55; transform: translateX(-10px); clip-path: inset(38% 0 46% 0); } 15.5% { opacity: 0.75; transform: translateX(-7px); clip-path: inset(68% 0 20% 0); } 16% { opacity: 0.6; transform: translateX(-4px); clip-path: inset(22% 0 62% 0); } 16.5% { opacity: 0.8; transform: translateX(-9px); clip-path: inset(80% 0 6% 0); } 17% { opacity: 0.5; transform: translateX(-6px); clip-path: inset(30% 0 55% 0); } 17.5% { opacity: 0.7; transform: translateX(-11px); clip-path: inset(58% 0 28% 0); } 18% { opacity: 0.6; transform: translateX(-5px); clip-path: inset(12% 0 74% 0); } 18.5% { opacity: 0.55; transform: translateX(-8px); clip-path: inset(72% 0 14% 0); } 19% { opacity: 0.75; transform: translateX(-4px); clip-path: inset(45% 0 38% 0); } 19.5% { opacity: 0.6; transform: translateX(-10px); clip-path: inset(20% 0 66% 0); } 20% { opacity: 0.5; transform: translateX(-7px); clip-path: inset(60% 0 26% 0); } 20.5% { opacity: 0.7; transform: translateX(-5px); clip-path: inset(5% 0 86% 0); } 21% { opacity: 0.65; transform: translateX(-9px); clip-path: inset(35% 0 50% 0); } 21.5% { opacity: 0.5; transform: translateX(-6px); clip-path: inset(75% 0 12% 0); } 22% { opacity: 0.7; transform: translateX(-8px); clip-path: inset(18% 0 68% 0); } 22.5% { opacity: 0.55; transform: translateX(-4px); clip-path: inset(52% 0 32% 0); } 23% { opacity: 0.6; transform: translateX(-7px); clip-path: inset(42% 0 44% 0); } 23.5% { opacity: 0.45; transform: translateX(-5px); clip-path: inset(85% 0 4% 0); } 24% { opacity: 0; transform: none; clip-path: none; } 24.1%, 47.9% { opacity: 0; transform: none; clip-path: none; } 48% { opacity: 0.7; transform: translateX(-9px); clip-path: inset(62% 0 24% 0); } 48.5% { opacity: 0.55; transform: translateX(-6px); clip-path: inset(20% 0 66% 0); } 49% { opacity: 0.8; transform: translateX(-11px); clip-path: inset(42% 0 44% 0); } 49.5% { opacity: 0.6; transform: translateX(-4px); clip-path: inset(8% 0 82% 0); } 50% { opacity: 0.7; transform: translateX(-8px); clip-path: inset(55% 0 30% 0); } 50.5% { opacity: 0.5; transform: translateX(-12px); clip-path: inset(28% 0 58% 0); } 51% { opacity: 0.8; transform: translateX(-7px); clip-path: inset(72% 0 14% 0); } 51.5% { opacity: 0.65; transform: translateX(-5px); clip-path: inset(15% 0 72% 0); } 52% { opacity: 0.55; transform: translateX(-9px); clip-path: inset(46% 0 40% 0); } 52.5% { opacity: 0.75; transform: translateX(-6px); clip-path: inset(78% 0 8% 0); } 53% { opacity: 0.65; transform: translateX(-10px); clip-path: inset(32% 0 52% 0); } 53.5% { opacity: 0.8; transform: translateX(-8px); clip-path: inset(60% 0 26% 0); } 54% { opacity: 0.5; transform: translateX(-5px); clip-path: inset(22% 0 62% 0); } 54.5% { opacity: 0.7; transform: translateX(-11px); clip-path: inset(50% 0 36% 0); } 55% { opacity: 0.6; transform: translateX(-7px); clip-path: inset(82% 0 4% 0); } 55.5% { opacity: 0.5; transform: translateX(-4px); clip-path: inset(38% 0 48% 0); } 56% { opacity: 0.7; transform: translateX(-9px); clip-path: inset(12% 0 76% 0); } 56.5% { opacity: 0.6; transform: translateX(-6px); clip-path: inset(68% 0 18% 0); } 57% { opacity: 0.5; transform: translateX(-8px); clip-path: inset(25% 0 62% 0); } 57.5% { opacity: 0.4; transform: translateX(-5px); clip-path: inset(55% 0 32% 0); } 58% { opacity: 0; transform: none; clip-path: none; } 58.1%, 77.9% { opacity: 0; transform: none; clip-path: none; } 78% { opacity: 0.7; transform: translateX(-10px); clip-path: inset(28% 0 58% 0); } 78.5% { opacity: 0.8; transform: translateX(-7px); clip-path: inset(62% 0 24% 0); } 79% { opacity: 0.6; transform: translateX(-12px); clip-path: inset(14% 0 72% 0); } 79.5% { opacity: 0.75; transform: translateX(-5px); clip-path: inset(76% 0 10% 0); } 80% { opacity: 0.55; transform: translateX(-9px); clip-path: inset(40% 0 46% 0); } 80.5% { opacity: 0.7; transform: translateX(-11px); clip-path: inset(20% 0 64% 0); } 81% { opacity: 0.8; transform: translateX(-6px); clip-path: inset(55% 0 30% 0); } 81.5% { opacity: 0.6; transform: translateX(-8px); clip-path: inset(8% 0 84% 0); } 82% { opacity: 0.7; transform: translateX(-13px); clip-path: inset(70% 0 16% 0); } 82.5% { opacity: 0.5; transform: translateX(-4px); clip-path: inset(33% 0 52% 0); } 83% { opacity: 0.75; transform: translateX(-9px); clip-path: inset(50% 0 36% 0); } 83.5% { opacity: 0.65; transform: translateX(-7px); clip-path: inset(18% 0 68% 0); } 84% { opacity: 0.8; transform: translateX(-10px); clip-path: inset(80% 0 6% 0); } 84.5% { opacity: 0.55; transform: translateX(-6px); clip-path: inset(44% 0 40% 0); } 85% { opacity: 0.65; transform: translateX(-8px); clip-path: inset(26% 0 58% 0); } 85.5% { opacity: 0.7; transform: translateX(-11px); clip-path: inset(60% 0 26% 0); } 86% { opacity: 0.5; transform: translateX(-5px); clip-path: inset(10% 0 80% 0); } 86.5% { opacity: 0.6; transform: translateX(-9px); clip-path: inset(38% 0 48% 0); } 87% { opacity: 0.45; transform: translateX(-7px); clip-path: inset(72% 0 14% 0); } 87.5% { opacity: 0.35; transform: translateX(-4px); clip-path: inset(54% 0 32% 0); } 88% { opacity: 0; transform: none; clip-path: none; } 100% { opacity: 0; transform: none; clip-path: none; } }