/* ============================================================================
   astrochart — chart interactions
   ----------------------------------------------------------------------------
   Hover and focus behaviour for the interactive chart. Depends on the design
   tokens (tokens.css / themes.css) for every --variable used here.

   Philosophy: hover REVEALS, it does not TRANSFORM the chart. Focus shows
   slightly more than hover (keyboard users need confirmation). Everything is
   reversible; everything respects prefers-reduced-motion.
   ============================================================================ */

/* --- base interactive state ---------------------------------------------- */
.chart-point,
.aspect-line,
.house-cusp,
.zodiac-wedge {
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.chart-point .glyph {
  transition: filter var(--duration-fast) var(--ease-out);
}
/* hover / focus: a calm gold glow — the glyph notices the pointer without
   moving or bouncing out of place */
.chart-point:hover .glyph,
.chart-point:focus-visible .glyph {
  filter: drop-shadow(0 0 6px var(--accent-gold));
}
.chart-point .degree-text,
.chart-point .sign-label {
  transition: fill var(--duration-fast) var(--ease-out);
}
.aspect-line {
  transition: opacity var(--duration-fast) var(--ease-out),
              stroke-width var(--duration-fast) var(--ease-out);
}

/* --- hover / focus: chart-point ------------------------------------------ */
/* The glyph's hover motion (spring scale + settle wobble) lives in
   chart-animations.css; the transition above carries the exit. */
.chart-point:hover .degree-text,
.chart-point:focus-visible .degree-text {
  fill: var(--ink-primary);
  font-weight: var(--weight-medium);
}

/* --- focus dims everything unrelated ------------------------------------- */
.chart.has-focus .chart-point:not(:hover):not(:focus-visible):not(.is-related):not(.is-focused) {
  opacity: 0.3;
}
.chart.has-focus .aspect-line:not(.is-related) {
  opacity: 0.15;
}
.chart.has-focus .house-cusp:not(:hover):not(:focus-visible):not(.is-related):not(.is-focused) .cusp-line {
  opacity: 0.4;
}

/* --- related elements (added by JS) -------------------------------------- */
.chart-point.is-related .glyph {
  filter: drop-shadow(0 0 4px var(--accent-gold-soft));
}
.aspect-line.is-related {
  stroke-width: 2;
  opacity: 1;
}
.house-cusp.is-related .cusp-line {
  stroke: var(--accent-gold);
  stroke-width: 2;
  opacity: 1;
}
.zodiac-wedge.is-related .wedge-background {
  fill: var(--accent-gold-soft);
}

/* --- hover / focus: the whole house wedge is now the target -------------- */
.house-tint {
  transition: fill var(--duration-fast) var(--ease-out),
              fill-opacity var(--duration-fast) var(--ease-out);
}
.house-cusp:hover .house-tint,
.house-cusp:focus-visible .house-tint,
.house-cusp.is-focused .house-tint {
  fill: var(--accent-gold);
  fill-opacity: 0.08;
}
.house-cusp:hover .cusp-line,
.house-cusp:focus-visible .cusp-line {
  stroke: var(--accent-gold);
  opacity: 1;
}

/* --- the focused element itself ------------------------------------------ */
.chart-point.is-focused .glyph {
  filter: drop-shadow(0 0 5px var(--accent-gold-soft));
}

/* --- inspection mode (click-to-pin) -------------------------------------- */
/* When a planet is pinned, dim the wheel harder than hover does so the
   relationship cluster reads as the figure and the rest of the chart as
   ground. The pin sticks until the visitor clicks again or hits Esc. */
.chart.is-pinned .chart-point:not(.is-related):not(.is-focused) {
  opacity: 0.22;
}
.chart.is-pinned .aspect-line:not(.is-related):not(.is-focused) {
  opacity: 0.08;
}
.chart.is-pinned .house-cusp:not(.is-related):not(.is-focused) .cusp-line {
  opacity: 0.18;
}
.chart.is-pinned .zodiac-wedge:not(.is-related) .wedge-background {
  opacity: 0.4;
}
/* Dispositor — the planet that rules the inspected planet's sign.
   Marked with a gold ring + thicker glyph so it's visually distinct
   from "related by aspect" planets, signalling that this planet is
   the inspected one's authority. */
.chart-point.is-dispositor .glyph {
  filter: drop-shadow(0 0 4px var(--accent-gold));
}
.chart-point.is-dispositor .ruler-ring {
  stroke: var(--accent-gold);
  stroke-width: 1.4;
  opacity: 1;
}
/* Subtle help cursor on clickable wheel elements when no pin is set. */
.chart .chart-point,
.chart .aspect-line,
.chart .house-cusp,
.chart .zodiac-wedge {
  cursor: pointer;
}

/* --- keyboard focus indicator -------------------------------------------- */
.chart-point:focus-visible,
.aspect-line:focus-visible,
.house-cusp:focus-visible,
.zodiac-wedge:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.chart :focus:not(:focus-visible) {
  outline: none;
}

/* --- tooltip ------------------------------------------------------------- */
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg-elevated);
  border: 0.5px solid var(--ink-quaternary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  max-width: 280px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  pointer-events: none;
  z-index: 100;
}
.chart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.tooltip-header { display: flex; align-items: baseline; gap: var(--space-2); }
.tooltip-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  color: var(--ink-primary);
}
.tooltip-glyph { color: var(--accent-gold); }
.tooltip-glyph svg { display: block; }
.tooltip-position {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  margin-top: var(--space-1);
}
.tooltip-house,
.tooltip-meta {
  font-size: var(--text-xs);
  color: var(--ink-tertiary);
  margin-top: var(--space-1);
}
.tooltip-note {
  font-size: var(--text-xs);
  color: var(--ink-secondary);
  margin-top: var(--space-2);
  line-height: var(--leading-snug);
}
.tooltip-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  margin-top: var(--space-2);
  margin-right: var(--space-3);
}
.tooltip-analogy { font-style: italic; color: var(--ink-tertiary); }

/* --- screen-reader-only data table + skip link --------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  background: var(--bg-elevated);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
  z-index: 200;
}
.skip-link:focus { transform: translateY(0); }

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* focus still needs to confirm — keep the scale, just don't animate it */
  .chart-point:hover .glyph,
  .chart-point:focus-visible .glyph {
    transform: scale(1.12);
  }
}