/* GalaxyJS - Cosmic Background Animations for 命理探微 */
/* Source: https://github.com/Edwson/GalaxyJS - MIT License */
/* Adapted: starfield + nebula pulse + floating particles */

.cosmic-bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, #1a0a2e 0%, #0a0418 50%, #020008 100%);
  overflow: hidden;
}

.cosmic-bg canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Floating glow orbs */
.cosmic-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.15;
  animation: orbFloat 20s ease-in-out infinite;
}
.cosmic-orb:nth-child(1) { width: 400px; height: 400px; background: #7c3aed; top: -100px; left: 10%; animation-delay: 0s; }
.cosmic-orb:nth-child(2) { width: 300px; height: 300px; background: #C9A96E; top: 40%; right: -80px; animation-delay: -7s; }
.cosmic-orb:nth-child(3) { width: 250px; height: 250px; background: #5A9E8F; bottom: -50px; left: 20%; animation-delay: -14s; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.1); }
  50% { transform: translate(-20px, -80px) scale(0.9); }
  75% { transform: translate(-40px, -20px) scale(1.05); }
}

/* Twinkling stars */
.star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle var(--dur) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

/* ── Pure CSS Taiji (Yin-Yang) Symbol ── */
.taiji {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(to right, #EBE5D9 50%, #1a1030 50%);
  position: relative;
  animation: taijiSpin 20s linear infinite;
}
.taiji::before {
  content: ''; position: absolute;
  width: 50%; height: 50%;
  top: 0; left: 25%;
  background: radial-gradient(circle, #1a1030 20%, #EBE5D9 20%);
  border-radius: 50%;
}
.taiji::after {
  content: ''; position: absolute;
  width: 50%; height: 50%;
  bottom: 0; left: 25%;
  background: radial-gradient(circle, #EBE5D9 20%, #1a1030 20%);
  border-radius: 50%;
}
@keyframes taijiSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Mini Taiji for loading spinner ── */
.taiji-sm {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(to right, #EBE5D9 50%, #1a1030 50%);
  position: relative; margin: 0 auto;
  animation: taijiSpin 1.2s linear infinite;
}
.taiji-sm::before {
  content: ''; position: absolute;
  width: 50%; height: 50%;
  top: 0; left: 25%;
  background: radial-gradient(circle, #1a1030 20%, #EBE5D9 20%);
  border-radius: 50%;
}
.taiji-sm::after {
  content: ''; position: absolute;
  width: 50%; height: 50%;
  bottom: 0; left: 25%;
  background: radial-gradient(circle, #EBE5D9 20%, #1a1030 20%);
  border-radius: 50%;
}

/* ── East Asian corner ornaments (desktop only) ── */
@media (min-width: 769px) {
  .card.card-ornament {
    position: relative;
    overflow: visible;
  }
  .card.card-ornament::before,
  .card.card-ornament::after {
    content: ''; position: absolute;
    width: 16px; height: 16px;
    pointer-events: none; z-index: 2;
  }
  .card.card-ornament::before {
    top: -1px; left: -1px;
    border-top: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
    border-radius: 4px 0 0 0;
  }
  .card.card-ornament::after {
    bottom: -1px; right: -1px;
    border-bottom: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
    border-radius: 0 0 4px 0;
  }
}

/* ── Gold shimmer sweep ── */
@keyframes goldShimmer {
  0% { background-position: -200% center; opacity: 0; }
  30% { opacity: 0.6; }
  70% { opacity: 0.6; }
  100% { background-position: 200% center; opacity: 0; }
}
.shimmer-sweep {
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(201,169,110,0.08) 45%,
    rgba(201,169,110,0.18) 50%,
    rgba(201,169,110,0.08) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: goldShimmer 1.5s ease-in-out 1;
}

/* ── Wuxing bar grow animation ── */
@keyframes barGrow {
  from { width: 0 !important; }
}