@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

:root {
  --bg: #0a0e14;
  --bg-light: #0d1117;
  --bg-card: #111820;
  --border: #1e2a3a;
  --green: #39ff14;
  --green-dim: #1a7a0a;
  --cyan: #00e5ff;
  --yellow: #ffcb30;
  --orange: #ff8c42;
  --pink: #ff6b9d;
  --purple: #c678dd;
  --blue: #61afef;
  --red: #e06c75;
  --string: #98c379;
  --comment: #5c6370;
  --text: #abb2bf;
  --white: #e6e6e6;
  --key: #e06c75;
  --number: #d19a66;
  --bool: #56b6c2;
  --nav-bg: rgba(10,14,20,0.92);
  --scanline-opacity: 1;
  --vignette: rgba(0,0,0,0.4);
  --avatar-filter: grayscale(50%) brightness(0.9);
  --avatar-filter-hover: grayscale(0%) brightness(1);
  --glow-green: rgba(57,255,20,0.5);
  --glow-cyan: rgba(0,229,255,0.4);
  --glow-key: rgba(224,108,117,0.45);
  --glow-string: rgba(152,195,121,0.4);
  --glow-number: rgba(209,154,102,0.4);
  --glow-bool: rgba(86,182,194,0.4);
  --glow-yellow: rgba(255,203,48,0.4);
  --glow-blue: rgba(97,175,239,0.4);
  --glow-white: rgba(230,230,230,0.28);
}

/* System preference: light — CSS handles default, no cookie/server needed */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fdf6e3;
    --bg-light: #f5efd4;
    --bg-card: #eee8d5;
    --border: #cdc6b0;
    --green: #4f8700;
    --green-dim: #82aa00;
    --cyan: #008080;
    --yellow: #9a6e00;
    --orange: #bc4b1a;
    --pink: #b83280;
    --purple: #7b5ea7;
    --blue: #1d78c2;
    --red: #c0392b;
    --string: #5d8a3c;
    --comment: #93a1a1;
    --text: #586e75;
    --white: #073642;
    --key: #c0392b;
    --number: #bc4b1a;
    --bool: #008080;
    --nav-bg: rgba(253,246,227,0.94);
    --scanline-opacity: 0.25;
    --vignette: rgba(0,0,0,0.08);
    --avatar-filter: grayscale(20%) brightness(1.05);
    --avatar-filter-hover: grayscale(0%) brightness(1.1);
    --glow-green: rgba(79,135,0,0.18);
    --glow-cyan: rgba(0,128,128,0.14);
    --glow-key: rgba(192,57,43,0.14);
    --glow-string: rgba(93,138,60,0.14);
    --glow-number: rgba(188,75,26,0.14);
    --glow-bool: rgba(0,128,128,0.14);
    --glow-yellow: rgba(154,110,0,0.14);
    --glow-blue: rgba(29,120,194,0.14);
    --glow-white: rgba(7,54,66,0.12);
  }
}

/* Explicit user override: light */
[data-theme="light"] {
  --bg: #fdf6e3;
  --bg-light: #f5efd4;
  --bg-card: #eee8d5;
  --border: #cdc6b0;
  --green: #4f8700;
  --green-dim: #82aa00;
  --cyan: #008080;
  --yellow: #9a6e00;
  --orange: #bc4b1a;
  --pink: #b83280;
  --purple: #7b5ea7;
  --blue: #1d78c2;
  --red: #c0392b;
  --string: #5d8a3c;
  --comment: #93a1a1;
  --text: #586e75;
  --white: #073642;
  --key: #c0392b;
  --number: #bc4b1a;
  --bool: #008080;
  --nav-bg: rgba(253,246,227,0.94);
  --scanline-opacity: 0.25;
  --vignette: rgba(0,0,0,0.08);
  --avatar-filter: grayscale(20%) brightness(1.05);
  --avatar-filter-hover: grayscale(0%) brightness(1.1);
  --glow-green: rgba(79,135,0,0.18);
  --glow-cyan: rgba(0,128,128,0.14);
  --glow-key: rgba(192,57,43,0.14);
  --glow-string: rgba(93,138,60,0.14);
  --glow-number: rgba(188,75,26,0.14);
  --glow-bool: rgba(0,128,128,0.14);
  --glow-yellow: rgba(154,110,0,0.14);
  --glow-blue: rgba(29,120,194,0.14);
  --glow-white: rgba(7,54,66,0.12);
}

/* Explicit session override: dark — wins over prefers-color-scheme: light */
[data-theme="dark"] {
  --bg: #0a0e14;
  --bg-light: #0d1117;
  --bg-card: #111820;
  --border: #1e2a3a;
  --green: #39ff14;
  --green-dim: #1a7a0a;
  --cyan: #00e5ff;
  --yellow: #ffcb30;
  --orange: #ff8c42;
  --pink: #ff6b9d;
  --purple: #c678dd;
  --blue: #61afef;
  --red: #e06c75;
  --string: #98c379;
  --comment: #5c6370;
  --text: #abb2bf;
  --white: #e6e6e6;
  --key: #e06c75;
  --number: #d19a66;
  --bool: #56b6c2;
  --nav-bg: rgba(10,14,20,0.92);
  --scanline-opacity: 1;
  --vignette: rgba(0,0,0,0.4);
  --avatar-filter: grayscale(50%) brightness(0.9);
  --avatar-filter-hover: grayscale(0%) brightness(1);
  --glow-green: rgba(57,255,20,0.5);
  --glow-cyan: rgba(0,229,255,0.4);
  --glow-key: rgba(224,108,117,0.45);
  --glow-string: rgba(152,195,121,0.4);
  --glow-number: rgba(209,154,102,0.4);
  --glow-bool: rgba(86,182,194,0.4);
  --glow-yellow: rgba(255,203,48,0.4);
  --glow-blue: rgba(97,175,239,0.4);
  --glow-white: rgba(230,230,230,0.28);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dim) var(--bg);
  color-scheme: dark light;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px);
  pointer-events: none;
  z-index: 9999;
  opacity: var(--scanline-opacity);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, var(--vignette) 100%);
  pointer-events: none;
  z-index: 9998;
}

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  background: var(--nav-bg);
}

.nav-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }

.nav-prompt {
  padding: 10px 16px;
  color: var(--green);
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-link {
  padding: 10px 14px;
  color: var(--comment);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  transition: all 0.25s ease;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  margin-bottom: -1px;
}
.nav-link:hover { color: var(--cyan); background: rgba(0,229,255,0.04); border-bottom-color: var(--cyan); text-shadow: 0 0 8px var(--glow-cyan); }
.nav-link.active { color: var(--green); border-bottom-color: var(--green); text-shadow: 0 0 8px var(--glow-green); }
.nav-inner .pipe { color: var(--comment); display: flex; align-items: center; font-size: 12px; }

/* MAIN */
main { max-width: 960px; margin: 0 auto; padding: 70px 20px 60vh; }

/* SECTIONS */
section { margin-bottom: 50px; opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
section.visible { opacity: 1; transform: translateY(0); }

.cmd-line {
  margin-bottom: 12px; padding: 8px 0; font-size: 13px;
  opacity: 0; transform: translateX(-20px);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
section.visible .cmd-line { opacity: 1; transform: translateX(0); }

h2.cmd-line {
  margin-top: 0;
  font-weight: normal;
  font-family: inherit;
  line-height: inherit;
  color: var(--blue);
}
h2.cmd-line::before { content: "❯ cat "; color: var(--green); font-weight: 600; text-shadow: 0 0 8px var(--glow-green); }
.cmd-pipe { color: var(--cyan); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.prompt { color: var(--green); font-weight: 600; text-shadow: 0 0 8px var(--glow-green); }
.path { color: var(--blue); text-shadow: 0 0 6px var(--glow-blue); }
.cmd { color: var(--white); text-shadow: 0 0 5px var(--glow-white); }
.pipe-op { color: var(--yellow); text-shadow: 0 0 6px var(--glow-yellow); }
.flag { color: var(--cyan); text-shadow: 0 0 6px var(--glow-cyan); }

/* AVATAR */
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 4px;
  border: 1px solid var(--green);
  box-shadow: 0 0 15px rgba(57,255,20,0.15);
  filter: var(--avatar-filter);
  transition: filter 0.4s ease, box-shadow 0.4s ease;
  float: right;
  margin: 0 0 12px 20px;
  shape-outside: margin-box;
}
.avatar:hover {
  filter: var(--avatar-filter-hover);
  box-shadow: 0 0 20px rgba(57,255,20,0.35);
}

/* JSON BLOB */
.json-blob {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
}
.json-blob::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0;
  transition: opacity 0.6s ease;
}
section.visible .json-blob::before { opacity: 0.6; }

.json-blob .line {
  white-space: pre;
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
section.visible .json-blob .line { opacity: 1; transform: translateX(0); }

/* SYNTAX */
.b { color: var(--white); text-shadow: 0 0 5px var(--glow-white); }
.k { color: var(--key);    text-shadow: 0 0 6px var(--glow-key); }
.s { color: var(--string); text-shadow: 0 0 6px var(--glow-string); }
.n { color: var(--number); text-shadow: 0 0 6px var(--glow-number); }
.o { color: var(--bool);   text-shadow: 0 0 6px var(--glow-bool); }
.u { color: var(--purple); font-style: italic; text-shadow: 0 0 6px rgba(198,120,221,0.35); }
.c { color: var(--comment); font-style: italic; }
.a { color: var(--yellow); text-shadow: 0 0 6px var(--glow-yellow); }

/* ASCII */
.ascii-hero { display: flex; justify-content: center; margin-bottom: 30px; opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16,1,0.3,1); }
section.visible .ascii-hero { opacity: 1; transform: scale(1); }
.ascii-art {
  color: var(--green);
  font-size: 8px;
  line-height: 1.15;
  letter-spacing: 0;
  display: inline-block;
  text-shadow: 0 0 10px rgba(57,255,20,0.3);
  animation: glow 3s ease-in-out infinite alternate;
}
@keyframes glow {
  from { text-shadow: 0 0 10px rgba(57,255,20,0.2), 0 0 20px rgba(57,255,20,0.1); }
  to   { text-shadow: 0 0 15px rgba(57,255,20,0.4), 0 0 30px rgba(57,255,20,0.2); }
}

.cursor {
  display: inline-block; width: 8px; height: 16px;
  background: var(--green);
  box-shadow: 0 0 8px var(--glow-green), 0 0 18px var(--glow-green);
  animation: blink 1s step-end infinite;
  vertical-align: middle; margin-left: 2px;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* SKILL BARS */
.skill-bar-wrap { display: inline-flex; align-items: center; gap: 6px; }
.skill-bar { display: inline-block; height: 10px; background: var(--border); border-radius: 2px; overflow: hidden; width: 120px; vertical-align: middle; }
.sf { display:block; height: 100%; border-radius: 2px; width: 0%; transition: width 1.2s cubic-bezier(0.16,1,0.3,1); }
section.visible .sf { width: var(--lv); }
.sf.red    { background: var(--red);    box-shadow: 0 0 8px rgba(224,108,117,0.4); }
.sf.green  { background: var(--green);  box-shadow: 0 0 8px rgba(57,255,20,0.4); }
.sf.cyan   { background: var(--cyan);   box-shadow: 0 0 8px rgba(0,229,255,0.4); }
.sf.yellow { background: var(--yellow); box-shadow: 0 0 8px rgba(255,203,48,0.4); }
.sf.pink   { background: var(--pink);   box-shadow: 0 0 8px rgba(255,107,157,0.4); }
.sf.orange { background: var(--orange); box-shadow: 0 0 8px rgba(255,140,66,0.4); }
.sf.purple { background: var(--purple); box-shadow: 0 0 8px rgba(198,120,221,0.4); }
.sf.blue   { background: var(--blue);   box-shadow: 0 0 8px rgba(97,175,239,0.4); }

/* MISC */
.stderr { color: var(--comment); font-size: 12px; margin-top: 8px; padding-left: 4px; opacity: 0; transition: opacity 0.6s ease 0.8s; }
section.visible .stderr { opacity: 1; }

a.lnk { color: var(--cyan); text-decoration: none; position: relative; }
a.lnk::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--cyan); transition: width 0.3s ease; }
a.lnk:hover::after { width: 100%; }
a.lnk:hover { text-shadow: 0 0 8px rgba(0,229,255,0.4); }

.pipe-separator { text-align: center; padding: 8px 0; color: var(--comment); font-size: 12px; opacity: 0; transition: opacity 0.4s ease 0.3s; }
section.visible .pipe-separator { opacity: 1; }

footer { text-align: center; padding: 40px 20px; color: var(--comment); font-size: 12px; border-top: 1px solid var(--border); max-width: 960px; margin: 0 auto; }
.exit-code { color: var(--green); text-shadow: 0 0 10px var(--glow-green); }

@media (max-width: 640px) {
  body { font-size: 12px; }
  .ascii-art { font-size: 5px; }
  .json-blob { padding: 16px; overflow-x: auto; }
  .nav-prompt { padding: 8px 10px; font-size: 11px; }
  .nav-link { padding: 8px 10px; font-size: 11px; }
  .skill-bar { width: 80px; }
  .avatar { float: none; display: block; margin: 0 auto 16px; }
}

/* PHOSPHOR GLOW — simulates CRT phosphor charging on element entry */
@keyframes phosphor-burst {
  0%   { filter: brightness(2.2) blur(1.2px); }
  45%  { filter: brightness(1.5) blur(0.4px); }
  100% { filter: brightness(1)   blur(0); }
}

@keyframes phosphor-burst-light {
  0%   { filter: brightness(0.93) saturate(0.55) blur(0.4px); }
  55%  { filter: brightness(0.99) saturate(0.9)  blur(0.1px); }
  100% { filter: brightness(1)    saturate(1)    blur(0); }
}

section.visible .cmd-line {
  animation: phosphor-burst 0.9s ease-out forwards;
}
section.visible .json-blob {
  animation: phosphor-burst 1.1s ease-out forwards 0.08s;
}
section.visible .ascii-hero {
  animation: phosphor-burst 1.4s ease-out forwards;
}

@media (prefers-color-scheme: light) {
  section.visible .cmd-line,
  section.visible .json-blob,
  section.visible .ascii-hero { animation-name: phosphor-burst-light; }
}
[data-theme="light"] section.visible .cmd-line,
[data-theme="light"] section.visible .json-blob,
[data-theme="light"] section.visible .ascii-hero { animation-name: phosphor-burst-light; }
[data-theme="dark"] section.visible .cmd-line,
[data-theme="dark"] section.visible .json-blob,
[data-theme="dark"] section.visible .ascii-hero { animation-name: phosphor-burst; }

@media (prefers-reduced-motion: reduce) {
  section.visible .cmd-line,
  section.visible .json-blob,
  section.visible .ascii-hero { animation: none !important; }
}

.konami-activated { animation: matrix 0.5s ease; }
@keyframes matrix { 0%{filter:hue-rotate(0deg)} 50%{filter:hue-rotate(180deg)} 100%{filter:hue-rotate(360deg)} }

/* LIGHT MODE OVERRIDES */
[data-theme="light"] .ascii-art {
  text-shadow: 0 0 10px rgba(79,135,0,0.2);
  animation: glow-light 3s ease-in-out infinite alternate;
}
@keyframes glow-light {
  from { text-shadow: 0 0 10px rgba(79,135,0,0.15), 0 0 20px rgba(79,135,0,0.08); }
  to   { text-shadow: 0 0 15px rgba(79,135,0,0.3),  0 0 30px rgba(79,135,0,0.12); }
}

/* CRT SCANLINE WIPE via View Transitions API
 * Both masks share an 80px soft blend zone that travels in sync,
 * so new theme fades in above the beam while old theme fades out below it. */
::view-transition-new(root) {
  mask-image: linear-gradient(to bottom, black calc(100% - 160px), transparent 100%);
  mask-size: 100% calc(100vh + 160px);
  mask-repeat: no-repeat;
  filter: drop-shadow(0 8px 18px #39ff14) drop-shadow(0 4px 40px rgba(57,255,20,0.3));
  animation: crt-new-reveal 1s linear;
}
@keyframes crt-new-reveal {
  from { mask-position: 0 calc(-100vh - 160px); }
  to   { mask-position: 0 0; }
}

::view-transition-old(root) {
  mask-image: linear-gradient(to bottom, transparent 0%, black 160px, black 100%);
  mask-size: 100% calc(100vh + 160px);
  mask-repeat: no-repeat;
  animation: crt-old-hide 1s linear;
}
@keyframes crt-old-hide {
  from { mask-position: 0 -160px; }
  to   { mask-position: 0 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root),
  ::view-transition-old(root) { animation: none; }
}

/* PINBALL BACKGROUND */
.pinball-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* THEME TOGGLE */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  margin-left: auto;
  transition: opacity 0.2s ease;
  opacity: 0.65;
  flex-shrink: 0;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle:focus-visible { outline: 1px solid var(--green); outline-offset: -2px; }