/* ================================================
   Cyberpunk Theme — Shared Styles (all pages)
   Mermaid styling lives in sass/_mermaid.scss (single source of truth).
   ================================================ */

:root {
  --cyber-primary-rgb: 160, 100, 220;
  --cyber-secondary-rgb: 200, 120, 240;
  --cyber-light-rgb:   220, 160, 255;
}

/* ========== BG Canvas ========== */
#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ========== Reading Progress Bar ========== */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, rgb(var(--cyber-primary-rgb)), rgb(var(--cyber-secondary-rgb)), rgb(var(--cyber-light-rgb)));
  z-index: 999; width: 0; transition: width .1s linear;
  box-shadow: 0 0 8px rgba(var(--cyber-primary-rgb),.5), 0 0 16px rgba(var(--cyber-secondary-rgb),.3);
}

/* ========== Scanline Overlay ========== */
.scan-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 998;
  background:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 2px,
      rgba(var(--cyber-primary-rgb),.015) 2px, rgba(var(--cyber-primary-rgb),.015) 4px
    );
}
.scan-overlay::after {
  content: ""; position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}

/* Bring content above canvas */
.container { position: relative; z-index: 1; }

/* ========== Page fade-in transition ========== */
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .container {
    animation: contentFadeIn 0.6s ease-out forwards;
  }
}

/* ========== Neon Glow on headings & links ========== */
.post-title {
  text-shadow: 0 0 6px rgba(var(--cyber-primary-rgb),.3), 0 0 20px rgba(var(--cyber-primary-rgb),.1);
}
.post-title a:hover {
  text-shadow: 0 0 10px rgba(var(--cyber-primary-rgb),.6), 0 0 30px rgba(var(--cyber-primary-rgb),.2);
  transition: text-shadow .3s ease;
}
.post-content a {
  transition: all .2s ease;
  text-decoration: underline;
  text-decoration-color: rgba(var(--cyber-primary-rgb),.3);
}
.post-content a:hover {
  text-shadow: 0 0 6px rgba(var(--cyber-primary-rgb),.4);
  text-decoration-color: rgba(var(--cyber-primary-rgb),.8);
}
.post-content a:not(.series-toggle):hover {
  text-shadow: 0 0 6px rgba(var(--cyber-primary-rgb),.4);
  text-decoration-color: rgba(var(--cyber-primary-rgb),.8);
}
h1, h2, h3, h4, h5, h6 {
  text-shadow: 0 0 4px rgba(var(--cyber-primary-rgb),.15);
}

/* Fix: theme blockquote::before uses position:absolute without a relative parent,
   causing the decorative `"` to escape to the top-left corner of the page. */
blockquote {
  position: relative;
}
.post-content {
  position: relative;
}
.post-content h2 {
  border-bottom: 1px solid rgba(var(--cyber-primary-rgb),.15);
  padding-bottom: 6px;
}

/* ========== CRT cursor blink on logo ========== */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ========== Terminal-style header ========== */
/* Kill the theme's repeating-bar separator */
.header__logo:after { display: none !important; }

/* Terminal prompt: monospace, no box background */
.terminal-prompt {
  font-family: 'Courier New', 'Consolas', 'Liberation Mono', monospace;
  font-size: 1rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.prompt-user  { color: rgb(var(--cyber-secondary-rgb)); }
.prompt-at    { color: rgba(var(--cyber-primary-rgb),.5); }
.prompt-host  { color: rgb(var(--cyber-primary-rgb)); }
.prompt-colon { color: rgba(var(--cyber-primary-rgb),.5); }
.prompt-path  { color: rgb(var(--cyber-light-rgb)); }
.prompt-dollar { color: rgb(var(--cyber-primary-rgb)); margin-right: .25em; }
.prompt-cursor {
  display: inline-block;
  animation: cursorBlink 1s step-end infinite;
  color: rgb(var(--cyber-primary-rgb));
}

/* Override the theme's logo box to be transparent, preserve --accent for theme */
.logo {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

/* ========== Terminal-style menu with brackets ========== */
.header .menu__inner li a::before {
  content: "[";
  color: rgba(var(--cyber-primary-rgb),.4);
}
.header .menu__inner li a::after {
  content: "]";
  color: rgba(var(--cyber-primary-rgb),.4);
}
.header .menu__inner li a {
  font-family: 'Courier New', 'Consolas', 'Liberation Mono', monospace;
  font-size: .9rem;
  letter-spacing: .02em;
  transition: color .2s, text-shadow .2s;
}
.header .menu__inner li a:hover {
  text-shadow: 0 0 8px rgba(var(--cyber-primary-rgb),.5);
}
/* Current-page active state via the theme .active class */
.header .menu__inner li.active a {
  color: rgb(var(--cyber-primary-rgb));
  text-shadow: 0 0 8px rgba(var(--cyber-primary-rgb),.4);
}
.header .menu__inner li.active a::before,
.header .menu__inner li.active a::after {
  color: rgb(var(--cyber-primary-rgb));
  text-shadow: 0 0 8px rgba(var(--cyber-primary-rgb),.4);
}

/* ========== Glow on code blocks ========== */
pre {
  border-left: 2px solid rgba(var(--cyber-primary-rgb),.2);
  transition: border-color .3s ease;
}
pre:hover {
  border-left-color: rgba(var(--cyber-primary-rgb),.5);
}
code {
  text-shadow: 0 0 4px rgba(var(--cyber-primary-rgb),.15);
}

/* ========== Cyberpunk selection ========== */
::selection {
  background: rgba(var(--cyber-primary-rgb),.3);
  color: #fff;
}
::-moz-selection {
  background: rgba(var(--cyber-primary-rgb),.3);
  color: #fff;
}