/*
 * Astro charts (western wheel + vedic north-indian diamond).
 * Self-rendered SVG visuals for tool_visual messages.
 * The root shares the reveal-spread class family: table sizing, fullscreen,
 * and panzoom controls come from reveal_spread.css. Load this after it.
 * Reveal phases are driven by astro_chart_controller adding phase classes;
 * without JS the finished chart renders as-is (no staging class).
 */

/* --- Stage & base tokens (midnight defaults) --- */

.astro-chart {
  --astro-bg: #1a1f3d;
  --astro-bg-deep: #0b1026;
  --astro-paper: #f6efdd;
  --astro-ring-fill: rgba(255, 255, 255, 0.03);
  --astro-line: rgba(232, 228, 240, 0.6);
  --astro-line-soft: rgba(232, 228, 240, 0.24);
  --astro-glyph: #e8e4f0;
  --astro-text: #e8e4f0;
  --astro-accent: #d4af37;
  --astro-aspect-harmony: #5eead4;
  --astro-aspect-tension: #fb7185;
}

/* Theme presets override the tokens above (same specificity, later wins),
   so the background rule below must not carry tokens. */
.reveal-spread.astro-chart {
  cursor: default;
  background: radial-gradient(
    ellipse at center,
    var(--astro-bg) 0%,
    var(--astro-bg-deep) 100%
  );
}

.reveal-spread.astro-chart::after {
  display: none;
}

.astro-chart__stage {
  position: absolute;
  inset: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep the wheel clear of the docked info bar. The bar has a fixed min-height,
   so it claims a larger share of a small board than of a large one. */
.astro-chart--interactive .astro-chart__stage {
  inset: 2% 3% 8%;
}

@container (max-width: 30rem) {
  .astro-chart--interactive .astro-chart__stage {
    inset: 2% 3% 12%;
  }
}

.reveal-spread--fullscreen .astro-chart__stage {
  position: relative;
  width: min(85vh, 85vw);
  height: min(85vh, 85vw);
  inset: auto;
}

.astro-chart__svg {
  width: 100%;
  height: 100%;
  color: var(--astro-text);
}

.astro-chart:not(.astro-chart--complete) .reveal-spread__controls {
  display: none;
}

/* --- Theme presets --- */

.astro-chart--theme-parchment {
  --astro-bg: #f5ecd8;
  --astro-bg-deep: #e3d2ac;
  --astro-ring-fill: rgba(107, 79, 42, 0.05);
  --astro-line: rgba(96, 70, 36, 0.65);
  --astro-line-soft: rgba(96, 70, 36, 0.28);
  --astro-glyph: #4a3418;
  --astro-text: #4a3418;
  --astro-accent: #a06b2a;
  --astro-aspect-harmony: #2e7d5b;
  --astro-aspect-tension: #b04a3a;
}

.astro-chart--theme-mystic {
  --astro-bg: #2a1a3d;
  --astro-bg-deep: #170d26;
  --astro-ring-fill: rgba(236, 229, 247, 0.04);
  --astro-line: rgba(230, 220, 245, 0.55);
  --astro-line-soft: rgba(230, 220, 245, 0.22);
  --astro-glyph: #ece5f7;
  --astro-text: #ece5f7;
  --astro-accent: #c3c3dc;
  --astro-aspect-harmony: #8be9d0;
  --astro-aspect-tension: #f97d9d;
}

.astro-chart--theme-aurora {
  --astro-bg: #04231f;
  --astro-bg-deep: #010c0b;
  --astro-ring-fill: rgba(234, 252, 247, 0.04);
  --astro-line: rgba(220, 245, 240, 0.5);
  --astro-line-soft: rgba(220, 245, 240, 0.2);
  --astro-glyph: #eafcf7;
  --astro-text: #eafcf7;
  --astro-accent: #7ef0c9;
  --astro-aspect-harmony: #6ee7b7;
  --astro-aspect-tension: #f9a8d4;
}

.astro-chart--theme-vermilion {
  --astro-bg: #4a1210;
  --astro-bg-deep: #2b0a09;
  --astro-paper: #f6e3c4;
  --astro-line: rgba(156, 47, 29, 0.92);
  --astro-line-soft: rgba(156, 47, 29, 0.45);
  --astro-glyph: #3c2415;
  --astro-text: #f3e4c8;
  --astro-accent: #b3402a;
}

.astro-chart--theme-sandalwood {
  --astro-bg: #e8d9c0;
  --astro-bg-deep: #cdbb96;
  --astro-paper: #faf3e3;
  --astro-line: rgba(122, 61, 32, 0.85);
  --astro-line-soft: rgba(122, 61, 32, 0.4);
  --astro-glyph: #4d2a14;
  --astro-text: #4d2a14;
  --astro-accent: #b3541e;
}

.astro-chart--theme-indigo {
  --astro-bg: #131a33;
  --astro-bg-deep: #080d1f;
  --astro-paper: #1d2747;
  --astro-line: rgba(201, 168, 106, 0.8);
  --astro-line-soft: rgba(201, 168, 106, 0.35);
  --astro-glyph: #ecdfc0;
  --astro-text: #ecdfc0;
  --astro-accent: #d4af37;
}

/* --- Wheel parts --- */

.astro-chart__rim {
  fill: none;
  stroke: var(--astro-line);
  stroke-width: 3;
}

.astro-chart__sector {
  fill: var(--astro-ring-fill);
  stroke: var(--astro-line-soft);
  stroke-width: 1;
}

.astro-chart__sector--fire {
  fill: color-mix(in srgb, var(--astro-accent), transparent 88%);
}
.astro-chart__sector--earth {
  fill: color-mix(in srgb, var(--astro-accent), transparent 94%);
}
.astro-chart__sector--air {
  fill: color-mix(in srgb, var(--astro-accent), transparent 91%);
}
.astro-chart__sector--water {
  fill: color-mix(in srgb, var(--astro-accent), transparent 96%);
}

.astro-chart__sign-glyph,
.astro-chart__planet-glyph {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.astro-chart__sign-glyph {
  stroke: var(--astro-accent);
  opacity: 0.85;
}

/* Console theme swatch. Marks take the label colour rather than the glyph
   colour: the two agree on every western theme, and the vedic boards draw
   their grahas as labels and never touch the glyph token at all. */
.astro-chart__swatch-mark {
  fill: none;
  stroke: var(--astro-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.astro-chart__planet-glyph {
  stroke: var(--astro-glyph);
}

.astro-chart__tick-tier--1 {
  stroke: var(--astro-line-soft);
  stroke-width: 1;
}
.astro-chart__tick-tier--5 {
  stroke: var(--astro-line-soft);
  stroke-width: 1.5;
}
.astro-chart__tick-tier--10 {
  stroke: var(--astro-line);
  stroke-width: 2;
}

.astro-chart__cusp {
  stroke: var(--astro-line-soft);
  stroke-width: 1.5;
}

.astro-chart__house-number {
  fill: var(--astro-text);
  opacity: 0.45;
  font-size: 27px;
  font-family: inherit;
}

.astro-chart__hub {
  fill: color-mix(in srgb, var(--astro-bg-deep), transparent 40%);
  stroke: var(--astro-line-soft);
  stroke-width: 1.5;
}

.astro-chart__angle line {
  stroke: var(--astro-accent);
  stroke-width: 4;
}

.astro-chart__angle-label {
  fill: var(--astro-accent);
  font-size: 26px;
  font-weight: 700;
}

.astro-chart__pointer {
  stroke: var(--astro-line-soft);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.astro-chart__planet {
  outline: none;
  cursor: pointer;
}

.astro-chart__planet-halo {
  fill: none;
  stroke: var(--astro-accent);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 0.25s;
}

.astro-chart__planet:focus-visible .astro-chart__planet-halo {
  opacity: 0.7;
}

/* A finished board breathes for about twenty seconds and then settles: the
   rim takes on light, the glyphs catch it a beat later, and the wheel goes
   quiet once the reading starts. Left running forever it would read as a
   loading state, and a log holding six charts would never stop flickering.

   Every keyframe ends where the static board already is, so the last cycle
   settles instead of snapping.

   It also stops the moment a planet is picked. Selection drops everything
   else to 35%, which would leave the shimmer at a third of its strength -
   too faint to read as an effect, but not still either. Letting go starts
   the twenty seconds over. */
@media (prefers-reduced-motion: no-preference) {
  .astro-chart--interactive.astro-chart--complete:not(.astro-chart--has-selection)
    .astro-chart__rim {
    animation: astro-board-breathe 2.4s ease-in-out 8;
  }

  .astro-chart--interactive.astro-chart--complete:not(.astro-chart--has-selection)
    .astro-chart__planet-glyph {
    animation: astro-twinkle 2.4s ease-in-out 8;
    animation-delay: calc(var(--i) * 90ms);
  }
}

.astro-chart__planet-label {
  fill: var(--astro-text);
  opacity: 0.7;
  font-size: 23px;
}

.astro-chart__retro {
  fill: var(--astro-accent);
  font-size: 18px;
  font-weight: 700;
}

.astro-chart__aspect {
  stroke-width: 3;
  opacity: var(--final-opacity, 0.8);
  transition: opacity 0.25s;
}

.astro-chart__aspect--harmonious {
  stroke: var(--astro-aspect-harmony);
}

.astro-chart__aspect--tension {
  stroke: var(--astro-aspect-tension);
}

.astro-chart__aspect--neutral {
  stroke: var(--astro-line);
}

.synastry-chart__orbit {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 7;
}

.synastry-chart__orbit--a {
  stroke: var(--astro-accent);
}

.synastry-chart__orbit--b {
  stroke: var(--astro-text);
  opacity: 0.55;
}

.synastry-chart__planet--a .astro-chart__planet-glyph {
  stroke: var(--astro-accent);
}

.synastry-chart__planet--b .astro-chart__planet-glyph {
  stroke: var(--astro-text);
}

.synastry-chart__person-label {
  font-size: 28px;
  font-weight: 700;
  dominant-baseline: central;
}

.synastry-chart__person-label--a {
  fill: var(--astro-accent);
}

.synastry-chart__person-label--b {
  fill: var(--astro-text);
}

/* --- Selection states --- */

.astro-chart--has-selection
  .astro-chart__aspect:not(.is-selected):not(.is-related) {
  opacity: 0.1;
}

.astro-chart--has-selection
  .astro-chart__planet:not(.is-selected):not(.is-related) {
  opacity: 0.35;
}

.astro-chart__planet,
.astro-chart__aspect {
  transition: opacity 0.25s;
}

.astro-chart__planet.is-selected .astro-chart__planet-halo,
.astro-chart__planet.is-related .astro-chart__planet-halo {
  opacity: 1;
}

.astro-chart__aspect.is-selected,
.astro-chart__aspect.is-related {
  opacity: 1;
  stroke-width: 4.5;
}

/* --- Info bar & caption --- */

.astro-chart__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.4rem;
  background: rgba(8, 8, 18, 0.72);
  color: #ece8f6;
  font-size: 0.8rem;
  z-index: 5;
}

/* The panzoom cluster sits on the bar's left edge once the reveal completes;
   reserve its width so centred text cannot slide under it on narrow screens. */
/* The tip renders outside the board, so it lays its own parts out. It also
   lies over the board it describes, where a solid slab reads as a patch. */
.astro-chart__tip {
  --app-tooltip-bg: color-mix(in oklab, var(--color-neutral) 60%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
}

/* Tip content only, and the tip sits on the neutral tooltip surface rather
   than the board, so the board's accent has no contrast guarantee here. */
.astro-chart__info-title {
  font-weight: 700;
}

.astro-chart__info-badge {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 0.5em;
  font-size: 0.68rem;
  opacity: 0.9;
}

/* Sits opposite the panzoom cluster, which occupies the foot of the board. */
/* Bottom right: the top right belongs to the fullscreen close button. */
.astro-chart__detail-btn {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.75rem;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  white-space: nowrap;
  border: none;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 0.5;
  transition:
    opacity 0.2s,
    background 0.15s;
}

.reveal-spread:hover .astro-chart__detail-btn {
  opacity: 0.9;
}

.astro-chart__detail-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.astro-chart:not(.astro-chart--complete) .astro-chart__detail-btn {
  display: none;
}

/* --- Detail panel (also used standalone, so it owns no board colours) --- */

.astro-detail {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}

.astro-detail__heading {
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  opacity: 0.75;
}

.astro-detail__table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

.astro-detail__table th,
.astro-detail__table td {
  padding: 0.25rem 0.5rem 0.25rem 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor, transparent 90%);
}

.astro-detail__degree {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.astro-detail__retro {
  font-weight: 700;
  font-size: 0.75em;
  margin-left: 0.15em;
}

.astro-detail__muted {
  opacity: 0.6;
}

/* Element hues are the conventional ones readers expect - warm for fire, green
   for earth, yellow for air, blue for water - and stay fixed rather than
   following the board theme, since here they carry meaning. */
.astro-detail__bars {
  display: grid;
  gap: 0.375rem;
}

.astro-detail__bar-row {
  --astro-detail-hue: currentColor;
  display: grid;
  grid-template-columns: 3rem 1fr 1.5rem;
  grid-template-areas: 'name track count' 'members members members';
  align-items: center;
  gap: 0.125rem 0.5rem;
  font-size: 0.8125rem;
}

.astro-detail__bar-row--fire {
  --astro-detail-hue: #e2683c;
}
.astro-detail__bar-row--earth {
  --astro-detail-hue: #6a9a52;
}
.astro-detail__bar-row--air {
  --astro-detail-hue: #d8ac3a;
}
.astro-detail__bar-row--water {
  --astro-detail-hue: #4a86c4;
}
.astro-detail__bar-row--cardinal {
  --astro-detail-hue: #c0596f;
}
.astro-detail__bar-row--fixed {
  --astro-detail-hue: #7a6bb0;
}
.astro-detail__bar-row--mutable {
  --astro-detail-hue: #4f9a92;
}

.astro-detail__bar-name {
  grid-area: name;
  font-weight: 700;
  color: var(--astro-detail-hue);
}

.astro-detail__bar-track {
  grid-area: track;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor, transparent 92%);
  overflow: hidden;
}

.astro-detail__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--astro-detail-hue);
  transition: width 0.4s ease-out;
}

.astro-detail__bar-count {
  grid-area: count;
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.astro-detail__bar-members {
  grid-area: members;
  font-size: 0.6875rem;
  opacity: 0.6;
  padding-left: 3.5rem;
}

.astro-detail__bar-row.is-dominant .astro-detail__bar-count {
  opacity: 1;
  font-weight: 700;
  color: var(--astro-detail-hue);
}

.astro-detail__aspect {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--astro-detail-hue, currentColor);
}

.astro-detail__aspect::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: currentColor;
}

.astro-detail__aspect--trine,
.astro-detail__aspect--sextile {
  --astro-detail-hue: #3f8ea8;
}

.astro-detail__aspect--square,
.astro-detail__aspect--opposition {
  --astro-detail-hue: #c0596f;
}

.astro-detail__aspect--conjunction {
  --astro-detail-hue: #8a7f9c;
}

.astro-detail__note {
  font-size: 0.6875rem;
  opacity: 0.55;
}

/* --- Reveal choreography (staging is JS-added; no-JS renders complete) --- */

.astro-chart--staging
  :is(
    .astro-chart__rim,
    .astro-chart__sector,
    .astro-chart__sign-glyph,
    .astro-chart__tick-tier,
    .astro-chart__cusp,
    .astro-chart__house-number,
    .astro-chart__hub,
    .astro-chart__angle,
    .astro-chart__aspect,
    .astro-chart__planet
  ) {
  opacity: 0;
}

.astro-chart--phase-ring .astro-chart__rim {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: astro-draw 0.7s ease-out both;
}

.astro-chart--phase-ring .astro-chart__sector {
  animation: astro-sector-in 0.7s ease-out both;
  animation-delay: calc(var(--i) * 30ms);
}

.astro-chart--phase-ring .astro-chart__sign-glyph {
  animation: astro-fade-in 0.5s ease-out both;
  animation-delay: calc(150ms + var(--i) * 40ms);
}

.astro-chart--phase-frame
  :is(.astro-chart__tick-tier, .astro-chart__house-number, .astro-chart__hub) {
  animation: astro-fade-in 0.45s ease-out both;
}

.astro-chart--phase-frame .astro-chart__cusp {
  stroke-dasharray: 1;
  animation: astro-draw 0.6s ease-in-out both;
  animation-delay: calc(var(--i) * 35ms);
}

.astro-chart--phase-frame .astro-chart__angle {
  animation: astro-fade-in 0.5s ease-out both;
  animation-delay: 0.3s;
}

.astro-chart--phase-planets .astro-chart__planet {
  animation: astro-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i) * 130ms);
  transform-box: fill-box;
  transform-origin: center;
}

.astro-chart--phase-aspects .astro-chart__aspect {
  stroke-dasharray: 1;
  animation: astro-chord-draw 0.45s ease-out both;
  animation-delay: calc(var(--i) * 60ms);
}

.astro-chart--phase-signature
  :is([data-hs-id='sun'], [data-hs-id='moon'])
  .astro-chart__planet-halo {
  animation: astro-pulse 0.5s ease-out;
}

/* Final state: everything visible, no animation. Wins over staging/phases. */
.astro-chart--complete
  :is(
    .astro-chart__rim,
    .astro-chart__sector,
    .astro-chart__sign-glyph,
    .astro-chart__tick-tier,
    .astro-chart__cusp,
    .astro-chart__house-number,
    .astro-chart__hub,
    .astro-chart__angle,
    .astro-chart__planet
  ) {
  opacity: 1;
  animation: none;
}

.astro-chart--complete .astro-chart__aspect {
  opacity: var(--final-opacity, 0.8);
  animation: none;
}

.astro-chart--skip *,
.astro-chart--skip *::before,
.astro-chart--skip *::after {
  animation: none !important;
  transition: none !important;
}

@keyframes astro-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes astro-chord-draw {
  from {
    stroke-dashoffset: 1;
    opacity: var(--final-opacity, 0.8);
  }
  to {
    stroke-dashoffset: 0;
    opacity: var(--final-opacity, 0.8);
  }
}

@keyframes astro-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes astro-sector-in {
  from {
    opacity: 0;
    transform: rotate(-4deg);
    transform-origin: 500px 500px;
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
    transform-origin: 500px 500px;
  }
}

@keyframes astro-pop-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes astro-twinkle {
  0%,
  100% {
    stroke: var(--astro-glyph);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    stroke: var(--astro-accent);
    filter: drop-shadow(0 0 8px var(--astro-accent));
  }
}

@keyframes astro-board-breathe {
  0%,
  100% {
    stroke: var(--astro-line);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    stroke: var(--astro-accent);
    filter: drop-shadow(0 0 14px var(--astro-accent));
  }
}

@keyframes astro-pulse {
  0% {
    opacity: 0;
    transform: scale(0.8);
    transform-box: fill-box;
    transform-origin: center;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
    transform-box: fill-box;
    transform-origin: center;
  }
}

/* --- Vedic (north indian diamond) --- */

.astro-chart--vedic .astro-chart__stage {
  inset: 6%;
}

.astro-chart--vedic.astro-chart--interactive .astro-chart__stage {
  inset: 4% 7% 12% 7%;
}

.reveal-spread--fullscreen.astro-chart--vedic .astro-chart__stage {
  inset: auto;
}

.astro-chart__cell {
  fill: var(--astro-paper);
  stroke: none;
  cursor: pointer;
}

/* Two :not()s keep this above the --complete visibility rule, matching the
   western selection rules. */
.astro-chart--has-selection
  .astro-chart__cell:not(.is-selected):not(.is-related) {
  opacity: 0.55;
}

.astro-chart__cell.is-selected {
  fill: color-mix(in srgb, var(--astro-paper), var(--astro-accent) 18%);
}

.astro-chart__lattice {
  fill: none;
  stroke: var(--astro-line);
  stroke-width: 1.1;
  stroke-linejoin: round;
  pointer-events: none;
}

.astro-chart__rashi-number {
  fill: var(--astro-accent);
  opacity: 0.75;
  font-size: 3.4px;
  pointer-events: none;
}

.astro-chart__graha {
  fill: var(--astro-glyph);
  font-size: 4.4px;
  font-weight: 600;
  pointer-events: none;
}

.astro-chart__graha--compact {
  font-size: 3.4px;
}

.astro-chart__graha-retro {
  fill: var(--astro-accent);
  font-size: 2.6px;
}

.astro-chart__lagna-label {
  fill: var(--astro-glyph);
  opacity: 0.7;
  font-size: 2.8px;
  pointer-events: none;
}

.astro-chart--staging
  :is(
    .astro-chart__lattice,
    .astro-chart__cell,
    .astro-chart__rashi-number,
    .astro-chart__graha,
    .astro-chart__lagna-label
  ) {
  opacity: 0;
}

.astro-chart--vedic.astro-chart--phase-frame
  :is(.astro-chart__lattice, .astro-chart__cell) {
  animation: astro-fade-in 0.6s ease-out both;
}

.astro-chart--vedic.astro-chart--phase-numbers
  :is(.astro-chart__rashi-number, .astro-chart__lagna-label) {
  animation: astro-fade-in 0.4s ease-out both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.astro-chart--vedic.astro-chart--phase-grahas .astro-chart__graha {
  animation: astro-graha-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 100ms);
  transform-box: fill-box;
  transform-origin: center;
}

.astro-chart--vedic.astro-chart--complete
  :is(
    .astro-chart__lattice,
    .astro-chart__cell,
    .astro-chart__rashi-number,
    .astro-chart__graha,
    .astro-chart__lagna-label
  ) {
  opacity: 1;
  animation: none;
}

@keyframes astro-graha-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}