:root { --neon-purple: #b829f7; --dark-purple: #2d1b3a; --light-purple: #c49ff9; --bg-dark: #0a0614; --glass-bg: rgba(13, 7, 24, 0.95); --base-font-size: 18px; --line-height: 1.8; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { font-family: "Space Mono", monospace; background: var(--bg-dark); color: #eee; font-size: 16px; line-height: var(--line-height); display: grid; place-items: center; overflow: hidden; } #xsa0x6d, #xsa0x70 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } #xsa0x6d { z-index: 0; opacity: 0.12; } #xsa0x70 { z-index: 1; pointer-events: none; } .xsa0x63 { border-radius: 20px; backdrop-filter: blur(2px); text-align: center; position: relative; visibility: hidden; } .xsa0x63.xsa0x76 { visibility: visible; animation: containerReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, containerFloat 6s ease-in-out infinite; } .xsa0x742d63 { display: flex; flex-direction: column; gap: 20px; } .xsa0x672d74 { font-size: 2.8rem; font-weight: 700; color: #fff; text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); position: relative; opacity: 0; transform: translateY(20px) scale(0.95); } .xsa0x63.xsa0x76 .xsa0x672d74 { animation: textReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .xsa0x672d74::before, .xsa0x672d74::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; color: var(--neon-purple); clip-path: inset(0); } .xsa0x63.xsa0x76 .xsa0x672d74::before, .xsa0x63.xsa0x76 .xsa0x672d74::after { animation: glitchEffect 3s infinite linear alternate; } .xsa0x672d74::before { transform: translate(2px, -2px); } .xsa0x672d74::after { transform: translate(-2px, 2px); } .xsa0x737562 { font-size: 0.9rem; color: var(--light-purple); opacity: 0; transform: translateY(20px); } .xsa0x63.xsa0x76 .xsa0x737562 { animation: fadeInUp 0.8s ease forwards 0.2s; } @keyframes containerReveal { 0% { transform: scale(0) rotate(-5deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes containerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @keyframes textReveal { 0% { transform: translateY(20px) scale(0.95); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes glitchEffect { 0% { clip-path: inset(15% 0 70% 0); transform: translate(0); } 20% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 2px); } 40% { clip-path: inset(30% 0 50% 0); transform: translate(2px, -2px); } 60% { clip-path: inset(70% 0 10% 0); transform: translate(-2px, 2px); } 80% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -2px); } 100% { clip-path: inset(15% 0 70% 0); transform: translate(0); } } @media (max-width: 600px) { .xsa0x63 { padding: 20px; } .xsa0x672d74 { font-size: 2rem; } .xsa0x737562 { font-size: 0.65rem; } }