/* ================================================================
   Sandao Spiral · Styling for the JS-generated SVG
   Companion to spiral.js — class names match the generator.
   ================================================================ */

.sandao-spiral-wrap {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 820 / 960;
  margin: 0 auto;
}

.sandao-spiral-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Stars */
.sandao-star { fill: var(--ink-dim); }
.sandao-star.bright { fill: var(--ink); }

/* Trail (glow under-layer + sharp top) */
.sandao-trail-glow {
  fill: none;
  stroke: var(--gold-glow);
  stroke-width: 4;
  stroke-linecap: round;
  filter: blur(4px);
  opacity: 0.55;
}

.sandao-trail {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.82;
}

/* Apex */
.sandao-apex {
  fill: var(--gold-bright);
  animation: sandao-apex-breath 5s ease-in-out infinite;
}

.sandao-apex-halo {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.5;
  opacity: 0.6;
  animation: sandao-apex-halo-breath 5s ease-in-out infinite;
}

@keyframes sandao-apex-breath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}

@keyframes sandao-apex-halo-breath {
  0%, 100% { opacity: 0.4; r: 14; }
  50%      { opacity: 0.7; r: 18; }
}

/* 尊重 prefers-reduced-motion：停掉顶点的无限呼吸动画 */
@media (prefers-reduced-motion: reduce) {
  .sandao-apex, .sandao-apex-halo { animation: none; }
}

/* Axis labels */
.sandao-axis-label {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--ink-faint);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* Node groups */
.sandao-node-group { cursor: pointer; }

.sandao-node-aura {
  fill: var(--gold-glow);
  opacity: 0;
  transition: opacity 600ms ease;
  filter: blur(8px);
}

.sandao-node-ring-outer {
  fill: none;
  stroke: var(--gold-faint);
  stroke-width: 0.8;
  transition: stroke 500ms ease, stroke-width 500ms ease;
}

.sandao-node-ring-inner {
  fill: var(--bg);
  stroke: var(--gold);
  stroke-width: 1.2;
  transition: stroke 500ms ease;
}

.sandao-node-center {
  fill: var(--gold);
  transition: fill 500ms ease;
}

.sandao-node-group:hover .sandao-node-aura,
.sandao-node-group.active .sandao-node-aura { opacity: 1; }

.sandao-node-group:hover .sandao-node-ring-outer,
.sandao-node-group.active .sandao-node-ring-outer {
  stroke: var(--gold-bright);
  stroke-width: 1;
}

.sandao-node-group:hover .sandao-node-ring-inner,
.sandao-node-group.active .sandao-node-ring-inner { stroke: var(--gold-bright); }

.sandao-node-group:hover .sandao-node-center,
.sandao-node-group.active .sandao-node-center { fill: var(--gold-bright); }

/* Node labels */
.sandao-node-num {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 300;
  fill: var(--ink-faint);
  letter-spacing: 0.2em;
}

.sandao-node-cn {
  font-family: var(--serif-cn);
  font-size: 16px;
  font-weight: 400;
  fill: var(--ink);
  letter-spacing: 0.22em;
  transition: fill 500ms ease;
}

.sandao-node-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  fill: var(--ink-dim);
  letter-spacing: 0.05em;
}

.sandao-node-group:hover .sandao-node-cn,
.sandao-node-group.active .sandao-node-cn { fill: var(--gold-bright); }

/* Tooltip aphorism */
.sandao-tooltip-rule {
  stroke: var(--gold-faint);
  stroke-width: 0.5;
  opacity: 0;
  transition: opacity 700ms ease 200ms;
}

.sandao-tooltip-text {
  font-family: var(--serif-cn);
  font-size: 13px;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 700ms ease 250ms;
  letter-spacing: 0.08em;
}

.sandao-node-group:hover .sandao-tooltip-rule,
.sandao-node-group.active .sandao-tooltip-rule,
.sandao-node-group:hover .sandao-tooltip-text,
.sandao-node-group.active .sandao-tooltip-text { opacity: 1; }