/* =========================================================
   KULAZHENKOV.RU — neo-cyberpunk 8bit
   ========================================================= */
:root {
  --bg: #05060a;
  --bg2: #0a0c14;
  --panel: rgba(10, 14, 24, .85);
  --line: rgba(0, 255, 204, .25);
  --cyan: #00ffcc;
  --magenta: #ff2fd6;
  --green: #35ff6e;
  --yellow: #ffe600;
  --red: #ff2f4b;
  --purple: #7b5bff;
  --white: #e6fff9;
  --dim: #6b7f88;
  --pixel: 'Press Start 2P', monospace;
  --mono: 'Share Tech Mono', monospace;
  --term: 'VT323', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--mono);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* ============ CRT overlay ============ */
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 999; }
.scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 4px);
  mix-blend-mode: multiply;
  animation: scan 8s linear infinite;
}
@keyframes scan { 0%{background-position-y:0} 100%{background-position-y:100%} }
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
.flicker { position: absolute; inset: 0; opacity:.05; background:#000; animation:flick 4s steps(2) infinite; }
@keyframes flick { 0%,100%{opacity:.04} 92%{opacity:.04} 93%{opacity:.5} 94%{opacity:.06} 96%{opacity:.3} }

/* ============ animated grid canvas ============ */
#grid-canvas { position: fixed; inset: 0; z-index: -2; }

/* ============ boot screen ============ */
#boot-screen {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 2000; display: flex; flex-direction: column;
  justify-content: flex-start; padding: 60px 8vw;
  font-family: var(--mono); color: var(--green);
  text-shadow: 0 0 8px rgba(53,255,110,.7);
}
.boot-text { white-space: pre-wrap; font-size: 15px; line-height: 1.5; }
.boot-curs { font-size: 20px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.hidden { display: none !important; }

/* ============ HUD ============ */
.hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  border-bottom: 2px solid var(--cyan);
  background: linear-gradient(180deg, rgba(0,255,204,.08), transparent);
  font-family: var(--pixel);
  font-size: 11px; color: var(--cyan);
  text-shadow: 0 0 6px rgba(0,255,204,.8);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(2px);
}
.hud-left, .hud-right { font-family: var(--mono); font-size: 15px; }
.hud-title { letter-spacing: 2px; }
.online-dot {
  display:inline-block; width:9px; height:9px; background: var(--green);
  box-shadow: 0 0 8px var(--green); margin-right:6px; animation: blink 2s infinite;
}
.foot {
  position: relative; border-top: 2px solid var(--magenta);
  border-bottom: none; background: linear-gradient(0deg, rgba(255,47,214,.08), transparent);
  color: var(--magenta); font-size: 10px; margin-top: 40px;
}

/* ============ pixel nav ============ */
.pixel-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  padding: 18px 12px;
}
.pixel-nav a {
  font-family: var(--pixel); font-size: 11px;
  color: var(--cyan); text-decoration: none;
  padding: 10px 14px;
  border: 2px solid var(--cyan);
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--cyan);
  transition: all .1s steps(2);
  cursor: pointer;
}
.pixel-nav a:hover {
  background: var(--cyan); color: #000;
  transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--cyan);
}

/* ============ sections ============ */
main { max-width: 980px; margin: 0 auto; padding: 10px 20px 40px; }
.sec { display: none; }
.sec.active { display: block; animation: appear .15s steps(3); }
@keyframes appear { 0%{opacity:0; transform: translateY(6px)} 100%{opacity:1; transform:none} }

.sec-title {
  font-family: var(--pixel); font-size: 16px; color: var(--magenta);
  text-shadow: 0 0 8px rgba(255,47,214,.7);
  margin: 30px 0 20px;
  border-left: 4px solid var(--magenta); padding-left: 12px;
}

/* ============ HERO ============ */
#sec-hero { text-align: center; padding-top: 40px; }
.hero-avatar { display: flex; justify-content: center; margin-bottom: 18px; }
.avatar-px { width: 88px; height: 88px; image-rendering: pixelated; }
.hero-avatar::after {
  content:""; position:absolute; width:88px; height:88px;
  background: linear-gradient(135deg, var(--cyan), var(--purple), var(--magenta));
  opacity:.25; filter: blur(18px); z-index:-1;
}
h1 {
  font-family: var(--pixel); font-size: 38px; color: var(--white);
  text-shadow: 3px 3px 0 var(--magenta), 6px 6px 0 var(--cyan);
  letter-spacing: 2px;
}
/* glitch */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; overflow: hidden;
  opacity: .8;
}
.glitch::before { color: var(--cyan); animation: gl1 3s infinite linear alternate-reverse; left:2px; }
.glitch::after { color: var(--magenta); animation: gl2 2.2s infinite linear alternate-reverse; left:-2px; }
@keyframes gl1 { 0%{clip-path: inset(0 0 90% 0)} 20%{clip-path: inset(40% 0 30% 0)} 40%{clip-path: inset(10% 0 60% 0)} 60%{clip-path: inset(70% 0 5% 0)} 100%{clip-path: inset(0 0 0 0)} }
@keyframes gl2 { 0%{clip-path: inset(80% 0 5% 0)} 25%{clip-path: inset(10% 0 85% 0)} 50%{clip-path: inset(50% 0 20% 0)} 100%{clip-path: inset(0 0 95% 0)} }

.tagline { margin-top: 18px; color: var(--green); font-size: 18px; }
.cursor-line { animation: blink 1s steps(2) infinite; }

.hero-stats {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin: 26px 0; font-size: 15px; color: var(--yellow);
}
.hero-stats b { color: var(--white); }

/* ============ buttons 8bit ============ */
.btn-8bit {
  display: inline-block; margin-top: 10px;
  font-family: var(--pixel); font-size: 13px;
  color: var(--yellow); background: var(--panel);
  border: 2px solid var(--yellow);
  padding: 14px 22px; text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--yellow);
  transition: all .1s steps(2);
}
.btn-8bit:hover {
  background: var(--yellow); color: #000;
  transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--yellow);
}

/* ============ terminal ============ */
.terminal {
  background: var(--panel); border: 2px solid var(--green);
  box-shadow: 0 0 22px rgba(53,255,110,.15), inset 0 0 40px rgba(53,255,110,.04);
}
.term-head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; background: rgba(53,255,110,.08);
  border-bottom: 1px solid var(--green);
}
.dot { width: 11px; height: 11px; display: inline-block; }
.dot.r { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot.y { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.dot.g { background: var(--green); box-shadow: 0 0 6px var(--green); }
.term-title { margin-left: auto; color: var(--dim); font-size: 14px; }
.term-body {
  min-height: 180px; padding: 14px 16px;
  font-size: 16px; line-height: 1.55; color: var(--green);
  white-space: pre-wrap;
}
.term-body .cyan{color:var(--cyan)} .term-body .mag{color:var(--magenta)}
.term-body .yel{color:var(--yellow)} .term-body .dim{color:var(--dim)}

/* ============ skills ============ */
.skills-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.card {
  background: var(--panel); border: 2px solid var(--cyan);
  padding: 18px; text-align: center;
  transform: skewX(-2deg);
  transition: transform .1s;
}
.card:hover { transform: skewX(0deg) translateY(-3px); box-shadow: 0 0 16px rgba(0,255,204,.4); }
.card-icon { font-size: 30px; }
.card h3 { font-family: var(--pixel); font-size: 12px; color: var(--cyan); margin: 10px 0; }
.card p { color: var(--dim); font-size: 14px; margin-top: 8px; }
.bar {
  height: 12px; border: 1px solid var(--dim); background: #000;
  position: relative; overflow: hidden;
}
.bar span { display:block; height:100%;
  box-shadow: 0 0 10px currentColor;
}
.bg-cyan{background:var(--cyan);color:var(--cyan)}
.bg-magenta{background:var(--magenta);color:var(--magenta)}
.bg-green{background:var(--green);color:var(--green)}
.bg-yellow{background:var(--yellow);color:var(--yellow)}

.matrix-box {
  margin-top: 24px; padding: 12px; min-height: 60px;
  border: 1px dashed var(--purple); color: var(--purple);
  font-size: 14px; word-break: break-all;
}

/* ============ FAQ ============ */
.faq details {
  background: var(--panel); border: 2px solid var(--cyan);
  margin-bottom: 12px;
}
.faq summary {
  padding: 13px 16px; cursor: pointer; color: var(--cyan);
  font-size: 16px; list-style: none; user-select: none;
}
.faq summary:hover { background: rgba(0,255,204,.08); }
.faq summary::before { content: "▸ "; }
.faq details[open] summary::before { content: "▾ "; }
.faq details p {
  padding: 0 16px 14px; color: var(--white); font-size: 16px;
  border-top: 1px dashed var(--line);
}
.ok { color: var(--green); text-shadow: 0 0 6px var(--green); }

/* ============ contact ============ */
.contact-card {
  border: 2px solid var(--yellow); background: var(--panel);
  padding: 20px; box-shadow: 0 0 22px rgba(255,230,0,.12);
}
.c-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 4px; border-bottom: 1px dashed var(--line);
  font-size: 17px; flex-wrap: wrap;
}
.c-line span { color: var(--yellow); }
.c-line a { color: var(--cyan); text-decoration: none; }
.c-line a:hover { text-shadow: 0 0 8px var(--cyan); }
.ending {
  margin-top: 26px; text-align: center; color: var(--green);
  font-size: 17px; animation: blink 1.6s steps(2) infinite;
}

/* ============ responsive ============ */
@media (max-width: 640px) {
  h1 { font-size: 26px; }
  .pixel-nav a { font-size: 9px; padding: 8px 10px; }
  .hud { font-size: 9px; flex-wrap: wrap; gap: 4px; }
  .hero-stats { gap: 14px; }
  .c-line { font-size: 15px; flex-direction: column; gap: 4px; }
}