/* ppzz.ee -- Digital Glitch RGB Aberration */
:root {
    --red: #FF0000;
    --green: #00FF00;
    --blue: #0000FF;
    --black: #0A0A0A;
    --charcoal: #1A1A1A;
    --ghost: #E0E0E0;
    --magenta: #FF00FF;
    --cyan: #00FFFF;
    --amber: #FFAA00;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Space Grotesk', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.65; color: #C8C8C8; background: var(--black); overflow-x: hidden; }

.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 1000; background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.03) 1px, rgba(255,255,255,0.03) 2px); }

.signal-meter { position: fixed; right: 0; top: 0; width: 4px; height: 100vh; z-index: 999; background: linear-gradient(180deg, var(--green) 0%, var(--amber) 50%, var(--red) 100%); box-shadow: 0 0 8px var(--green); transition: box-shadow 0.3s; }

.nav-glitch { position: fixed; top: 16px; left: 24px; z-index: 100; cursor: pointer; }
.rgb-layer { position: absolute; top: 0; left: 0; font-family: 'Share Tech Mono', monospace; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.rgb-red { color: var(--red); left: -2px; top: 1px; }
.rgb-blue { color: var(--blue); left: 2px; top: -1px; }
.rgb-green { color: var(--green); position: relative; }
.nav-glitch { mix-blend-mode: screen; }

.signal-field { position: relative; z-index: 1; }

.zone { min-height: 100vh; position: relative; padding: 80px 10%; display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.zone-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--green); opacity: 0.7; letter-spacing: 0.04em; animation: flicker 4s infinite; }
@keyframes flicker { 0%, 15%, 16%, 50%, 51%, 85%, 100% { opacity: 0.7; } 15.5%, 50.5% { opacity: 0.4; } 16.5%, 51.5% { opacity: 0.9; } }

.green-line { width: 100%; height: 2px; position: absolute; top: 50%; left: 0; }
.green-line line { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.green-line.on line { stroke-dashoffset: 0; }

.hero-text { text-align: center; position: relative; z-index: 5; }
.title-rgb { position: relative; display: inline-block; mix-blend-mode: screen; height: 60px; margin-bottom: 16px; }
.title-layer { font-size: 56px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.title-layer.rgb-red { left: -3px; top: 1px; opacity: 0; transition: opacity 0.2s, left 0.2s; }
.title-layer.rgb-blue { left: 3px; top: -1px; opacity: 0; transition: opacity 0.2s, left 0.2s; }
.title-layer.rgb-green { opacity: 0; transition: opacity 0.3s; }
.title-layer.on { opacity: 1; }
.signal-status { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--green); opacity: 0.7; }

.interference-bar { width: 100%; height: 3px; position: relative; }
.bar-red { background: var(--red); height: 4px; }
.bar-green { background: var(--green); height: 3px; }
.bar-blue { background: var(--blue); height: 5px; }
.bar-magenta { background: var(--magenta); height: 3px; }

.content-panel { background: var(--charcoal); padding: 32px; position: relative; transform: translateX(var(--jitter, 0)); clip-path: polygon(1% 0%, 99% 2%, 100% 97%, 0% 100%); max-width: 700px; }
.panel-offset-1 { margin-left: 8%; }
.panel-offset-2 { margin-left: 30%; }
.panel-offset-3 { margin-left: 15%; }
.panel-offset-4 { margin-left: 5%; }
.panel-offset-5 { margin-left: 35%; margin-top: -40px; }
.panel-offset-6 { margin-left: 10%; }
.panel-overlap { z-index: 2; }
.panel-tilt { transform: translateX(var(--jitter, 0)) rotate(1.5deg); }
.panel-heavy-tilt { transform: translateX(var(--jitter, 0)) rotate(-2deg); clip-path: polygon(2% 1%, 98% 3%, 99% 96%, 1% 99%); }

.panel-meta { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--green); opacity: 0.7; margin-bottom: 12px; animation: flicker 4s infinite; }
.panel-heading-rgb { position: relative; display: block; mix-blend-mode: screen; height: 40px; margin-bottom: 12px; }
.panel-heading-rgb .rgb-layer { font-size: 36px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.panel-text { color: #C8C8C8; }

.warning-flash { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--amber); letter-spacing: 0.08em; text-align: center; animation: warningPulse 1.5s infinite; }
@keyframes warningPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.corruption-block { position: absolute; width: 16px; height: 16px; }
.cb-red { background: var(--red); top: 20%; right: 10%; }
.cb-green { background: var(--green); bottom: 15%; left: 8%; }
.cb-blue { background: var(--blue); top: 40%; right: 25%; }
.cb-magenta { background: var(--magenta); bottom: 30%; right: 15%; }
.cb-cyan { background: var(--cyan); top: 60%; left: 20%; }

.zone.visible .content-panel { animation: panelGlitch 0.1s; }
@keyframes panelGlitch { 0% { transform: translateX(var(--jitter, 0)); } 33% { transform: translateX(calc(var(--jitter, 0) + 6px)) translateY(-2px); } 66% { transform: translateX(calc(var(--jitter, 0) - 4px)) translateY(3px); } 100% { transform: translateX(var(--jitter, 0)); } }

@media (max-width: 768px) {
    .zone { padding: 60px 5%; }
    .title-layer { font-size: 32px; }
    .panel-heading-rgb .rgb-layer { font-size: 24px; }
    .content-panel { max-width: 100%; }
    .panel-offset-1, .panel-offset-2, .panel-offset-3, .panel-offset-4, .panel-offset-5, .panel-offset-6 { margin-left: 0; }
}