/* ═══════════════════════════════════════════════════════════════════════
   Sacred Chemistry — The Confluence
   Styles for the convergence-cascade renderer (svg.am-confluence). Scoped
   under .am-confluence so it overrides the legacy wheel's .am-link/.am-node
   rules in ancient-medicine.css without touching them. The cascade reuses the
   wheel's .am-node / .am-node-label / .dimmed / .active contract for highlight.
   ═══════════════════════════════════════════════════════════════════════ */

.am-confluence {
  display: block;
}

/* ── Ribbons (one per compound). The wheel base rule sets opacity:0.10 which
   would kill these — override element-opacity to 1 and let the inline
   stroke-opacity carry the resting visibility. ── */
.am-confluence .am-link {
  opacity: 1;
  fill: none;
  transition: stroke-opacity 0.35s ease, stroke-width 0.35s ease;
}

/* Focused stream (compound selected / family filtered): brighten + a gentle
   current flowing toward the room. */
.am-confluence .am-link.active {
  opacity: 1;
  stroke-opacity: 0.95 !important;
  stroke-dasharray: 7 6;
  animation: am-confluence-flow 1.4s linear infinite;
}
@keyframes am-confluence-flow { to { stroke-dashoffset: -26; } }

.am-confluence .am-link.dimmed {
  opacity: 1;
  stroke-opacity: 0.05 !important;
}

/* ── Stage / column headers ── */
.am-confluence .am-stage-label {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  fill: rgba(224, 201, 127, 0.42);
  pointer-events: none;
}

/* ── Node labels ── */
.am-confluence .am-node-label {
  font-size: 11px;
  fill: rgba(255, 255, 255, 0.74);
  font-weight: 300;
  letter-spacing: 0.03em;
  pointer-events: none;
}
.am-confluence .am-node-compound .am-node-label { font-weight: 400; }
.am-confluence .am-node-convergence .am-node-label {
  fill: rgba(255, 226, 150, 0.85);
  letter-spacing: 0.06em;
}
.am-confluence .am-node-center .am-node-label {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: #ffe9b0;
}
.am-confluence .am-node.active .am-node-label { fill: #ffffff; }

.am-confluence .am-node-sublabel {
  font-size: 8.5px;
  fill: rgba(255, 255, 255, 0.34);
  font-weight: 300;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.am-confluence .am-room-cycle {
  fill: rgba(255, 221, 150, 0.6);
  font-style: italic;
  letter-spacing: 0.08em;
}

.am-confluence .am-room-halo { pointer-events: none; }

/* Peeling streams (compounds that never reach the room) sit a touch cooler at
   rest so the convergers read as the main braid. */
.am-confluence .am-link-peels { stroke-dasharray: 2 5; }

/* Compound source nodes pulse subtly on hover via the shared .am-node hover
   rules already in ancient-medicine.css — nothing extra needed here. */

/* ═══════════════════════════════════════════════════════════════════════
   DEEP TIME lens — 10,000 years on a log axis (the third lens).
   ═══════════════════════════════════════════════════════════════════════ */
.am-deeptime-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  overflow: auto;
  background:
    radial-gradient(circle 40vw at 22% 30%, rgba(70,40,130,0.16), transparent 65%),
    radial-gradient(circle 36vw at 80% 72%, rgba(20,100,130,0.12), transparent 70%),
    rgba(2, 4, 16, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.4s ease;
}
.am-deeptime-overlay.visible { opacity: 1; pointer-events: auto; }

.am-deeptime-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 18px 26px 0;
  text-align: center;
  pointer-events: none;
}
.am-deeptime-kicker {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(224, 201, 127, 0.6);
}
.am-deeptime-head h3 {
  margin: 4px 0 6px;
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 1.45rem; letter-spacing: 0.06em;
  color: #ffe9b0;
}
.am-deeptime-sub {
  margin: 0 auto;
  max-width: 620px;
  font-size: 0.74rem; line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.am-deeptime-svg { display: block; margin: 0 auto; }

.am-dt-axis { stroke: rgba(224, 201, 127, 0.32); stroke-width: 1.4; }
.am-dt-tick { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.am-dt-tick-label {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  fill: rgba(224, 201, 127, 0.5);
}
.am-dt-pole {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 9px; letter-spacing: 0.34em;
  fill: rgba(224, 201, 127, 0.4);
}
.am-dt-stem { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.am-dt-node { cursor: pointer; }
.am-dt-dot { transition: r 0.2s ease, stroke-width 0.2s ease; }
.am-dt-node:hover .am-dt-dot { stroke-width: 3; }
.am-dt-node:hover .am-dt-name { fill: #ffffff; }
.am-dt-name {
  font-size: 11px; font-weight: 400; letter-spacing: 0.02em;
  fill: rgba(255, 255, 255, 0.82); pointer-events: none;
}
.am-dt-age {
  font-size: 8.5px; font-weight: 300; letter-spacing: 0.03em;
  fill: rgba(224, 201, 127, 0.55); pointer-events: none;
}

/* While a lens (Atlas / Deep Time) is active, the first-visit thesis hero and
   safety doctrine must not bleed through the overlay. */
#ancient-medicine.am-lens-active .am-thesis-hero,
#ancient-medicine.am-lens-active .am-safety-doctrine {
  display: none !important;
}