/* ============ Planet — 3 styles via [data-planet] ============ */

.planet-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.planet {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 540px;
}

/* === Shared orbits === */

.planet__orbit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  pointer-events: none;
}

.planet__orbit--a { width: 70%; aspect-ratio: 1 / 1; opacity: 0.45; animation: orbit-spin 60s linear infinite; }
.planet__orbit--b { width: 88%; aspect-ratio: 1 / 1; opacity: 0.32; animation: orbit-spin 120s linear infinite reverse; transform: translate(-50%, -50%) rotate(18deg); }
.planet__orbit--c { width: 105%; aspect-ratio: 1 / 1; opacity: 0.18; animation: orbit-spin 200s linear infinite; transform: translate(-50%, -50%) rotate(-32deg); }

@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* satellite dots ride on the orbit border via ::before */
.planet__orbit--a::before,
.planet__orbit--b::before {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 16px var(--blue);
  top: -5px; left: 50%;
}
.planet__orbit--b::before {
  background: var(--violet);
  box-shadow: 0 0 14px var(--violet);
  width: 7px; height: 7px;
  top: 50%; right: -3px; left: auto;
}

/* === Continents (abstract blobs) + beam — work across all variants === */

.planet__continent,
.planet__beam {
  position: absolute;
  pointer-events: none;
}

.planet__continent {
  background: linear-gradient(135deg, rgba(110, 168, 255, 0.42), rgba(155, 140, 255, 0.28));
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.planet__continent--one {
  top: 16%;
  left: 14%;
  width: 40%;
  height: 28%;
  border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%;
  transform: rotate(-12deg);
}

.planet__continent--two {
  top: 38%;
  right: 10%;
  width: 34%;
  height: 22%;
  border-radius: 50% 50% 65% 35% / 60% 40% 55% 45%;
  transform: rotate(18deg);
  background: linear-gradient(135deg, rgba(155, 140, 255, 0.40), rgba(110, 168, 255, 0.30));
}

.planet__continent--three {
  bottom: 14%;
  left: 26%;
  width: 32%;
  height: 20%;
  border-radius: 55% 45% 40% 60% / 50% 50% 60% 40%;
  transform: rotate(-6deg);
  background: linear-gradient(135deg, rgba(110, 168, 255, 0.35), rgba(74, 222, 128, 0.18));
}

/* Schema variant — continents become dashed outlines, no fill */
[data-planet="schema"] .planet__continent {
  background: transparent;
  border: 1px dashed var(--blue);
  filter: none;
  mix-blend-mode: normal;
  opacity: 0.45;
}

/* Light theme — softer blend on light planet bodies */
[data-theme="light"] .planet__continent {
  opacity: 0.55;
}

/* Beam — small glowing point travelling between continents */
.planet__beam {
  top: 28%;
  left: 24%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 22px var(--blue),
    0 0 36px rgba(155, 140, 255, 0.55);
  animation: planet-beam 6s ease-in-out infinite;
  will-change: top, left, opacity, transform;
}

@keyframes planet-beam {
  0%   { top: 28%; left: 24%; opacity: 0;    transform: scale(0.6); }
  10%  { opacity: 1;                          transform: scale(1); }
  30%  { top: 48%; left: 64%; opacity: 1;    transform: scale(1); }
  45%  { top: 48%; left: 64%; opacity: 0.85; transform: scale(0.9); }
  65%  { top: 72%; left: 38%; opacity: 1;    transform: scale(1); }
  85%  { opacity: 0.5;                        transform: scale(0.7); }
  100% { top: 28%; left: 24%; opacity: 0;    transform: scale(0.6); }
}

[data-planet="schema"] .planet__beam {
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue), 0 0 24px var(--violet);
}

@media (prefers-reduced-motion: reduce) {
  .planet__beam { animation: none; opacity: 0.75; top: 48%; left: 64%; }
  .planet__orbit { animation: none !important; }
}

/* === The planet body — 3 variants === */

.planet__body {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

/* --- 3D (default) --- */

[data-planet="3d"] .planet__body {
  background:
    radial-gradient(circle at 32% 30%, #B7CCFF 0%, #4F86FF 22%, #243C8C 55%, #0B1140 85%, #050816 100%);
  box-shadow:
    inset -22px -28px 60px rgba(0,0,0,0.55),
    inset 16px 18px 60px rgba(155, 140, 255, 0.22),
    0 0 60px rgba(110, 168, 255, 0.35),
    0 0 140px rgba(110, 168, 255, 0.18);
}

[data-planet="3d"] .planet__body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(40% 28% at 30% 25%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(70% 30% at 50% 70%, rgba(74, 222, 128, 0.10), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --- Minimal --- */

[data-planet="minimal"] .planet__body {
  background: radial-gradient(circle at 40% 35%, #2C407A 0%, #11163B 65%, #0B1130 100%);
  box-shadow:
    inset -10px -14px 40px rgba(0,0,0,0.5),
    0 0 50px rgba(110, 168, 255, 0.25);
}

[data-planet="minimal"] .planet__body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(40% 24% at 32% 28%, rgba(255,255,255,0.18), transparent 60%);
}

/* --- Schematic (wireframe) --- */

[data-planet="schema"] .planet__body {
  background: transparent;
  border: 1.5px solid var(--blue);
  box-shadow: 0 0 30px rgba(110, 168, 255, 0.20), inset 0 0 30px rgba(110, 168, 255, 0.12);
}

[data-planet="schema"] .planet__body::before,
[data-planet="schema"] .planet__body::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  border: 1px solid var(--blue);
  opacity: 0.35;
  pointer-events: none;
}
[data-planet="schema"] .planet__body::before {
  clip-path: polygon(0 48%, 100% 48%, 100% 52%, 0 52%);
}
[data-planet="schema"] .planet__body::after {
  transform: scale(0.6);
  border-style: dashed;
}

[data-planet="schema"] .planet__orbit { border-style: dashed; opacity: 0.55; }
[data-planet="schema"] .planet__orbit--a { opacity: 0.7; }

/* schema needs a meridian svg overlay */
.planet__meridians {
  position: absolute;
  top: 50%; left: 50%;
  width: 44%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  color: var(--blue);
}
[data-planet="schema"] .planet__meridians { opacity: 0.45; }

/* === Floating chips around planet === */

.planet__chip {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
  padding: 5px 9px;
  border-radius: 99px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  z-index: 2;
}
.planet__chip--1 { top: 14%; left: 8%; }
.planet__chip--2 { top: 24%; right: 6%; }
.planet__chip--3 { bottom: 18%; left: 12%; }

.planet__chip .dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
  vertical-align: 1px;
  box-shadow: 0 0 8px var(--green);
}