/* Shared styles for the living creature figure (home hero + /creature). */
svg.creature-svg { display: block; width: 100%; height: auto; }
svg.creature-svg text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.callout { cursor: pointer; }
.callout .lbl { fill: var(--ink-soft); font-size: 13px; letter-spacing: 0.08em; }
.callout .tag { fill: var(--ink-faint); font-size: 10px; letter-spacing: 0.06em; }
.callout .line { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.callout .dot { fill: var(--rule-strong); }
.callout:hover .lbl, .callout.selected .lbl { fill: var(--stain); font-weight: 700; }
.callout:hover .line, .callout.selected .line { stroke: var(--stain); stroke-dasharray: none; }
.callout:hover .dot, .callout.selected .dot { fill: var(--stain); }
.part-core { cursor: pointer; }
.part-core.lit { filter: drop-shadow(0 0 7px var(--stain)); }

@media (prefers-reduced-motion: no-preference) {
  .breathe { animation: cf-breathe 4.5s ease-in-out infinite; transform-origin: 450px 360px; }
  @keyframes cf-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.008, 1.018); } }
  .beat { animation: cf-beat 1.1s ease-out infinite; transform-origin: 402px 318px; }
  @keyframes cf-beat { 0%, 55%, 100% { transform: scale(1); } 8% { transform: scale(1.14); } 20% { transform: scale(1); } 30% { transform: scale(1.09); } }
  .blink { animation: cf-blink 7s ease-in-out infinite; transform-origin: 450px 152px; }
  @keyframes cf-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(0.08); } }
  .current { stroke-dasharray: 5 11; animation: cf-current 1.6s linear infinite; }
  @keyframes cf-current { to { stroke-dashoffset: -32; } }
}

@media (max-width: 700px) {
  svg.creature-svg .callout text,
  svg.creature-svg .callout .line,
  svg.creature-svg .callout .dot { display: none; }
}