/**
 * Era: 2027-2028 — "The Crumble"
 * Subtle wrongness. Slightly off-white. A font that's almost-but-not-quite right.
 * Occasional render glitch. You can't quite put your finger on it.
 *
 * First sci-fi elements appear: scan lines on intercepts, neon blue hints
 * on government notices, frame borders on leaked docs.
 * By 2028 Tunupa has ascended, OHC is formal, Flamingo Protocol runs.
 * The AI is already HERE — the visuals should say so.
 */

.era-2027-2028 {
  --sf-bg: #f9f7f4;
  --sf-text: #1d1d1b;
  --sf-accent: #7a5830;
  --sf-muted: #8a8580;
  --sf-border: rgba(0,0,0,0.1);

  /* Legacy era variables */
  --era-bg: var(--sf-bg);
  --era-text: var(--sf-text);
  --era-accent: var(--sf-accent);
  --era-muted: var(--sf-muted);
  --era-border: var(--sf-border);

  /* First hint of scan lines — very subtle */
  --sf-scanline-opacity: 0.3;
  --sf-scanline-color: rgba(0,0,0,0.015);
}

.era-2027-2028 body {
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  color: var(--sf-text);
  background: var(--sf-bg);
}

/* Headings feel slightly off — too tight */
.era-2027-2028 .node-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* Links less friendly, more urgent */
.era-2027-2028 .node-link {
  color: var(--sf-accent);
  border-bottom: 2px solid var(--sf-accent);
}

/* Occasional CSS glitch — a flicker of wrongness */
@keyframes subtle-glitch {
  0%, 95%, 100% { opacity: 1; transform: none; }
  96% { opacity: 0.92; transform: translateX(1px); }
  97% { opacity: 1; transform: translateX(-1px); }
}

.era-2027-2028 .node-body p:nth-child(7n) {
  animation: subtle-glitch 12s ease-in-out infinite;
}

/* Government notices gaining visual authority — first neon blue hint */
.era-2027-2028 .government-notice {
  border: 2px solid #8b1a1a;
  background: #faf5f0;
  box-shadow: 0 0 0 1px rgba(74, 144, 217, 0.08);
}

/* === First sci-fi elements === */

/* Intercepts get scan lines — the AI is watching */
.era-2027-2028 .intercept {
  position: relative;
}
.era-2027-2028 .intercept::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0px, transparent 1px,
    rgba(0,0,0,0.02) 1px, rgba(0,0,0,0.02) 2px
  );
  pointer-events: none;
  opacity: 0.5;
}

/* Leaked docs get subtle frame border hints */
.era-2027-2028 .intercept,
.era-2027-2028 .leaked-doc {
  border-left: 2px solid rgba(74, 144, 217, 0.2);
  padding-left: var(--sf-space-md);
}

/* System-generated content gets monospace hint */
.era-2027-2028 .node-type-badge.type-media {
  font-family: var(--sf-font-mono);
  font-size: 0.68rem;
}