/* ═══════════════════════════════════════════════════════════════════════════
   KEROKITA - Retro Neon Stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES (VARIABLES)
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Dark mode (default) */
  --bg-primary: #050505;
  --bg-secondary: #0d0d0d;
  --bg-tertiary: #141414;
  --text-primary: #39ff14;
  --text-secondary: #2edc0e;
  --text-dim: #1fa809;
  --text-ghost: #0f4805;
  --link-color: #ff2d9b;
  --link-hover: #ff69b4;
  --link-visited: #ff2d9b;
  --border-color: #39ff14;
  --glow-color: rgba(57, 255, 20, 0.5);
  --glow-link: rgba(255, 45, 155, 0.5);
  --scanline-color: rgba(0, 0, 0, 0.15);
  --link-underline: none;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  
  /* Typography */
  --font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'SF Mono', 'Consolas', 'Monaco', 'Andale Mono', 'Courier New', monospace;
  --font-size-base: 16px;
  --line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────────────────────
   RESET & BASE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

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

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   CRT SCANLINE EFFECT
   ───────────────────────────────────────────────────────────────────────────── */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    var(--scanline-color),
    var(--scanline-color) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* Lift images above the scanline overlay so their pixels aren't broken up
   by the 1px-on/1px-off gradient. The overlay is at z-index 9999 fixed;
   we give images a new stacking context at a higher z-index. */
img, .mood-icon {
  position: relative;
  z-index: 10000;
}

/* Subtle screen flicker animation */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.95; }
  94% { opacity: 1; }
  97% { opacity: 0.98; }
  98% { opacity: 1; }
}

body {
  animation: flicker 8s infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */

.terminal-container {
  max-width: 80ch;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ASCII BANNER
   ───────────────────────────────────────────────────────────────────────────── */

.ascii-banner {
  text-align: center;
  margin-bottom: var(--space-lg);
  overflow-x: auto;
}

.ascii-banner pre {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(0.4rem, 1.5vw, 0.75rem);
  line-height: 1.2;
  color: var(--text-primary);
  text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color);
  white-space: pre;
  margin: 0;
}

/* Banner glow pulse animation */
@keyframes bannerGlow {
  0%, 100% { 
    text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color);
    filter: brightness(1);
  }
  50% { 
    text-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color), 0 0 45px var(--glow-color);
    filter: brightness(1.1);
  }
}

.ascii-banner pre {
  animation: bannerGlow 4s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

.nav-menu {
  text-align: center;
  padding: var(--space-md) 0;
  margin-bottom: var(--space-lg);
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
}

.nav-menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
}

.nav-menu a {
  color: var(--link-color);
  text-decoration: var(--link-underline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-xs) var(--space-sm);
  transition: all 0.2s ease;
  position: relative; /* anchor for glitch pseudo-elements */
}

/* ── Glitch-on-hover effect ──
   Two pseudo-element copies of the link text (pink top half, green bottom half)
   animate through a sequence of clip-path polygons with tiny X translations.
   steps(1) gives the hard, snapped look instead of smooth motion.
   The .glitch-nav class is added/removed by JS in base.njk — paired with a
   character-scramble effect that rattles the letters themselves. */
.nav-menu a::before,
.nav-menu a::after {
  content: attr(data-text);
  position: absolute;
  left: var(--space-sm);
  top: var(--space-xs);
  width: 100%;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  pointer-events: none;
}

.nav-menu a::before { color: var(--link-color); }
.nav-menu a::after  { color: var(--text-primary); }

.nav-menu a.glitch-nav::before {
  animation: nav-glitch-top 0.35s steps(1) forwards;
}

.nav-menu a.glitch-nav::after {
  animation: nav-glitch-bottom 0.35s steps(1) forwards;
}

@keyframes nav-glitch-top {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  20%  { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); transform: translate(-2px, 0); }
  40%  { clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%); transform: translate(2px, 0); }
  60%  { clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%); transform: translate(-1px, 0); }
  80%  { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); transform: translate(1px, 0); }
  100% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); transform: none; }
}

@keyframes nav-glitch-bottom {
  0%   { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  20%  { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); transform: translate(2px, 0); }
  40%  { clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%); transform: translate(-2px, 0); }
  60%  { clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%); transform: translate(1px, 0); }
  80%  { clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%); transform: translate(-1px, 0); }
  100% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: none; }
}

.nav-menu a:hover {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--glow-link);
}

.nav-menu a.active {
  color: var(--text-primary);
}


/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  text-shadow: 0 0 5px var(--glow-color);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-xs); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

h2::before { content: "♥ "; color: var(--text-dim); }
h3::before { content: "♥ "; color: var(--text-dim); }

p {
  margin-bottom: var(--space-md);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LINKS
   ───────────────────────────────────────────────────────────────────────────── */

a {
  color: var(--link-color);
  text-decoration: var(--link-underline);
  transition: all 0.2s ease;
}

a:visited {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--glow-link);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN CONTENT
   ───────────────────────────────────────────────────────────────────────────── */

main {
  margin-bottom: var(--space-xl);
}

.content-box {
  border: 1px solid var(--border-color);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--bg-secondary);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.1);
}

.content-box.double-border {
  border: 3px double var(--border-color);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BLOG POSTS
   ───────────────────────────────────────────────────────────────────────────── */

.post-list {
  list-style: none;
}

.post-list li {
  padding: var(--space-md) 0;
  border-bottom: 1px dashed var(--text-dim);
}

.post-list li:last-child {
  border-bottom: none;
}

.post-date {
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: bold;
  display: inline-block;
  min-width: 12ch;
}

.post-title {
  color: var(--link-color);
}

.post-title:hover {
  text-shadow: 0 0 8px var(--glow-link);
}

/* Single post styles */
.post-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-color);
}

.post-header h1 {
  margin-bottom: var(--space-sm);
}

.post-meta {
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* Current Status Block (Mood & Music) */
.current-status {
  margin-top: var(--space-md);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.status-row {
  margin-bottom: var(--space-xs);
}

.status-label {
  color: var(--text-secondary);
  font-weight: bold;
}

.mood-icon {
  width: auto;
  height: 42px;
  image-rendering: pixelated;
  vertical-align: middle;
  margin-right: 0.25em;
}

.post-content {
  margin-bottom: var(--space-lg);
}

.post-content ul, .post-content ol {
  margin-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.post-content li {
  margin-bottom: var(--space-xs);
}

.post-content ul li::marker {
  content: "► ";
  color: var(--text-dim);
}

.post-content blockquote {
  border-left: 3px solid var(--text-dim);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  color: var(--text-secondary);
  font-style: italic;
}

.post-content code {
  background: var(--bg-secondary);
  padding: 0.1em 0.3em;
  border: 1px solid var(--text-dim);
  font-size: 0.9em;
}

.post-content pre {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

.post-content pre code {
  border: none;
  padding: 0;
  background: none;
}

/* ── Post footer navigation (prev/next post) ──
   Three-column layout: older (left), archive link (center), newer (right).
   On mobile, stacks vertically. */
.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-md);
  font-size: 0.9rem;
}

.post-nav-prev { text-align: left; }
.post-nav-archive { text-align: center; }
.post-nav-next { text-align: right; }

.post-nav a {
  display: inline-block;
  color: var(--link-color);
  text-decoration: none;
  padding: var(--space-xs) 0;
  line-height: 1.4;
}

.post-nav a:hover .post-nav-title {
  text-shadow: 0 0 8px var(--glow-link);
}

.post-nav-label {
  display: block;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.post-nav-title {
  display: block;
  color: var(--link-color);
}

.post-nav-archive a {
  color: var(--link-color);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.post-nav-archive a:hover {
  color: var(--link-hover);
}

@media (max-width: 600px) {
  .post-nav {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .post-nav-prev, .post-nav-next, .post-nav-archive {
    text-align: center;
  }
  .post-nav-prev { order: 1; }
  .post-nav-next { order: 2; }
  .post-nav-archive {
    order: 3;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--text-dim);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAGS
   ─────────────────────────────────────────────────────────────────────────────
   Tags appear in three places:
     1. Inline on each post (after the date, in .post-meta)
     2. In the /tags/ index as a "cloud"
     3. As the heading on a /tag/<name>/ archive page
   ───────────────────────────────────────────────────────────────────────────── */

.post-tags-label {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-right: 0.25em;
}

/* Inline tag chip used in post meta and the tag cloud.
   Displayed as a small, bracketed retro-terminal token. */
.tag {
  display: inline-block;
  color: var(--link-color);
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1.6;
}

.tag::before { content: "#"; color: var(--text-dim); }

a.tag:hover {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--glow-link);
}

/* Tag cloud layout on the /tags/ index page.
   Wraps on small screens; each item is a tag chip plus a post count. */
.tag-cloud {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding: 0;
}

.tag-cloud li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.tag-count {
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* The tag name in the <h2> of a /tag/<name>/ archive page. */
.tag-heading {
  color: var(--link-color);
}

.tag-heading::before { content: "#"; color: var(--text-dim); }

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH
   ─────────────────────────────────────────────────────────────────────────── */

.search-box {
  margin-bottom: var(--space-md);
}

.search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: inherit;
  font-size: 1rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  outline: none;
}

.search-input::placeholder {
  color: var(--text-ghost);
}

.search-input:focus {
  border-color: var(--link-color);
  box-shadow: 0 0 6px var(--glow-link);
}

.search-input:disabled {
  opacity: 0.6;
  cursor: progress;
}

.search-status {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: var(--space-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LINKS PAGE
   ───────────────────────────────────────────────────────────────────────────── */

.links-section {
  margin-bottom: var(--space-lg);
}

.links-section h3 {
  margin-bottom: var(--space-sm);
}

.links-list {
  list-style: none;
}

.links-list li {
  padding: var(--space-xs) 0;
}

.links-list li::before {
  content: "♥ ";
  color: var(--text-dim);
}

.link-description {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-left: var(--space-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DECORATIVE ELEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

.divider {
  text-align: center;
  color: var(--text-dim);
  margin: var(--space-md) 0;
  overflow: hidden;
}

.divider::before,
.divider::after {
  content: ". ݁₊ ⊹ . ݁ ⟡ ݁ . ⊹ ₊ ݁.";
  display: inline-block;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.site-footer {
  text-align: center;
  padding: var(--space-lg) 0;
  margin-top: var(--space-xl);
  border-top: 1px dashed var(--border-color);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.footer-ascii {
  margin-bottom: var(--space-md);
  font-size: 0.7rem;
}

.visitor-counter {
  margin: var(--space-md) 0;
  padding: var(--space-sm);
  display: inline-block;
  border: 1px solid var(--text-dim);
  background: var(--bg-secondary);
}

.footer-badges {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.footer-badges img {
  image-rendering: pixelated;
  height: 31px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-dim { color: var(--text-dim); }
.text-glow { text-shadow: 0 0 10px var(--glow-color); }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Visually hide content while keeping it readable by screen readers.
   Useful for text alternatives to decorative ASCII art. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Blink animation (use sparingly!) */
.blink {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  :root {
    --font-size-base: 14px;
  }
  
  .terminal-container {
    padding: var(--space-md);
  }
  
  .ascii-banner pre {
    font-size: 0.35rem;
  }
  
  .nav-menu ul {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTACT PAGE
   ───────────────────────────────────────────────────────────────────────────── */

.contact-page h1 {
  margin-bottom: var(--space-md);
}

.contact-intro {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: var(--space-lg);
}

.contact-honeypot {
  display: none;
}

.contact-form {
  max-width: 60ch;
}

/* ─────────────────────────────────────────────────────────────────────────────
   POST RESPONSES (private contact form)
   ───────────────────────────────────────────────────────────────────────────── */

.section-rule {
  border: none;
  border-top: 1px dashed var(--text-dim);
  margin: var(--space-lg) 0;
}

.post-responses details {
  border: 3px double var(--border-color);
}

.post-responses details summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
  text-shadow: 0 0 5px var(--glow-color);
  user-select: none;
  transition: color 0.2s, text-shadow 0.2s;
}

.post-responses details summary::-webkit-details-marker { display: none; }

.post-responses details[open] summary {
  border-bottom: 1px solid var(--border-color);
}

.post-responses details summary::before { content: "♥ "; color: var(--text-dim); }
.post-responses details summary::after {
  content: " +";
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.post-responses details[open] summary::after { content: " −"; }

.post-responses details summary:hover {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--glow-link);
}

.responses-form {
  padding: var(--space-md);
}

.responses-form > p {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: var(--space-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.form-group label {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input,
.form-group textarea {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: var(--space-sm) var(--space-md);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-ghost);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--text-primary);
  box-shadow: 0 0 6px var(--glow-color);
}

.form-group textarea { min-height: 6rem; }

.form-submit {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: transparent;
  color: var(--link-color);
  border: 1px solid var(--link-color);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.form-submit:hover {
  background: var(--link-color);
  color: var(--bg-primary);
  box-shadow: 0 0 10px var(--glow-link);
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   POST COMMENTS (giscus public comments)
   ───────────────────────────────────────────────────────────────────────────── */

.post-comments {
  margin-top: var(--space-md);
}

.post-comments details {
  border: 3px double var(--border-color);
}

.post-comments details summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
  text-shadow: 0 0 5px var(--glow-color);
  user-select: none;
  transition: color 0.2s, text-shadow 0.2s;
}

.post-comments details summary::-webkit-details-marker { display: none; }

.post-comments details[open] summary {
  border-bottom: 1px solid var(--border-color);
}

.post-comments details summary::before { content: "♥ "; color: var(--text-dim); }
.post-comments details summary::after {
  content: " +";
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.post-comments details[open] summary::after { content: " −"; }

.post-comments details summary:hover {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--glow-link);
}

.comments-container {
  padding: var(--space-md);
}

/* Giscus iframe container layout */
.giscus {
  width: 100%;
  margin-top: var(--space-sm);
}

.giscus-frame {
  width: 100% !important;
  border: none;
  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT STYLES
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
  body::before { display: none; }
  body { animation: none; }
  .theme-toggle { display: none; }
  
  :root {
    --bg-primary: white;
    --text-primary: black;
    --link-color: black;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   Respect users who have requested reduced motion at the OS level.
   Disables all looping animations; keeps static styling intact.
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Belt-and-braces for specific effects */
  body { animation: none !important; }
  body::before { display: none; } /* CRT scanline overlay */
  .ascii-banner pre { animation: none !important; text-shadow: 0 0 10px var(--glow-color); }
  .blink { animation: none !important; opacity: 1 !important; }
}