/* athena.css — W3 of /entangle soc-495 (wave 2).
 *
 * Scope: subtle visual differentiation for the dual-voice garden stream
 * (Arcana = Alex-rendered, Athena = Percy-rendered), plus polish on the
 * Wave-1 F3 regions (.discovery-badge, .brain-notes, .seed-card, 🧠 soil
 * counter).
 *
 * Hard rules (from the Wave-2 brief):
 *   - No new color palette. Only --ink / --ink-64 / --ink-42 / --red +
 *     existing font stacks.
 *   - --red stays reserved for measurement (loading rule + timer rule).
 *     This file adds ZERO new --red uses.
 *   - Additive over existing selectors. Never broadly override .out.garden.
 *   - Animations gated behind prefers-reduced-motion: reduce.
 *
 * Integration: W5 concatenates this file into logan-os/v3/v3.css. No link
 * tags, no HTML edits.
 */


/* ─── Arcana block (Alex-rendered) ──────────────────────────────────────
 * Existing selector: .out.garden.garden-alex (index.html:102, ink default).
 * Adds: a tiny serif quote-mark sigil in --ink-42 as a ::before marker on
 * the LEFT edge, plus a small left indent so the Arcana voice reads as
 * "near-at-hand, oracular." Warmer earthy feel is carried by the sigil's
 * italic weight — no new hue. */
.out.garden.garden-alex {
  position: relative;
  padding-left: 18px;
}

.out.garden.garden-alex::before {
  content: '\201C';              /* U+201C LEFT DOUBLE QUOTATION MARK */
  position: absolute;
  left: 0;
  top: -2px;
  font-family: 'EB Garamond', 'Georgia', 'Cambria', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-42);
  pointer-events: none;
  user-select: none;
}


/* ─── Athena block (Percy-rendered) ─────────────────────────────────────
 * Existing selector: .out.garden.garden-percy (index.html:103, ink-64 +
 * weight 450). Adds: 1px hairline vertical rule on the LEFT margin,
 * cooler feel via --ink-42 rule color. Right-indent keeps the block
 * visually paired-but-offset from Arcana — when a Percy→Athena cutscene
 * arrives, the reader sees an opposite-side framing.
 *
 * Rule is --ink-42 (existing var), NOT --red. */
.out.garden.garden-percy {
  position: relative;
  padding-left: 14px;
  margin-left: 10px;
  border-left: 1px solid var(--ink-42);
}


/* ─── Cutscene jump-in framing ──────────────────────────────────────────
 * Existing selector: .out.cutscene / .out.garden.cutscene (index.html:105,
 * already --red + opacity 0.88 — that is one of the two load-bearing red
 * uses and STAYS UNCHANGED).
 *
 * This block adds center-framing "·" flankers in --ink-42 (NOT red) so the
 * system's step-in gets a theatrical framing without adding a 3rd red use
 * and without touching the existing .out.cutscene color. Flankers are
 * non-selectable punctuation that read as stage-marks. */
.out.cutscene,
.out.garden.cutscene {
  text-align: center;
}

.out.cutscene::before,
.out.garden.cutscene::before {
  content: '\00B7\00A0\00A0';    /* middle-dot + two nbsp */
  color: var(--ink-42);
  font-weight: 500;
  user-select: none;
}

.out.cutscene::after,
.out.garden.cutscene::after {
  content: '\00A0\00A0\00B7';
  color: var(--ink-42);
  font-weight: 500;
  user-select: none;
}

/* If a cutscene ALSO carries the Arcana sigil, suppress the sigil — the
 * flankers take over the framing duty for cutscenes. */
.out.garden.garden-alex.cutscene {
  padding-left: 0;
}
.out.garden.garden-alex.cutscene::before {
  content: '\00B7\00A0\00A0';
  position: static;
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  color: var(--ink-42);
}

/* Athena cutscene: drop the left rule so the centered framing reads clean. */
.out.garden.garden-percy.cutscene {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}


/* ─── Discovery badge polish (W1-F3: .out.discovery-badge) ──────────────
 * Existing: left 2px --red border + red-tinted background + Plex Mono
 * label (ux.css:211-233). --red use there is ALREADY established (W1-F3
 * shipped it); we are not adding a new red use, just tightening shape.
 *
 * Polish:
 *   - small bordered pill (subtle --ink-42 outline, 999px radius).
 *   - EB Garamond italic label in lowercase "discovery".
 *   - soft fade-in animation on append. */
.out.discovery-badge {
  border: 1px solid var(--ink-42);
  border-left-width: 2px;        /* keep the accent edge louder */
  border-radius: 999px;
  padding: 3px 12px;
  animation: badgeFadeIn 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.out.discovery-badge .discovery-label {
  font-family: 'EB Garamond', 'Georgia', 'Cambria', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

@keyframes badgeFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─── Seed-card polish (W1-F3: .seed-card) ──────────────────────────────
 * Existing: left 2px --red border + red linear-gradient wash + EB Garamond
 * quote already at 19px italic (ux.css:68-130). Red use there is
 * pre-established.
 *
 * Polish:
 *   - full-width EB Garamond italic pull-quote feel (wider quote, tighter
 *     leading, open-quote glyph already handled by ux.css).
 *   - light top border (--ink-42) to frame the card as a shelf.
 *   - kebab-style attribution: "— your words, turn N" rendered by the
 *     existing .seed-card-meta slot. We just style the em-dash shape. */
.seed-card {
  border-top: 1px solid var(--ink-42);
}

.seed-card .seed-card-quote {
  width: 100%;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.seed-card .seed-card-meta {
  font-family: 'EB Garamond', 'Georgia', 'Cambria', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-42);
}

/* Kebab-style attribution: if .seed-card-meta's text starts with "—" the
 * rendering is handled by plant-seed.mjs. This rule just guarantees the
 * em-dash itself gets the italic Garamond treatment rather than Plex Mono
 * fallback. */
.seed-card .seed-card-meta::first-letter {
  font-family: 'EB Garamond', 'Georgia', 'Cambria', serif;
}


/* ─── Brain-notes block polish (W1-F3: .brain-notes) ────────────────────
 * Additive only — existing styling from ux.css stays. We add an EB
 * Garamond italic tint to the header label so the Discoveries panel reads
 * as a literary gloss rather than a system log, matching the overall
 * Garamond register used for ceremony and the seed-card quote. */
.brain-notes .brain-notes-label {
  font-family: 'EB Garamond', 'Georgia', 'Cambria', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}


/* ─── 🧠 soil-counter increment glow ─────────────────────────────────────
 * Existing: ux.css defines .soil-discoveries.pulse with scale-pulse on
 * award. This file adds a COMPLEMENTARY subtle outer glow via text-shadow
 * in --ink-42 — no color, no red. Class name is new: .brain-glow. W5 may
 * add it to the 🧠 glyph element when increment fires; this is the
 * cross-facet dependency called out in the W3 scratchpad post.
 *
 * The existing .pulse animation still runs on its own; .brain-glow stacks
 * on top for the glyph-only aura. Orthogonal selectors — no collision. */
.soil .soil-discoveries.brain-glow {
  animation: brainGlow 1200ms ease-out 1;
}

@keyframes brainGlow {
  0% {
    text-shadow:
      0 0 0 rgba(17, 17, 17, 0);
  }
  35% {
    text-shadow:
      0 0 6px rgba(17, 17, 17, 0.28),
      0 0 12px rgba(17, 17, 17, 0.14);
  }
  100% {
    text-shadow:
      0 0 0 rgba(17, 17, 17, 0);
  }
}


/* ─── reduced-motion gate ───────────────────────────────────────────────
 * All animations introduced by this file are behind the prefers-reduced-
 * motion media query. Static styles (sigil, rule, pill shape) remain. */
@media (prefers-reduced-motion: reduce) {
  .out.discovery-badge,
  .soil .soil-discoveries.brain-glow {
    animation: none !important;
  }
  .out.discovery-badge {
    opacity: 1;
    transform: none;
  }
}


/* ─── print suppression for decorative additions ────────────────────────
 * The sigil, vertical rule, and cutscene flankers are screen-only
 * ornaments. The existing @media print block in index.html already hides
 * .seed-card / .brain-notes / .discovery-badge / .piano-keys via ux.css.
 * Here we only strip the Arcana/Athena/cutscene decorations so the print
 * form stays clean prose. */
@media print {
  .out.garden.garden-alex {
    padding-left: 0;
  }
  .out.garden.garden-alex::before {
    content: none;
  }
  .out.garden.garden-percy {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
  .out.cutscene::before,
  .out.cutscene::after,
  .out.garden.cutscene::before,
  .out.garden.cutscene::after {
    content: none;
  }
}