/* reasr.one - Glitch Art */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --void: #000000; --neon-red: #FF0040; --neon-green: #00FF80; --ghost: #E0E0E8; --muted: #6A6A78; --cyan: #00D4FF; --purple: #8000FF; }
body { background: var(--void); color: var(--ghost); font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; }
#glitch-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 3px); }
#hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 2rem; }
.glitch-title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; letter-spacing: 0.05em; color: var(--ghost); position: relative; }
.glitch-title::before, .glitch-title::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch-title::before { color: var(--neon-red); z-index: -1; animation: glitch1 3s infinite; }
.glitch-title::after { color: var(--cyan); z-index: -2; animation: glitch2 3s infinite; }
@keyframes glitch1 { 0%,100% { clip-path: inset(0 0 90% 0); transform: translate(0); } 20% { clip-path: inset(30% 0 40% 0); transform: translate(-4px, 2px); } 40% { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); } 60% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 4px); } 80% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -4px); } }
@keyframes glitch2 { 0%,100% { clip-path: inset(90% 0 0 0); transform: translate(0); } 20% { clip-path: inset(40% 0 30% 0); transform: translate(4px, -2px); } 40% { clip-path: inset(10% 0 60% 0); transform: translate(-4px, 2px); } 60% { clip-path: inset(70% 0 10% 0); transform: translate(2px, -4px); } 80% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 4px); } }
.hero-sub { font-size: 1rem; font-weight: 400; color: var(--muted); margin-top: 1.5rem; letter-spacing: 0.05em; }
#broken-grid { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-block { border: 1px solid rgba(255,0,64,0.2); padding: 2rem; background: rgba(255,255,255,0.02); opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.grid-block.visible { opacity: 1; transform: translateY(0); }
.block-1 { transform: translate(10px, -5px) rotate(-0.5deg); }
.block-2 { transform: translate(-5px, 15px) rotate(0.3deg); }
.block-3 { transform: translate(8px, 5px) rotate(0.4deg); }
.block-4 { transform: translate(-10px, -8px) rotate(-0.3deg); }
.block-1.visible { transform: translate(10px, -5px) rotate(-0.5deg); }
.block-2.visible { transform: translate(-5px, 15px) rotate(0.3deg); }
.block-3.visible { transform: translate(8px, 5px) rotate(0.4deg); }
.block-4.visible { transform: translate(-10px, -8px) rotate(-0.3deg); }
.block-heading { font-size: 1.5rem; font-weight: 700; color: var(--neon-green); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.block-text { font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
#footer { position: relative; z-index: 1; text-align: center; padding: 4rem 2rem; }
.footer-text { font-size: 0.75rem; color: var(--muted); opacity: 0.4; letter-spacing: 0.15em; }
@media (max-width: 768px) { #broken-grid { grid-template-columns: 1fr; } }