/* ================================================================
   ENNEAGRAM
   ================================================================ */
.enneagram-svg-wrap { width: 100%; max-width: 500px; }
.enneagram-subtitle {
  font-weight: 300;
  font-size: 14px;
  color: var(--body);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 20px;
}

#enneagram-svg { width: 100%; height: auto; display: block; }

/* SVG draw-in animation */
#enn-outer-circle { stroke-dasharray: 1257; stroke-dashoffset: 1257; transition: stroke-dashoffset 1200ms var(--ease-out); }
#enneagram-svg.drawn #enn-outer-circle { stroke-dashoffset: 0; }

.enn-line { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 800ms var(--ease-out) 200ms; }
#enneagram-svg.drawn .enn-line { stroke-dashoffset: 0; }

.enn-node-group { cursor: pointer; opacity: 0; transition: opacity 400ms var(--ease-out); }
#enneagram-svg.drawn .enn-node-group { opacity: 1; }
#enneagram-svg.drawn .enn-node-group:nth-child(1) { transition-delay: 400ms; }
#enneagram-svg.drawn .enn-node-group:nth-child(2) { transition-delay: 460ms; }
#enneagram-svg.drawn .enn-node-group:nth-child(3) { transition-delay: 520ms; }
#enneagram-svg.drawn .enn-node-group:nth-child(4) { transition-delay: 580ms; }
#enneagram-svg.drawn .enn-node-group:nth-child(5) { transition-delay: 640ms; }
#enneagram-svg.drawn .enn-node-group:nth-child(6) { transition-delay: 700ms; }
#enneagram-svg.drawn .enn-node-group:nth-child(7) { transition-delay: 760ms; }
#enneagram-svg.drawn .enn-node-group:nth-child(8) { transition-delay: 820ms; }
#enneagram-svg.drawn .enn-node-group:nth-child(9) { transition-delay: 880ms; }

.enn-node-circle { fill: white; stroke: var(--rule); stroke-width: 2; transition: fill 200ms ease, stroke 200ms ease; }
.enn-node-group:hover .enn-node-circle { stroke: var(--olive); fill: var(--olive-wash); }
.enn-node-group.selected .enn-node-circle { fill: var(--olive); stroke: var(--olive); }
.enn-node-group.dimmed { opacity: 0.35; }

.enn-node-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  fill: var(--heading-dark);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  transition: fill 200ms ease;
}
.enn-node-group.selected .enn-node-num { fill: white; }

.enn-node-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  fill: var(--muted);
  text-anchor: middle;
  pointer-events: none;
  transition: fill 200ms ease;
}
.enn-node-group.selected .enn-node-label { fill: rgba(255,255,255,0.85); }

.enn-connecting-line { stroke: var(--rule); stroke-width: 1.5; fill: none; transition: stroke 200ms ease, stroke-width 200ms ease, opacity 200ms ease; }
.enn-connecting-line.active { stroke: var(--olive); stroke-width: 2.5; }
.enn-connecting-line.dimmed { opacity: 0.15; }

/* Info panel */
.enn-info-panel {
  width: 100%;
  max-width: 600px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  pointer-events: none;
  text-align: center;
}
.enn-info-panel.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.enn-info-number { font-family: var(--font-display); font-weight: 300; font-size: 60px; line-height: 1; color: var(--heading-dark); opacity: 0.12; margin-bottom: -20px; }
.enn-info-name { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--olive); margin-bottom: 12px; }
.enn-info-tagline { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 20px; color: var(--body); margin-bottom: 12px; line-height: 1.3; }
.enn-info-desire { font-weight: 300; font-size: 14px; color: var(--body); line-height: 1.7; margin-bottom: 12px; }
.enn-info-desc { font-weight: 300; font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
.enn-info-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--olive);
  border: 1px solid var(--border);
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 300ms var(--ease-out), color 300ms ease, border-color 300ms ease;
}
.enn-info-cta:hover { background: var(--olive); color: white; border-color: var(--olive); }
.enn-prompt { font-weight: 300; font-size: 14px; color: var(--muted); text-align: center; margin-top: 12px; }

@media (max-width: 640px) {
  .enneagram-inner { padding: 0 20px; }
}