/* ============================================================
   Pixel / digital retro theme
   - VT323 for body (terminal-ish, readable)
   - Press Start 2P for headings (chunky pixel)
   - Deep near-black background, cyan phosphor glow
   - Pixel block cursor + custom system cursor
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

/* ---------- Pixel-perfect rendering ---------- */
html {
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Fonts ---------- */
body, p, li, a, span, div, td, th, blockquote, code, pre, input, button, textarea {
  font-family: 'VT323', 'Courier New', monospace !important;
  font-size: 20px !important;
  letter-spacing: 0.5px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Press Start 2P', 'VT323', monospace !important;
  line-height: 1.6 !important;
  letter-spacing: 1px;
}
h1 { font-size: 22px !important; }
h2 { font-size: 18px !important; }
h3 { font-size: 15px !important; }
h4, h5, h6 { font-size: 13px !important; }

/* ---------- Animated dark backdrop ----------
   Theme dark mode applies filter:invert(1) on body, so we counter it
   on ::before with another invert(1). Author colors here = what the
   user actually sees in dark mode. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 20% 10%, #0a0f1f 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, #07101a 0%, transparent 55%),
    linear-gradient(125deg, #02030a, #06081a, #03060f, #01030a);
  background-size: 200% 200%, 200% 200%, 400% 400%;
  animation: bgShift 22s ease infinite;
  opacity: 1;
  pointer-events: none;
}
body[a="dark"]::before,
body[a="auto"]::before {
  filter: invert(1);
}
@keyframes bgShift {
  0%   { background-position: 0% 0%, 100% 100%, 0% 50%; }
  50%  { background-position: 100% 50%, 0% 50%, 100% 50%; }
  100% { background-position: 0% 0%, 100% 100%, 0% 50%; }
}

/* ---------- CRT scanline overlay ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.0) 0px,
    rgba(0, 0, 0, 0.0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.0) 4px
  );
  mix-blend-mode: multiply;
}
body[a="dark"]::after,
body[a="auto"]::after {
  filter: invert(1);
}

/* ---------- Particle canvas ---------- */
#cool-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}
body[a="dark"] #cool-canvas,
body[a="auto"] #cool-canvas {
  filter: invert(1);
}

/* ---------- Page fade-in ---------- */
main.page-content {
  animation: fadeUp 0.7s steps(8, end) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Heading phosphor glow + blink caret ----------
   Colors below are PRE-INVERTED so that the body filter:invert(1)
   in dark mode renders them as the intended amber/gold phosphor.
   Target rendered color in dark mode ≈ rgb(255, 200, 110) (warm amber). */
h1, h2, h3 {
  text-shadow:
    0 0 4px rgba(0, 55, 145, 0.55),
    0 0 12px rgba(20, 80, 160, 0.35);
  transition: text-shadow 0.2s steps(4);
}
h1:hover, h2:hover, h3:hover {
  text-shadow:
    0 0 6px rgba(0, 40, 130, 0.95),
    0 0 18px rgba(0, 60, 140, 0.7);
}
h1::after {
  content: "_";
  display: inline-block;
  margin-left: 4px;
  animation: blink 1s steps(2) infinite;
  color: inherit;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- Animated link underline ---------- */
a {
  position: relative;
  transition: color 0.2s steps(4), text-shadow 0.2s steps(4);
}
a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.25s steps(6);
}
a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
a:hover {
  /* pre-inverted: renders as warm amber in dark mode */
  text-shadow: 0 0 6px rgba(0, 50, 130, 0.9);
}

/* ---------- Image: keep pixel feel, no rounded corners ---------- */
img {
  border-radius: 0;
  image-rendering: pixelated;
  transition: transform 0.2s steps(4), box-shadow 0.2s steps(4);
}
img:hover {
  transform: translate(-2px, -2px);
  /* pre-inverted: shows as warm amber shadow */
  box-shadow: 4px 4px 0 rgba(0, 60, 130, 0.6);
}

/* ---------- Code / blockquote (colors pre-inverted for dark mode) ---------- */
blockquote {
  border-left: 4px solid rgba(0, 55, 130, 0.7) !important;
  padding-left: 0.8em !important;
  background: rgba(225, 225, 225, 0.25) !important;
}
code, pre {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #471700 !important; /* renders as warm amber */
  border-radius: 0 !important;
  border: 1px solid rgba(0, 55, 130, 0.3);
  padding: 0 4px;
}

/* ---------- Pixel system cursor ----------
   16x16 pixel arrow rendered as SVG data URI. White fill + black outline
   so it stays visible on any background. CSS cursors are OS-rendered and
   are NOT affected by the body's invert() filter, so the colors are literal.
   Hotspot at (1,1) — the tip of the arrow. */
html, body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='0' y='0' width='1' height='1' fill='black'/><rect x='0' y='1' width='2' height='1' fill='black'/><rect x='0' y='2' width='1' height='1' fill='black'/><rect x='2' y='2' width='1' height='1' fill='black'/><rect x='0' y='3' width='1' height='1' fill='black'/><rect x='3' y='3' width='1' height='1' fill='black'/><rect x='0' y='4' width='1' height='1' fill='black'/><rect x='4' y='4' width='1' height='1' fill='black'/><rect x='0' y='5' width='1' height='1' fill='black'/><rect x='5' y='5' width='1' height='1' fill='black'/><rect x='0' y='6' width='1' height='1' fill='black'/><rect x='6' y='6' width='1' height='1' fill='black'/><rect x='0' y='7' width='1' height='1' fill='black'/><rect x='7' y='7' width='1' height='1' fill='black'/><rect x='0' y='8' width='1' height='1' fill='black'/><rect x='8' y='8' width='1' height='1' fill='black'/><rect x='0' y='9' width='1' height='1' fill='black'/><rect x='9' y='9' width='1' height='1' fill='black'/><rect x='0' y='10' width='1' height='1' fill='black'/><rect x='6' y='10' width='5' height='1' fill='black'/><rect x='0' y='11' width='1' height='1' fill='black'/><rect x='3' y='11' width='1' height='1' fill='black'/><rect x='6' y='11' width='1' height='1' fill='black'/><rect x='0' y='12' width='2' height='1' fill='black'/><rect x='4' y='12' width='1' height='1' fill='black'/><rect x='6' y='12' width='1' height='1' fill='black'/><rect x='4' y='13' width='1' height='1' fill='black'/><rect x='7' y='13' width='1' height='1' fill='black'/><rect x='5' y='14' width='1' height='1' fill='black'/><rect x='8' y='14' width='1' height='1' fill='black'/><rect x='6' y='15' width='2' height='1' fill='black'/><rect x='1' y='2' width='1' height='1' fill='white'/><rect x='1' y='3' width='2' height='1' fill='white'/><rect x='1' y='4' width='3' height='1' fill='white'/><rect x='1' y='5' width='4' height='1' fill='white'/><rect x='1' y='6' width='5' height='1' fill='white'/><rect x='1' y='7' width='6' height='1' fill='white'/><rect x='1' y='8' width='7' height='1' fill='white'/><rect x='1' y='9' width='8' height='1' fill='white'/><rect x='1' y='10' width='5' height='1' fill='white'/><rect x='1' y='11' width='2' height='1' fill='white'/><rect x='4' y='11' width='2' height='1' fill='white'/><rect x='5' y='12' width='1' height='1' fill='white'/><rect x='5' y='13' width='2' height='1' fill='white'/><rect x='6' y='14' width='2' height='1' fill='white'/></svg>") 1 1, default;
}
a, button { cursor: pointer; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, main.page-content, a::after, h1::after { animation: none; }
}