/* === BASE RESET === */
* {
  box-sizing: border-box;
  border-radius: 0 !important;
}
 
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text-main);
  letter-spacing: 0.04em;
  font-family: 'VT323', monospace;
  font-size: 20px;
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 999;
  animation: vhsDrift 20s infinite steps(1);
}

/* === ROOT VARIABLES === */
:root {
  /* Core */
  --bg: #050505;
  --bg-soft: #0f0f0f;

  /* Brand colors */
  --toxic-green: #8fd16a;
  --neon-purple: #a12bd6;
  --slime-purple: #7b1fa2;

  /* Accents */
  --glitch-cyan: #00f0ff;
  --danger-pink: #ff2cff;

  /* Text */
  --text-main: #eaeaea;
  --text-muted: #9a9a9a;
}

/* === NAV / CONTROL PANEL === */

.control-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  background: black;
  border: 2px solid var(--danger-pink);
  padding: 1rem;
  z-index: 100;
}

.control-panel a {
  color: var(--toxic-green);
  text-decoration: none;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.control-panel a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: var(--danger-pink);
  transition: width 0.2s ease;
}

.control-panel a:hover::after {
  width: 100%;
}

.control-panel a:hover {
  color: var(--danger-pink);
  text-shadow:
    2px 0 var(--glitch-cyan),
   -2px 0 var(--neon-purple);
}

header {
  background: radial-gradient(
    circle at top,
    #1a0f1f,
    var(--bg)
  );
  
  border-bottom: 2px solid var(--neon-purple);
}

header img {
  max-width: 280px;
  filter: drop-shadow(0 0 20px var(--neon-purple));
}

.site-header {
  margin: 4rem auto;
  text-align: center;
}

/* === SYSTEM WARNINGS === */

.system-warning {
  text-align: center;
  margin: 2rem 0;
}

marquee {
  color: var(--toxic-green);
  background: black;
  border-top: 2px solid var(--neon-purple);
  border-bottom: 2px solid var(--neon-purple);
  padding: 0.5rem;
}

h1, h2{
  font-size: 2.5rem;
  color: var(--toxic-green);
  text-shadow:
    2px 2px 0 var(--neon-purple),
    -2px -2px 0 var(--toxic-green);
}

 h3 {
  color: var(--neon-purple);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

p {
  max-width: 700px;
  margin: 1rem auto;
  color: var(--text-muted);
}

.glitch:hover {
  text-shadow:
    2px 0 var(--glitch-cyan),
   -2px 0 var(--danger-pink);
}

/* === ARTIFACT STRUCTURE === */

main {
  padding: 3rem 2rem;
  max-width: none;
}

.panel {
  border: 2px solid var(--neon-purple);
  padding: 1.5rem;
  margin: 3rem 0;
  width: 70%;
  background: #0a0a0a;

  box-shadow:
    4px 4px 0 var(--slime-purple),
    -2px -2px 0 var(--toxic-green);

  --tilt: -0.8deg;
  transform: rotate(var(--tilt));
  position: relative;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  animation: vhsDrift 12s infinite steps(1);
}
.panel:hover {
  transform: rotate(var(--tilt)) translate(4px, -4px);
  box-shadow:
    6px 6px 0 var(--danger-pink),
   -4px -4px 0 var(--toxic-green);
}
.panel.offset-left {
  margin-left: 5%;
  animation-delay: 6s;
}

.panel.offset-right {
  margin-left: 25%;
  --tilt: 0.6deg;
  animation-delay: 3s;
}

.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity: 0;
  pointer-events: none;
}

.panel:hover::before {
  opacity: 1;
}

a {
  color: var(--toxic-green);
  text-decoration: none;
  position: relative;
}

a:visited {
  color: var(--toxic-green);
}

a:hover {
  color: var(--danger-pink);
  text-shadow:
    2px 0 var(--glitch-cyan),
   -2px 0 var(--neon-purple);
}
a:hover::after {
  transform: scaleX(1.1);
}

a, .panel {
  cursor: pointer;
}

.panel h2 {
  color: var(--toxic-green);
}

.panel:hover h2 {
  text-shadow:
    2px 0 var(--glitch-cyan),
   -2px 0 var(--danger-pink);
}

.project-panel {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  
}

.project-panel h2 {
  color: var(--toxic-green);
}

.project {
  border-color: var(--toxic-green);
}

.project-media {
  margin: 1rem 0;
  border: 2px solid var(--neon-purple);
  background: black;
  overflow: hidden;
}

.project-media img {
    width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  filter:
    contrast(1.1)
    saturate(1.2)
    brightness(0.9);

  transition:
    filter 0.2s ease,
    transform 0.2s ease;

    margin: 1rem 0;
  border: 2px solid var(--neon-purple);
  background: black;
  overflow: hidden;

  max-height: 260px;
  position: relative;
}

.project:hover .project-media img {
  filter:
    contrast(1.4)
    saturate(1.6)
    hue-rotate(-10deg);
  transform: scale(1.02);
}

.project-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--toxic-green);
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px dashed var(--danger-pink);
}

.project-link:hover {
  color: var(--danger-pink);
  text-shadow:
    2px 0 var(--glitch-cyan),
   -2px 0 var(--neon-purple);
}

.project-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px
    );

  mix-blend-mode: overlay;
  opacity: 0.35;
  animation: noiseFlicker 6s infinite steps(2);
}

.project-link:hover {
  background: var(--danger-pink);
  color: black;
  text-shadow: none;
}

.project-cover {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
}

.project-cover-wrapper {
  position: relative;
}

.project-cover-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
  opacity: 0.5;
}

.artifact-tag {
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.content-flags {
  list-style: none;
  padding-left: 0;
}

.content-flags li::before {
  content: "▸ ";
  color: var(--danger-pink);
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.image-grid img {
  width: 100%;
  height: auto;
  filter: contrast(1.1) saturate(1.1);
}

.exit-ports {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--danger-pink);
}
.exit-warning {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.exit-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.exit-links a {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--toxic-green);
  color: var(--toxic-green);
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.15em;
  background: transparent;
  transition: all 0.15s ease;
}
.exit-links a:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  text-shadow: none;
}
.exit-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}


@keyframes noiseFlicker {
  0% { opacity: 0.25; }
  50% { opacity: 0.4; }
  100% { opacity: 0.25; }
}


.shrine {
  background: #050008;
  border-color: var(--danger-pink);
}

.shrine h2 {
  color: var(--toxic-green);
}
.shrine-links {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.shrine-links li {
  margin: 0.75rem 0;
  transform: rotate(-1deg);
}

.shrine-links li:nth-child(even) {
  transform: rotate(1.5deg);
}
.shrine-links a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  color: var(--toxic-green);
  background: black;
  border: 1px dashed var(--neon-purple);
  text-decoration: none;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.shrine-links a:hover {
  transform: translateX(6px) skewX(-5deg);
  box-shadow:
    4px 4px 0 var(--danger-pink),
   -2px -2px 0 var(--glitch-cyan);
}
.shrine-links a:active {
  transform: translateX(2px) scale(0.95);
}

footer {
  text-align: center;
  padding: 1rem;
  background: black;
}

#cursor-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}

.trail-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--neon-purple);
  border-radius: 50%;
  box-shadow:
    0 0 6px var(--glitch-cyan),
    0 0 12px var(--danger-pink);
  opacity: 0.8;
  animation: fadeOut 0.6s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes vhsDrift {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 0.5px);
  }
  50% {
    transform: translate(1px, -0.5px);
  }
  75% {
    transform: translate(-0.5px, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.artifact img {
  max-width: 100%;
  display: block;
  margin: 1rem auto;
  filter: contrast(1.05) saturate(0.9);
  border: 2px solid var(--neon-purple);
  box-shadow:
    3px 3px 0 var(--slime-purple),
   -2px -2px 0 var(--toxic-green);
}

.bio-artifact figcaption {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.5rem;
  letter-spacing: 0.1em;
}

/* =========================
   KILLER CLOWNS OVERRIDES
   ========================= */

body.artifact-clown {
  --neon-purple: #ff2cff;     /* hot pink */
  --slime-purple: #ff6ad5;    /* softer pink */
  --danger-pink: #ff2cff;     /* unify threat color */
  --glitch-cyan: #7cff00;     /* acidic green */
}

body.artifact-clown .panel {
  box-shadow:
    6px 6px 0 var(--danger-pink),
   -3px -3px 0 var(--toxic-green);
}

body.artifact-clown marquee {
  color: var(--danger-pink);
}

/* =========================
   SCAVENGED IMAGE CORRUPTION
   ========================= */

body.artifact-clown .image-fragment,
body.artifact-clown .project-cover-wrapper {
  position: relative;
  overflow: hidden;
}

body.artifact-clown .image-fragment::before,
body.artifact-clown .project-cover-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

body.artifact-clown .image-fragment::after,
body.artifact-clown .project-cover-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* =========================
   PURE CSS NOISE FALLBACK
   ========================= */

body.artifact-clown .image-fragment::after,
body.artifact-clown .project-cover-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-radial-gradient(
      circle at 80% 70%,
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.2) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  animation: noiseShift 0.3s steps(2) infinite;
}

@keyframes noiseShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes drift {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

body.artifact-clown .image-fragment,
body.artifact-clown .project-cover-wrapper {
  animation: drift 6s infinite ease-in-out;
}

.reader-report {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--danger-pink);
  font-style: italic;
  color: var(--text-main);
  position: relative;
}

.reader-report::before {
  content: "REPORT:";
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

#exit-distortion {
  position: fixed;
  inset: 0;
  background: black;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

#exit-distortion.active {
  animation: rupture 0.35s steps(2) forwards;
}

@keyframes rupture {
  0% {
    opacity: 0;
    background: black;
  }
  40% {
    opacity: 1;
    background:
      repeating-linear-gradient(
        to bottom,
        #ff2cff,
        #ff2cff 2px,
        #7cff00 2px,
        #7cff00 4px
      );
  }
  100% {
    opacity: 1;
    background: black;
  }
}

/* =========================
   NEON MERCY OVERRIDES
   ========================= */

   .neon-mercy {
  --nm-bg: #0a0c14;
  --nm-bg-soft: #121628;

  --nm-neon-lavender: #e6b7ff;
  --nm-neon-purple: #b66bff;
  --nm-electric-blue: #4cc9f0;

  --nm-blood-red: #b11226;
  --nm-text-main: #eae6f2;
  --nm-text-muted: #9aa0b5;
}

.neon-mercy {
  background:
    linear-gradient(
      to bottom,
      var(--nm-bg),
      var(--nm-bg-soft) 40%,
      var(--nm-bg)
    );
  color: var(--nm-text-main);
}

body.neon-mercy {
  --primary-glow: #ff2a6d;   /* hot neon pink */
  --secondary-glow: #00ff9c; /* surgical green */
  --warning-glow: #ff004c;
  background: #050507;
}

/*headers*/
.neon-mercy h1,
.neon-mercy h2 {
  color: var(--nm-neon-lavender);
  text-shadow:
    0 0 8px rgba(230,183,255,0.6),
    0 0 20px rgba(182,107,255,0.4);
}

.neon-mercy .system-label {
  color: var(--nm-electric-blue);
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.neon-mercy .danger {
  color: var(--nm-blood-red);
  text-shadow: 0 0 6px rgba(177,18,38,0.6);
}

/* Panels feel more unstable */
.neon-mercy .panel {
  border: 1px solid rgba(230,183,255,0.4);
  background: rgba(10,12,20,0.85);

  box-shadow:
    0 0 20px rgba(182,107,255,0.15),
    inset 0 0 40px rgba(76,201,240,0.05);

  transform: rotate(0deg);
}

.neon-mercy .panel.offset-left { transform: rotate(-0.3deg); }
.neon-mercy .panel.offset-right { transform: rotate(0.3deg); }

/* Images get scanlines */
.neon-mercy .artifact-media img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;

  object-fit: contain;
  position: relative;

  filter: contrast(1.1) saturate(1.2)
          drop-shadow(0 0 30px rgba(182,107,255,0.35));
}

/* Scanline overlay (pure CSS) */
.neon-mercy .artifact-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 2px,
      transparent 4px
    );
  mix-blend-mode: overlay;
}

.neon-mercy img {
  filter:
    contrast(1.05)
    saturate(1.1)
    drop-shadow(0 0 20px rgba(182,107,255,0.25));
}

/* Exit links feel dangerous */
.neon-mercy .exit-links a {
  display: inline-block;
  margin-right: 1rem;
  color: var(--secondary-glow);
  text-decoration: none;
  position: relative;
}

.neon-mercy .exit-links a:hover {
  color: var(--warning-glow);
  letter-spacing: 2px;
}

/* =========================
   BLOG POST TYPOGRAPHY TUNING
   ========================= */

.blog-post main {
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.blog-post .panel {
  width: 100%;
  margin: 3rem auto;
  transform: rotate(0deg);
  animation: none;
}

/* Headings */
.blog-post h1 {
  font-size: 2.4rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.blog-post h2 {
  font-size: 1.6rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.blog-post h3 {
  font-size: 1.2rem;
  margin-top: 2.5rem;
}

.blog-post a {
  color: var(--danger-pink);
}

.blog-post a:hover {
  color: var(--toxic-green);
  text-shadow: 0 0 6px rgba(143, 209, 106, 0.6);
}

/* Paragraphs */
.blog-post p {
  max-width: 100%;
  line-height: 1.65;
  font-size: 1.05rem;
  color: var(--text-main);
  margin: 1.2rem 0;
}

/* Lists */
.blog-post ul,
.blog-post ol {
  margin: 1.5rem 0 1.5rem 2rem;
  line-height: 1.6;
}

/* Quotes */
.blog-post blockquote {
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--danger-pink);
  color: var(--text-muted);
  font-style: italic;
}

/* Subtle scanline reduction */
.blog-post body::before,
.blog-post .panel::before {
  opacity: 0.15;
}

/* === POST META : LOW-GRADE SIGNAL CORRUPTION === */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 1.2rem;

  filter: contrast(1.05);
}

/* Divider flicker */
.post-divider {
  opacity: 0.6;
  animation: divider-flicker 6s infinite steps(1);
}

/* Date feels 'logged', not friendly */
.post-date {
  color: var(--neon-green);
  opacity: 0.9;
}

/* System label slightly unstable */
.post-meta .system-label {
  font-family: 'VT323', monospace;
  font-size: 0.8rem;
  opacity: 0.95;
  color: var(--toxic-green);
  text-shadow:
    0 0 8px rgba(143, 209, 106, 0.6),
    0 0 16px rgba(143, 209, 106, 0.3);
  animation: micro-jitter 9s infinite;
}

/* === POST META : LOW-GRADE SIGNAL CORRUPTION === */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 1.2rem;

  filter: contrast(1.05);
  
  justify-content: center;
  text-align: center;
}

/* Divider flicker */
.post-divider {
  opacity: 0.6;
  animation: divider-flicker 6s infinite steps(1);
}

/* Date feels 'logged', not friendly */
.post-date {
  color: var(--neon-green);
  opacity: 0.9;
}

/* System label slightly unstable */
.post-meta .system-label {
  color: var(--muted-purple);
  text-shadow:
    0 0 6px rgba(180, 0, 255, 0.15),
    -1px 0 rgba(0, 255, 255, 0.05);
  animation: micro-jitter 9s infinite;
}

.post-tags a {
  color: var(--neon-green);
  text-decoration: none;
  margin-right: 0.4rem;
  font-size: 0.7rem;
  position: relative;
  opacity: 0.85;
}

.post-tags a:hover {
  opacity: 1;
  text-shadow:
    0 0 6px rgba(0, 255, 150, 0.6),
    0 0 12px rgba(0, 255, 150, 0.2);
}

/* ghost offset on hover */
.post-tags a:hover::after {
  content: attr(href);
  position: absolute;
  left: 1px;
  top: 0;
  color: rgba(255, 0, 150, 0.15);
  pointer-events: none;
}

/* TAG FILTER BASE */
.tag-filter .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.tag-filter button {
  background: transparent;
  border: 1px solid var(--neon-dim, #555);
  color: var(--neon-dim, #aaa);
  font-family: var(--system-font);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}

/* ACTIVE TAG */
.tag-filter button.active {
  color: var(--neon-accent, #39ff14);
  border-color: currentColor;
  animation: signal-flicker 1.6s infinite steps(2, end);
}

/* Flicker animation */
@keyframes signal-flicker {
  0% { opacity: 1; }
  45% { opacity: 0.9; }
  50% { opacity: 0.6; }
  55% { opacity: 1; }
  100% { opacity: 0.95; }
}

.no-results {
  text-align: center;
  color: var(--warning-red, #ff3b3b);
  font-family: var(--system-font);
}

/* TAG HIGHLIGHTING */

.artifact-tag span {
  opacity: 0.4;
  transition: opacity 0.15s ease, text-shadow 0.15s ease;
}

.blog-post.matching .artifact-tag span.active {
  opacity: 1;
  color: var(--toxic-green);
  text-shadow:
    0 0 6px var(--glitch-cyan),
    0 0 12px var(--neon-purple);
}

.blog-post.matching .artifact-tag span:not(.active) {
  opacity: 0.25;
}

#no-results {
  margin: 4rem auto;
  font-size: 1.2rem;
  color: var(--danger-pink);
  text-shadow:
    0 0 6px var(--glitch-cyan),
    0 0 12px var(--danger-pink);
}

/* EMPTY STATE FLICKER */
#no-posts {
  animation: signal-flicker 2.5s infinite;
  opacity: 0.9;
}

@keyframes signal-flicker {
  0%   { opacity: 0.85; }
  10%  { opacity: 0.6; }
  20%  { opacity: 0.9; }
  30%  { opacity: 0.7; }
  45%  { opacity: 1; }
  60%  { opacity: 0.8; }
  75%  { opacity: 0.95; }
  100% { opacity: 0.85; }
}

/* POST DECAY / RE-ENTRY */
.blog-post {
  transition: opacity 0.3s ease;
}

.blog-post.hidden {
  display: none;
}

.blog-post.reappear {
  animation: post-recover 0.6s ease-out;
}

@keyframes post-recover {
  0% {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(2px);
  }
  60% {
    opacity: 0.7;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

/* === Blog Post Heading Color + Glow === */
/* Scoped to blog posts only */

.blog-post h1,
.blog-post h2,
.blog-post h3 {
  color: var(--neon-purple);

  /* kill global offset shadows */
  text-shadow: none;

  /* replace with soft glow (logo-style) */
  text-shadow:
    0 0 6px rgba(161, 43, 214, 0.5),
    0 0 14px rgba(161, 43, 214, 0.25);
}

/* === SIGNAL LEAK : HEADER INSTABILITY === */

.blog-post.signal-leak h1,
.blog-post.signal-leak h2 {
  position: relative;
  text-shadow:
    0 0 8px rgba(161, 43, 214, 0.6),
    1px 0 rgba(0, 255, 255, 0.15),
   -1px 0 rgba(255, 44, 255, 0.15);
}
/* === SIGNAL LEAK : TEXT DRIFT === */

.blog-post.signal-leak p {
  animation: signal-breath 14s infinite ease-in-out;
}

@keyframes signal-breath {
  0%   { filter: blur(0); }
  45%  { filter: blur(0); }
  50%  { filter: blur(0.3px); }
  55%  { filter: blur(0); }
  100% { filter: blur(0); }
}
/* === SIGNAL LEAK : LOG DESYNC === */

.blog-post.signal-leak .post-meta,
.blog-post.signal-leak .post-meta * {
  animation: micro-jitter 11s infinite;
}

@keyframes micro-jitter {
  0%   { transform: translate(0,0); }
  96%  { transform: translate(0,0); }
  97%  { transform: translate(-0.5px, 0.5px); }
  98%  { transform: translate(0.5px, -0.5px); }
  99%  { transform: translate(-0.5px, 0); }
  100% { transform: translate(0,0); }
}
/* === SIGNAL LEAK : ARTIFACT SCAR === */

.blog-post.signal-leak::before {
  content: "";
  position: fixed;
  top: 18%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 44, 255, 0.15);
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}