/* matrix.css — octagram chart styling for the dark theme + reveal animation.
   The SVG (pages/_matrix_svg.php) keeps its original structural classes:
   big/medium/small-circle, matrix-value-point, cls-* (frame + type sizes).
   Palette hooks into theme.css variables (--bg-0, --gold, --rose, --ink). */

#matrix, .mx-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- frame ---- */
#matrix rect.cls-3,
#matrix line.cls-3 { fill: none; stroke: rgba(216, 205, 240, 0.28); stroke-width: 1.2; }
#matrix .cls-4 { fill: none; stroke: rgba(232, 184, 75, 0.45); stroke-width: 1.4; }
#matrix .cls-5, #matrix .cls-7 { stroke: rgba(216, 205, 240, 0.35); stroke-width: 1; fill: none; }
#matrix .cls-6, #matrix .cls-8 { fill: rgba(216, 205, 240, 0.35); }
#matrix .cls-18 { stroke: rgba(232, 184, 75, 0.5); stroke-width: 1; fill: none; stroke-dasharray: 4 4; }
#matrix .cls-44 { fill: rgba(216, 205, 240, 0.55); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
#matrix .cls-53 { fill: var(--rose, #e58fb1); }        /* heart icon = love line */
#matrix .cls-56 { fill: var(--gold, #e8b84b); font-size: 22px; font-weight: 700; } /* $ = money line */

/* ---- circles ---- */
#matrix circle { fill: rgba(22, 13, 46, 0.92); stroke-width: 1.6; }
#matrix .big-circle    { stroke: var(--gold, #e8b84b); }
#matrix .medium-circle { stroke: rgba(232, 184, 75, 0.75); }
#matrix .small-circle  { stroke: rgba(216, 205, 240, 0.55); }
/* corner + mid-edge age labels ("10 / years / old") — light text, no stroke.
   The old rule here gave these TEXT nodes a dark circle fill + stroke and left
   them at the 16px default, which is what made them smudge together. */
#matrix text.cls-28,
#matrix text.cls-29 { fill: rgba(216, 205, 240, 0.6); stroke: none; }
#matrix text.cls-28 { font-size: 11px; letter-spacing: 0.04em; }
#matrix text.cls-28 tspan { font-size: 7.5px; letter-spacing: 0.06em; }
#matrix text.cls-29 { font-size: 9px; }

/* ---- values ---- */
#matrix .matrix-value-point { fill: var(--ink, #f4f0ff); font-weight: 700; text-anchor: middle; }
/* vertical centering for numbers inside circles only (cls-33 age-arc values stay baseline-positioned) */
#matrix .cls-54, #matrix .cls-55, #matrix .cls-57,
#matrix .cls-58, #matrix .cls-59, #matrix .cls-60 { dominant-baseline: central; }
#matrix .cls-54 { font-size: 30px; }                    /* A B C D */
#matrix .cls-55 { font-size: 32px; fill: var(--gold, #e8b84b); } /* centre E */
#matrix .cls-57 { font-size: 20px; }                    /* U / V */
#matrix .cls-58 { font-size: 16px; }
#matrix .cls-59 { font-size: 16px; }
#matrix .cls-60 { font-size: 15px; }
#matrix .cls-33 { font-size: 9.5px; fill: rgba(244, 240, 255, 0.82); } /* age-arc values */
#matrix .cls-61 { font-size: 9px; fill: rgba(216, 205, 240, 0.5); }   /* rim age labels */
#matrix .cls-43 { font-size: 6.5px; fill: rgba(216, 205, 240, 0.45); }

/* ---- reveal animation ----
   Nodes start hidden while .mx-animating; .mx-on fades each in.
   renderInstant() adds .mx-done + .mx-on everywhere (no transition). */
#matrix.mx-animating circle,
#matrix.mx-animating text,
#matrix.mx-animating rect,
#matrix.mx-animating line,
#matrix.mx-animating polygon,
#matrix.mx-animating path {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#matrix.mx-animating .mx-on { opacity: 1; }
#matrix.mx-animating circle.mx-on { animation: mxPop 0.5s ease; }

@keyframes mxPop {
  0% { transform: scale(0.6); transform-origin: center; transform-box: fill-box; }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.mx-pulse circle,
g.mx-pulse > circle {
  animation: mxGlow 1.6s ease-in-out 2;
}
@keyframes mxGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 184, 75, 0)); }
  50% { filter: drop-shadow(0 0 9px rgba(232, 184, 75, 0.85)); }
}

/* ---- zone highlight (chat: "look at your karmic tail") ---- */
#matrix.mx-dimmed circle,
#matrix.mx-dimmed text,
#matrix.mx-dimmed line,
#matrix.mx-dimmed rect,
#matrix.mx-dimmed polygon { opacity: 0.22; transition: opacity 0.5s ease; }
#matrix.mx-dimmed .cls-4 { opacity: 0.35; }
#matrix.mx-dimmed .mx-hot,
#matrix.mx-dimmed .mx-hot circle,
#matrix.mx-dimmed .mx-hot text,
#matrix.mx-dimmed g.mx-hot * {
  opacity: 1;
}
#matrix.mx-dimmed g.mx-hot circle,
#matrix.mx-dimmed circle.mx-hot {
  stroke: var(--rose, #e58fb1);
  animation: mxGlow 1.6s ease-in-out infinite;
}
/* diagonal generation lines + health-map axes: the line itself glows */
#matrix.mx-dimmed g.mx-hot line,
#matrix.mx-dimmed line.mx-hot {
  stroke: var(--gold-strong, #f4d9a0);
  stroke-width: 2;
  opacity: 1;
  animation: mxGlow 1.6s ease-in-out infinite;
}
#matrix.mx-dimmed g.mx-hot polygon { fill: var(--gold-strong, #f4d9a0); }
#matrix.mx-dimmed #male-gen-label.mx-hot,
#matrix.mx-dimmed #female-gen-label.mx-hot { opacity: 1; fill: var(--gold-strong, #f4d9a0); }