/* mujun.xyz - Colors: #060810, #0E1018, #E0F0F0, #90A0A8, #40E0D0, #E04060, #4060E0, #40E060 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #060810; color: #90A0A8; font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; line-height: 1.7; overflow-x: hidden; }

/* Scanlines */
.scanlines { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(64,224,208,0.02) 2px, rgba(64,224,208,0.02) 4px); }

/* Hero */
.hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-content { position: relative; z-index: 2; text-align: center; }
.error-msg { font-family: 'Azeret Mono', monospace; font-size: 0.8rem; color: #E04060; letter-spacing: 0.04em; margin-bottom: 1rem; animation: errorBlink 0.5s step-end 3; }
@keyframes errorBlink { 50% { opacity: 0; } }
.hero-title { font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: clamp(2.5rem, 6vw, 4rem); color: #E0F0F0; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.hero-sub { font-size: 1rem; color: #90A0A8; }

/* Glitch Text */
.glitch-text { text-shadow: -2px 0 #E04060, 2px 0 #4060E0; animation: glitchShift 3s steps(1) infinite; }
@keyframes glitchShift {
    0%, 90% { text-shadow: -2px 0 #E04060, 2px 0 #4060E0; }
    91% { text-shadow: -3px 0 #E04060, 1px 0 #4060E0; transform: translateX(-2px); }
    93% { text-shadow: -1px 0 #E04060, 3px 0 #4060E0; transform: translateX(2px); }
    95% { text-shadow: -2px 0 #E04060, 2px 0 #4060E0; transform: translateX(0); }
}

/* Glitch Canvas */
.glitch-canvas { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.glitch-rect { position: absolute; }
.r1 { width: 200px; height: 80px; background: rgba(64,224,208,0.08); top: 15%; left: 10%; animation: rectGlitch1 4s steps(1) infinite; }
.r2 { width: 150px; height: 120px; background: rgba(224,64,96,0.06); top: 50%; right: 15%; animation: rectGlitch2 5s steps(1) infinite; }
.r3 { width: 100px; height: 60px; background: rgba(64,96,224,0.08); bottom: 20%; left: 30%; animation: rectGlitch1 3.5s steps(1) infinite; }
.r4 { width: 250px; height: 40px; background: rgba(64,224,96,0.05); top: 35%; right: 25%; animation: rectGlitch2 6s steps(1) infinite; }
@keyframes rectGlitch1 { 0%,85% { transform: translate(0); } 86% { transform: translate(5px,-3px); } 88% { transform: translate(-8px,2px); } 90% { transform: translate(0); } }
@keyframes rectGlitch2 { 0%,80% { transform: translate(0); } 82% { transform: translate(-6px,4px); } 85% { transform: translate(3px,-5px); } 88% { transform: translate(0); } }
.glitch-circle { position: absolute; border-radius: 50%; border: 1px solid rgba(64,224,208,0.15); }
.c1 { width: 300px; height: 300px; top: 30%; left: 50%; transform: translateX(-50%); }
.glitch-line { position: absolute; height: 1px; }
.l1 { width: 60%; background: rgba(64,224,208,0.1); top: 40%; left: 20%; animation: lineFlicker 4s steps(1) infinite; }
.l2 { width: 40%; background: rgba(224,64,96,0.08); top: 65%; left: 35%; animation: lineFlicker 5.5s steps(1) infinite; }
@keyframes lineFlicker { 0%,88% { opacity: 1; } 89% { opacity: 0; } 91% { opacity: 1; } }

/* Corruption Bar */
.corruption-bar { display: flex; align-items: flex-end; gap: 2px; padding: 0 2rem; justify-content: center; margin-bottom: 2rem; }
.corrupt-block { width: 8px; display: block; opacity: 0.7; }

/* Experiments Grid */
.experiments { max-width: 960px; margin: 0 auto; padding: 0 2rem 4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* Experiment Cards */
.exp-card { background: #0E1018; border: 1px solid rgba(64,224,208,0.2); padding: 1.75rem; position: relative; overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; }
.exp-card.visible { opacity: 1; transform: translateY(0); }
.exp-card:hover { border-color: rgba(64,224,208,0.5); }
.exp-card:hover .glitch-text { animation-duration: 0.5s; }

/* Severity Bar */
.severity-bar { height: 4px; background: linear-gradient(90deg, #40E060, #E04060); margin-bottom: 1.25rem; border-radius: 2px; animation: severityPulse 2s ease infinite; }
@keyframes severityPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

.exp-title { font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.4rem); color: #E0F0F0; letter-spacing: 0.02em; margin-bottom: 0.75rem; }
.exp-desc { color: #90A0A8; margin-bottom: 1rem; }
.error-tag { font-family: 'Azeret Mono', monospace; font-size: 0.75rem; color: #E04060; display: block; }

/* Responsive */
@media (max-width: 700px) {
    .experiments { grid-template-columns: 1fr; }
    .glitch-text { text-shadow: -1px 0 #E04060, 1px 0 #4060E0; }
}