/* ============================================================
   ORACLE SOLAR — meditating oracle wrapped in an animated solar system
   Replaces the static images/oracle-meditate.png on the landing hero
   and the card-selection welcome screen.

   The central figure stays the meditating-oracle photo; a sun glow
   and 4 tilted orbit rings (each carrying a revolving planet) spin
   around her. Fully self-contained and layout-safe: every moving
   node is absolutely positioned inside .oracle-solar, so this never
   shifts surrounding content (no CLS).

   Respects prefers-reduced-motion: no spinning, planets parked.
   ============================================================ */

.oracle-solar {
  position: relative;
  width: var(--osys-size, 200px);
  height: var(--osys-size, 200px);
  margin: 0 auto;
  flex-shrink: 0;
}

/* ---- central sun glow (behind the figure) ---- */
.osys-sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66%;
  height: 66%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 216, 130, 0.55) 0%,
              rgba(212, 175, 55, 0.22) 42%,
              transparent 70%);
  z-index: 2;
  pointer-events: none;
  animation: osysSun 5s ease-in-out infinite;
}

/* ---- the meditating oracle (still photo) ---- */
.osys-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  z-index: 3;
  border: 2px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.35),
              0 0 64px rgba(123, 95, 212, 0.3);
  animation: osysBreathe 6s ease-in-out infinite;
}

/* ---- orbit rings (tilted ellipses) ---- */
.osys-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.16);
  z-index: 1;
  pointer-events: none;
}
.osys-orbit--1 { width: 84%;  height: 84%;  transform: translate(-50%, -50%) rotateX(74deg); }
.osys-orbit--2 { width: 110%; height: 110%; transform: translate(-50%, -50%) rotateX(68deg) rotateZ(35deg); }
.osys-orbit--3 { width: 138%; height: 138%; transform: translate(-50%, -50%) rotateX(78deg) rotateZ(-20deg); }
.osys-orbit--4 { width: 166%; height: 166%; transform: translate(-50%, -50%) rotateX(63deg) rotateZ(15deg); }

/* ---- the spinning carrier inside each orbit ---- */
.osys-spin {
  position: absolute;
  inset: 0;
  animation: osysSpin linear infinite;
}
.osys-orbit--1 .osys-spin { animation-duration: 13s; }
.osys-orbit--2 .osys-spin { animation-duration: 21s; animation-direction: reverse; }
.osys-orbit--3 .osys-spin { animation-duration: 33s; }
.osys-orbit--4 .osys-spin { animation-duration: 47s; animation-direction: reverse; }

/* ---- planets (sit on the ring edge, carried by .osys-spin) ---- */
.osys-planet {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}
.osys-p1 { color: #cfa6ff; width: 8px; height: 8px; top: -4px; margin-left: -4px; } /* violet  */
.osys-p2 { color: #7ec8ff; }                                                        /* blue    */
.osys-p3 { color: #ffd479; }                                                        /* gold    */
.osys-p4 { color: #ff8f6b; width: 9px; height: 9px; }                               /* amber   */

@keyframes osysSpin { to { transform: rotateZ(360deg); } }

@keyframes osysBreathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.3)); }
  50%      { filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5))
                     drop-shadow(0 0 60px rgba(123, 95, 212, 0.3)); }
}

@keyframes osysSun {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* slightly smaller on phones so the outer orbit doesn't crowd text */
@media (max-width: 600px) {
  .oracle-solar { width: var(--osys-size-m, 168px); height: var(--osys-size-m, 168px); }
}

@media (prefers-reduced-motion: reduce) {
  .osys-spin,
  .osys-core,
  .osys-sun { animation: none; }
  /* park planets at varied angles so it still reads as a solar system */
  .osys-orbit--2 .osys-spin { transform: rotateZ(120deg); }
  .osys-orbit--3 .osys-spin { transform: rotateZ(240deg); }
  .osys-orbit--4 .osys-spin { transform: rotateZ(300deg); }
}