/* ============================================================================
   astrochart — animation library
   ----------------------------------------------------------------------------
   The motion layer: a staggered entrance, hover/focus micro-interactions, and
   a settings-change shimmer. Loaded only by the interactive page, so the
   static SVG exports stay still.

   Every motion here is opacity/transform only (GPU-friendly) and is fully
   disabled under prefers-reduced-motion — the chart then simply appears.
   ============================================================================ */

/* ===========================================================================
   ENTRANCE — elements arrive in sequence over ~1.6s
   =========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes enterPoint {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

.chart-bg     { animation: fadeIn 200ms ease both; }
.ring-zodiac  { animation: fadeIn 320ms ease both;  animation-delay: 100ms; }
.ring-ticks   { animation: fadeIn 300ms ease both;  animation-delay: 380ms; }
.ring-houses  { animation: fadeIn 320ms ease both;  animation-delay: 480ms; }
.ring-metadata{ animation: fadeIn 360ms ease both;  animation-delay: 540ms; }
.ring-aspects { animation: fadeIn 400ms ease both;  animation-delay: 1080ms; }
.ring-center  { animation: fadeIn 300ms ease both;  animation-delay: 1260ms; }

/* Planets fly out from the chart centre, staggered by zodiacal index (--n). */
.chart-point {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: enterPoint 420ms var(--ease-spring) both;
  animation-delay: calc(760ms + var(--n, 0) * 32ms);
}

/* ===========================================================================
   MICRO-INTERACTIONS — hover and focus
   =========================================================================== */

/* Planet glyph: the hover / focus "notice" is a calm gold glow — no scale,
   no wobble, the glyph stays exactly in place. It lives in
   chart-interactions.css alongside the rest of the hover styling. */

/* Aspect line: thickens, and a flowing dash suggests energy travelling it. */
@keyframes aspectFlow {
  to { stroke-dashoffset: -20; }
}
.aspect-line:hover,
.aspect-line:focus-visible {
  stroke-width: 2;
  stroke-opacity: 1;
  stroke-dasharray: 6 4;
  animation: aspectFlow 800ms linear infinite;
}

/* House cusp: the cusp line firms up. */
.house-cusp .cusp-line {
  transition: stroke-width var(--duration-fast) var(--ease-out);
}
.house-cusp:hover .cusp-line,
.house-cusp:focus-visible .cusp-line {
  stroke-width: 2;
}

/* Zodiac wedge: the tint deepens and the sign glyph picks up a calm
   gold glow. We deliberately do NOT scale the glyph on hover — the
   chart's hover philosophy is "reveal, don't transform" (see the
   header in chart-interactions.css), and a transform-scale on
   inline <text> glitches across browsers because transform-box:
   fill-box is unreliable on text nodes. Filter glow does the
   "noticing" without geometry shift. */
.zodiac-wedge .wedge-background {
  transition: fill var(--duration-base) var(--ease-out);
}
.zodiac-wedge:hover .wedge-background,
.zodiac-wedge:focus-visible .wedge-background {
  fill: var(--accent-gold-soft);
}
.zodiac-wedge .glyph {
  transition: filter var(--duration-fast) var(--ease-out),
              fill var(--duration-fast) var(--ease-out);
}
.zodiac-wedge:hover .glyph,
.zodiac-wedge:focus-visible .glyph {
  filter: drop-shadow(0 0 4px var(--accent-gold));
}

/* Focus pulsing — keyboard users get a sustained, breathing indicator. */
@keyframes focusPulse {
  0%, 100% { outline-color: var(--accent-gold); }
  50%      { outline-color: var(--accent-gold-soft); }
}
.chart-point:focus-visible,
.aspect-line:focus-visible,
.house-cusp:focus-visible,
.zodiac-wedge:focus-visible {
  animation: focusPulse 1.6s var(--ease-in-out) infinite;
}

/* ===========================================================================
   SETTINGS SHIMMER — a brief sweep confirms a setting changed
   =========================================================================== */
.chart-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 42%, var(--accent-gold-soft) 50%, transparent 58%);
}
.chart-stage.is-shimmering::after {
  animation: shimmerSweep 460ms var(--ease-out);
}
@keyframes shimmerSweep {
  0%   { opacity: 0; transform: translateX(-60%); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

/* ===========================================================================
   PANEL ENTRANCE — tab content arrives with a slight lift
   (the .panel-pane keyframe is defined in detail-panel.css)
   =========================================================================== */

/* ===========================================================================
   REDUCED MOTION — honour the OS preference: the chart simply appears
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
  /* with the entrance animation off, make sure nothing is left at scale 0 */
  .chart-point { transform: scale(1); opacity: 1; }
}