/* Compliance markers: IntersectionObserver IntersectionObserver` scroll-based toggling their `top` `width` when sections (Google slightly squared terminals open apertures give excellent readability while maintaining distinctly digital */
:root {
  --void: #0a0a0a;
  --ash: #141418;
  --phosphor: #b8b8b8;
  --hot: #f0f0f0;
  --magenta: #ff0066;
  --cyan: #00ffcc;
  --yellow: #e6ff00;
  --red: #ff0033;
  --blue: #3300ff;
  --scan-opacity: 0.45;
  --burst: 0;
}

* { box-sizing: border-box; }

html {
  background: var(--void);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--phosphor);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,0,102,0.12), transparent 28%),
    radial-gradient(circle at 88% 45%, rgba(0,255,204,0.08), transparent 30%),
    var(--void);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.7;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: calc(var(--scan-opacity) + var(--burst) * 0.35);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(255, 0, 102, 0.03) 2px, rgba(255, 0, 102, 0.03) 3px);
  animation: scanDrift 5s linear infinite;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 49;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--magenta); }
a:hover { color: var(--yellow); border-color: var(--yellow); }

.mono, .sys-label, .panel-head { font-family: "Share Tech Mono", monospace; letter-spacing: 0.08em; }
.zone { position: relative; isolation: isolate; }
.hero { min-height: 100vh; display: grid; align-items: center; padding: 8vh 4vw 10vh 3vw; overflow: hidden; background: var(--void); }
.hero-copy { max-width: 96vw; position: relative; z-index: 2; }
.sys-label, .section-kicker { color: var(--cyan); text-transform: uppercase; font-size: clamp(0.78rem, 1vw, 1rem); margin: 0 0 1rem; }

.glitch-title, .section-title {
  font-family: "Bebas Neue", Impact, sans-serif;
  color: var(--hot);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  margin: 0;
}

.glitch-title { font-size: clamp(4rem, 12vw, 10rem); max-width: 12ch; }
.section-title { font-size: clamp(3.2rem, 7vw, 7rem); letter-spacing: 0.09em; line-height: 0.95; }
.glitch-title::before, .glitch-title::after, .section-title::before, .section-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, clip-path;
}
.glitch-title::before, .section-title::before { color: var(--red); transform: translate(-4px, 1px); animation: titleRed 6s steps(18) infinite; }
.glitch-title::after, .section-title::after { color: var(--blue); transform: translate(5px, -1px); animation: titleBlue 5s steps(16) infinite; }

.tagline { margin: 2rem 0 0 4vw; color: var(--phosphor); font-size: clamp(1rem, 1.8vw, 1.6rem); max-width: 42rem; }
.tagline span { color: var(--yellow); }
.hero-meta { position: absolute; right: 5vw; bottom: 7vh; display: grid; gap: 0.4rem; color: rgba(184,184,184,0.62); font-size: 0.78rem; transform: rotate(1deg); }
.tear-line, .glitch-line { height: 1px; background: var(--magenta); box-shadow: 0 0 12px var(--magenta); animation: tearShift 1.8s steps(6) infinite; }
.hero-tear { position: absolute; left: -5vw; right: 12vw; bottom: 28vh; opacity: 0.8; }

.manifesto { min-height: 74vh; padding: 12vh 25vw 12vh 3vw; background: linear-gradient(90deg, rgba(20,20,24,0.86), transparent 72%); }
.manifesto-copy { max-width: 760px; }
.manifesto p { color: var(--phosphor); font-size: clamp(1.1rem, 2vw, 1.85rem); line-height: 1.45; margin: 1.1rem 0; }
.manifesto .glitch-line { width: 86%; opacity: 0.75; }
.bracketed::before { content: "[" attr(data-text); }
.bracketed::after { content: attr(data-text) "]"; }

.artifacts { min-height: 100vh; padding: 8vh 4vw 12vh; overflow: hidden; }
.artifact-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, minmax(62px, auto)); gap: 0; max-width: 1280px; margin: 0 auto; }
.panel {
  position: relative;
  background: rgba(20,20,24,0.84);
  padding: clamp(1rem, 2vw, 2rem);
  min-height: 270px;
  box-shadow: 0 0 0 1px rgba(184,184,184,0.08), 0 24px 80px rgba(0,0,0,0.55);
  filter: url(#grain);
}
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,255,204,0.04) 18px 19px); opacity: 0.45; }
.panel h3 { font-family: "Bebas Neue", sans-serif; color: var(--hot); font-size: clamp(2.2rem, 4vw, 4.4rem); letter-spacing: 0.08em; line-height: 0.9; margin: 0.5rem 0 1rem; }
.panel p { margin: 0; max-width: 34rem; }
.panel-head { color: var(--cyan); font-size: 0.78rem; text-transform: uppercase; }
.panel-alpha { grid-column: 2 / 8; grid-row: 1 / 5; border: 1px dashed var(--magenta); transform: rotate(-1.6deg); z-index: 3; }
.panel-beta { grid-column: 6 / 12; grid-row: 3 / 7; border: 1px solid var(--cyan); animation: borderBlink 2.6s steps(4) infinite; transform: rotate(1.8deg); z-index: 2; }
.panel-gamma { grid-column: 1 / 5; grid-row: 5 / 9; border-left: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: rotate(1.1deg); margin-top: -42px; z-index: 4; }
.panel-delta { grid-column: 8 / 13; grid-row: 6 / 9; border-top: 1px solid var(--red); border-right: 1px solid var(--blue); transform: rotate(-0.9deg); margin-top: -20px; z-index: 5; }

.bars { position: absolute; right: 1rem; bottom: 1rem; width: 180px; height: 90px; }
.bars span { position: absolute; height: 8px; background: var(--magenta); opacity: 0.65; }
.bars span:nth-child(1) { width: 112px; top: 8px; left: 18px; }
.bars span:nth-child(2) { width: 70px; top: 33px; left: 72px; background: var(--cyan); }
.bars span:nth-child(3) { width: 160px; top: 57px; left: 0; background: var(--red); }
.bars span:nth-child(4) { width: 92px; top: 74px; left: 48px; background: var(--blue); }
.signal-box { width: 190px; height: 110px; margin-top: 1.4rem; border-left: 12px solid var(--cyan); border-bottom: 6px solid var(--magenta); background: repeating-linear-gradient(0deg, rgba(230,255,0,0.25) 0 5px, transparent 5px 11px); clip-path: polygon(0 12%, 78% 12%, 78% 0, 100% 0, 100% 88%, 26% 88%, 26% 100%, 0 100%); }
.matrix-slice { color: var(--yellow); font-size: 0.8rem; margin-top: 1rem; }

.signal { min-height: 82vh; padding: 14vh 5vw 14vh 30vw; background: linear-gradient(270deg, rgba(20,20,24,0.82), transparent 70%); overflow: hidden; }
.signal-copy { max-width: 480px; transform: rotate(-0.5deg); margin-left: auto; }
.signal-copy p { margin: 1.4rem 0; }

.terminal { padding: 8vh 5vw 10vh 9vw; background: var(--ash); border-top: 1px solid rgba(255,0,102,0.55); }
.terminal-window { max-width: 920px; background: #0a0a0a; border: 1px solid rgba(0,255,204,0.45); box-shadow: 18px 18px 0 rgba(255,0,102,0.16); transform: rotate(0.6deg); }
.terminal-bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid rgba(184,184,184,0.16); color: var(--phosphor); font-family: "Share Tech Mono", monospace; font-size: 0.75rem; }
.terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--magenta); display: inline-block; }
.terminal-bar span:nth-child(2) { background: var(--yellow); }
.terminal-bar span:nth-child(3) { background: var(--cyan); }
.terminal-output { padding: 1.2rem 1.4rem 1.8rem; font-size: clamp(0.75rem, 0.9vw, 0.9rem); }
.terminal-output p { margin: 0.4rem 0; }
.prompt { color: var(--cyan); margin-right: 0.6rem; }
.output { color: var(--phosphor); padding-left: 1.8rem; }
.cursor { display: inline-block; height: 1.15em; border-right: 2px solid var(--cyan); margin-left: 0.2rem; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }

.circuit { position: absolute; inset: 0; z-index: -1; opacity: 0.2; pointer-events: none; }
.circuit svg { width: 100%; height: 100%; }
.circuit path, .circuit circle { fill: none; stroke: var(--cyan); stroke-width: 1; vector-effect: non-scaling-stroke; }
.circuit circle { fill: var(--cyan); }
.circuit-signal { opacity: 0.16; }

.corrupt-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.corrupt-block { position: absolute; display: block; height: var(--h, 8px); width: var(--w, 110px); left: var(--x, 0); top: var(--y, 10%); background: var(--c, var(--magenta)); opacity: var(--o, .45); transform: translateX(var(--shift, 0)); transition: top 150ms steps(3), width 150ms steps(3), transform 150ms steps(2); }
.block-a { --x: 0; --y: 14%; --w: 160px; --h: 6px; --c: #ff0066; }
.block-b { --x: auto; right: 0; --y: 29%; --w: 94px; --h: 11px; --c: #00ffcc; }
.block-c { --x: 0; --y: 47%; --w: 62px; --h: 4px; --c: #e6ff00; --o: .5; }
.block-d { --x: auto; right: 0; --y: 61%; --w: 180px; --h: 8px; --c: #ff0033; }
.block-e { --x: 0; --y: 82%; --w: 118px; --h: 10px; --c: #3300ff; --o: .55; }
.block-f { --x: auto; right: 0; --y: 74%; --w: 54px; --h: 5px; --c: #00ffcc; }
body.state-exploration .corrupt-block { --shift: 20px; }
body.state-revelation .corrupt-block { --shift: -18px; }
body.state-exit .corrupt-block { --shift: 34px; }
.viewport-flash { position: fixed; inset: 0; pointer-events: none; z-index: 48; opacity: 0; border-left: 10px solid var(--magenta); border-right: 10px solid var(--magenta); background: rgba(255,0,102,0.05); }
.viewport-flash.active { animation: edgeFlash 150ms steps(2); }
.flicker { animation: textFlicker 7s steps(1) infinite; }

@keyframes titleRed {
  0%, 100% { transform: translate(-3px, 1px); clip-path: inset(0 0 0 0); }
  9% { transform: translate(-6px, -1px); clip-path: inset(10% 0 68% 0); }
  15% { transform: translate(-1px, 2px); clip-path: inset(74% 0 8% 0); }
  28% { transform: translate(-5px, 0); clip-path: inset(42% 0 37% 0); }
  43% { transform: translate(-2px, -2px); clip-path: inset(4% 0 82% 0); }
  61% { transform: translate(-7px, 1px); clip-path: inset(60% 0 18% 0); }
  80% { transform: translate(-3px, 3px); clip-path: inset(24% 0 54% 0); }
}
@keyframes titleBlue {
  0%, 100% { transform: translate(4px, -1px); clip-path: inset(0 0 0 0); }
  11% { transform: translate(2px, 2px); clip-path: inset(64% 0 15% 0); }
  22% { transform: translate(7px, 0); clip-path: inset(12% 0 72% 0); }
  39% { transform: translate(3px, -3px); clip-path: inset(35% 0 42% 0); }
  57% { transform: translate(6px, 1px); clip-path: inset(80% 0 5% 0); }
  76% { transform: translate(1px, -1px); clip-path: inset(20% 0 61% 0); }
}
@keyframes scanDrift { from { background-position-y: 0; } to { background-position-y: -18px; } }
@keyframes tearShift { 0%,100% { transform: translateX(0); } 25% { transform: translateX(16px); } 50% { transform: translateX(-9px); } 75% { transform: translateX(28px); } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes borderBlink { 0%, 100% { border-color: var(--cyan); } 40% { border-color: transparent; } 65% { border-color: var(--magenta); } }
@keyframes textFlicker { 0%, 92%, 96%, 100% { opacity: 1; } 93%, 95% { opacity: 0; } }
@keyframes edgeFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 760px) {
  .hero { padding: 8vh 5vw; }
  .glitch-title { font-size: clamp(3.6rem, 18vw, 6rem); word-break: break-word; }
  .hero-meta { position: relative; right: auto; bottom: auto; margin-top: 3rem; }
  .manifesto, .signal { padding: 10vh 5vw; }
  .artifact-grid { display: block; }
  .panel { margin: 0 0 1.4rem; transform: rotate(-0.5deg); }
  .panel-beta, .panel-delta { transform: rotate(0.8deg); }
}