/**
 * Attention Observer — Meta-Observation Styling
 *
 * Era-scoped colors. Contrast verified ≥8:1 against each era's background:
 *   2033-2034: neon green hsl(100,100%,63%) on #1a1a18 → 14.7:1
 *   2035:      #004d00 on #f4f2ed                      →  9.1:1
 */

.meta-observation {
  display: inline;
  margin-left: 0.6em;
  font-family: var(--sf-font-mono);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.2, 0, 0.1, 1);
  color: currentColor;
  white-space: nowrap;
}

.meta-observation--visible {
  opacity: 1;
}

/* Revisit: already-fired observations appear instantly, slightly softer so
   fresh observations still feel like the novel event. */
.meta-observation--revisit {
  transition: none;
}

/* 2033-2034: neon green with a faint phosphor glow — feels like a readout. */
.era-2033-2034 .meta-observation {
  color: var(--sf-neon-green);
  font-weight: 500;
  text-shadow: 0 0 6px color-mix(in srgb, var(--sf-neon-green) 35%, transparent);
}
.era-2033-2034 .meta-observation::before { content: "⟨ "; opacity: 0.55; }
.era-2033-2034 .meta-observation::after  { content: " ⟩"; opacity: 0.55; }

/* 2035: dark forest green, italic — warmer, resolved, no surveillance chrome. */
.era-2035 .meta-observation {
  color: #004d00;
  font-style: italic;
}
.era-2035 .meta-observation::before { content: "— "; opacity: 0.5; }

/* Barely-visible affordance: marked blocks get a 1px left hairline so
   attentive readers sense "this paragraph might respond" without the site
   announcing itself. Active eras only. */
.era-2033-2034 [data-observe],
.era-2035 [data-observe] {
  position: relative;
}
.era-2033-2034 [data-observe]::before,
.era-2035 [data-observe]::before {
  content: "";
  position: absolute;
  left: -0.9em;
  top: 0.35em;
  bottom: 0.35em;
  width: 1px;
  background: currentColor;
  opacity: 0.14;
  pointer-events: none;
}

/* Respect reduced motion — instant reveal. */
@media (prefers-reduced-motion: reduce) {
  .meta-observation {
    transition: opacity 0.01s;
  }
}