/* Scroll of Fire — Astrology Styles
   Companion layer for Remnant 13 Moons.
   Keep this file focused on astrology-specific UI only.
*/

/* Core astrology mirror */
.astrology-panel {
  margin-bottom: 1rem;
}

.astrology-panel .section-heading,
.section-heading {
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}

.astrology-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.astro-card {
  min-height: 220px;
  padding: 1.25rem;
  border: 1px solid rgba(243, 201, 122, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(243, 201, 122, 0.16), transparent 38%),
    rgba(12, 15, 24, 0.88);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.astro-card h3 {
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  color: var(--gold, #f3c97a);
}

.astro-card p {
  color: var(--muted, #aeb7c8);
}

/* Planetarium */
.planetarium {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(243, 201, 122, 0.18);
  background:
    radial-gradient(circle at center, rgba(243, 201, 122, 0.10), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(122, 243, 255, 0.08), transparent 42%),
    rgba(0, 0, 0, 0.18);
}

.planetarium::before,
.planetarium::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  animation: astroSlowSpin 80s linear infinite;
}

.planetarium::after {
  inset: 21%;
  border-color: rgba(243, 201, 122, 0.10);
  animation-duration: 55s;
  animation-direction: reverse;
}

.zodiac-wheel {
  position: absolute;
  inset: 4%;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.13);
  animation: astroSlowSpin 120s linear infinite;
}

.zodiac-label {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--muted, #aeb7c8);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: rotate(var(--a)) translateY(-235px) rotate(calc(-1 * var(--a)));
  transform-origin: center;
}

.sun-core {
  position: relative;
  z-index: 2;
  width: 96px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff7d8, var(--gold, #f3c97a) 36%, #a46a20 72%);
  box-shadow:
    0 0 38px rgba(243, 201, 122, 0.55),
    0 0 100px rgba(243, 201, 122, 0.22);
  color: #05070d;
  font-weight: 950;
  animation: astroSolarPulse 5s ease-in-out infinite;
}

.planet-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit, 220px);
  height: var(--orbit, 220px);
  margin-left: calc(var(--orbit, 220px) / -2);
  margin-top: calc(var(--orbit, 220px) / -2);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  transform: rotate(var(--angle, 0deg));
}

.planet-dot {
  position: absolute;
  left: 50%;
  top: -6px;
  width: var(--size, 13px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--planet-color, var(--accent, #7af3ff));
  box-shadow: 0 0 16px var(--planet-color, var(--accent, #7af3ff));
  transform: translateX(-50%);
}

.planet-dot::after {
  content: attr(data-symbol);
  position: absolute;
  left: 50%;
  top: -1.65rem;
  transform: translateX(-50%);
  color: var(--ink, #f4f1e8);
  font-weight: 950;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Placement and aspect cards */
.planet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.planet-card {
  padding: 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
}

.planet-card strong {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  color: var(--gold, #f3c97a);
}

.planet-card span,
.planet-card small {
  display: block;
  color: var(--muted, #aeb7c8);
}

.aspect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.aspect-card {
  padding: 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.16);
}

.aspect-card strong {
  color: var(--gold, #f3c97a);
}

/* Optional old ephemeris SVG compatibility */
#astroWheel [data-dot] {
  filter: drop-shadow(0 0 8px rgba(122, 243, 255, 0.35));
  transition: cx 0.25s ease, cy 0.25s ease;
}

/* Loaded state */
[data-astrology-panel] {
  opacity: 0.96;
}

[data-astrology-panel].is-loaded {
  opacity: 1;
}

/* Animations */
@keyframes astroSlowSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes astroSolarPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 38px rgba(243, 201, 122, 0.55),
      0 0 100px rgba(243, 201, 122, 0.22);
  }

  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 52px rgba(243, 201, 122, 0.72),
      0 0 130px rgba(122, 243, 255, 0.22);
  }
}

/* Responsive */
@media (max-width: 980px) {
  .astrology-grid,
  .planet-grid,
  .aspect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planetarium {
    min-height: 430px;
  }

  .zodiac-label {
    transform: rotate(var(--a)) translateY(-190px) rotate(calc(-1 * var(--a)));
  }
}

@media (max-width: 720px) {
  .astrology-panel {
    margin-bottom: 2.5rem;
  }

  .astrology-grid,
  .planet-grid,
  .aspect-grid {
    grid-template-columns: 1fr;
  }

  .astro-card {
    min-height: auto;
  }

  .planetarium {
    min-height: 360px;
  }

  .zodiac-label {
    font-size: 0.58rem;
    transform: rotate(var(--a)) translateY(-158px) rotate(calc(-1 * var(--a)));
  }

  .sun-core {
    width: 72px;
  }
}

@media (max-width: 420px) {
  .planetarium {
    min-height: 320px;
  }

  .zodiac-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planetarium::before,
  .planetarium::after,
  .zodiac-wheel,
  .sun-core {
    animation: none !important;
  }
}

/* Remnant 13 Moons astrology artwork integration */
#astrologyPanel .panel-banner{box-shadow:0 24px 70px rgba(0,0,0,.35),0 0 36px rgba(122,243,255,.08)}
#astrologyPanel .panel-banner img{object-position:center 42%}