/* ============ 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);
}

/* ============ Natural vector Earth ============ */

.planet--earth .planet__orbit::before {
  display: none;
}

.planet--earth {
  transform: translateY(-28%);
}

.planet--earth .planet__orbit {
  border-color: rgba(120, 160, 255, 0.20);
}

.planet--earth .planet__orbit--a {
  width: 74%;
  opacity: 0.50;
}

.planet--earth .planet__orbit--b {
  width: 91%;
  opacity: 0.28;
}

.planet--earth .planet__orbit--c {
  width: 108%;
  opacity: 0.14;
}

.planet__globe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  overflow: visible;
  filter: drop-shadow(0 34px 36px rgba(0, 0, 0, 0.32));
  animation: earth-float 8s ease-in-out infinite;
  z-index: 1;
}

@keyframes earth-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-6px); }
}

.planet__ocean-stop--light { stop-color: #66c6f0; }
.planet__ocean-stop--mid { stop-color: #176fa9; }
.planet__ocean-stop--deep { stop-color: #08284f; }

.planet__atmosphere-glow {
  fill: rgba(78, 164, 255, 0.40);
}

.planet__atmosphere {
  fill: rgba(70, 158, 255, 0.12);
  stroke: rgba(151, 211, 255, 0.65);
  stroke-width: 2;
}

.planet__earth-grid {
  fill: none;
  stroke: rgba(205, 235, 255, 0.13);
  stroke-width: 0.8;
}

.planet__land {
  fill: rgba(168, 211, 255, 0.025);
  stroke: rgba(222, 240, 255, 0.78);
  stroke-width: 1.35;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(139, 197, 255, 0.28));
}

.planet__land--greenland {
  fill: rgba(168, 211, 255, 0.025);
}

.planet__earth-rim {
  fill: none;
  stroke: rgba(186, 226, 255, 0.64);
  stroke-width: 1.5;
}

.planet__route {
  color: #ffffff;
}

.planet__route use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 3 7;
  opacity: 0.28;
}

.planet__route circle {
  fill: #ffffff;
  stroke: rgba(183, 220, 255, 0.92);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 4px rgba(210, 235, 255, 0.82));
  animation: route-node-pulse 2.4s ease-in-out infinite alternate;
}

.planet__route circle:nth-of-type(2) { animation-delay: -0.4s; }
.planet__route circle:nth-of-type(3) { animation-delay: -0.8s; }
.planet__route circle:nth-of-type(4) { animation-delay: -1.2s; }
.planet__route circle:nth-of-type(5) { animation-delay: -1.6s; }
.planet__route circle:nth-of-type(6) { animation-delay: -2s; }

@keyframes route-node-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.planet__star-halo {
  fill: rgba(255, 255, 255, 0.82);
}

.planet__star {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 1;
  stroke-linejoin: round;
}

.planet__star-core {
  fill: #ffffff;
}

.planet__traveler {
  filter: drop-shadow(0 0 7px rgba(219, 239, 255, 0.98));
}

body[data-theme="light"] .planet__globe {
  filter: drop-shadow(0 30px 34px rgba(52, 91, 153, 0.22));
}

body[data-theme="light"] .planet__ocean-stop--light { stop-color: #8bd8f4; }
body[data-theme="light"] .planet__ocean-stop--mid { stop-color: #348cc2; }
body[data-theme="light"] .planet__ocean-stop--deep { stop-color: #17527e; }

body[data-theme="light"] .planet__atmosphere-glow {
  fill: rgba(79, 140, 255, 0.24);
}

body[data-theme="light"] .planet__atmosphere {
  fill: rgba(79, 140, 255, 0.08);
  stroke: rgba(54, 123, 196, 0.46);
}

body[data-theme="light"] .planet__earth-grid {
  stroke: rgba(255, 255, 255, 0.28);
}

body[data-theme="light"] .planet__land {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.90);
  filter: drop-shadow(0 0 2px rgba(42, 112, 187, 0.32));
}

body[data-theme="light"] .planet__earth-rim {
  stroke: rgba(220, 242, 255, 0.84);
}

body[data-theme="light"] .planet--earth .planet__orbit {
  border-color: rgba(57, 120, 238, 0.17);
}

@media (max-width: 980px) {
  .planet--earth {
    transform: translateY(-7%);
  }
}

@media (max-width: 767px) {
  .hero__visual {
    min-height: 340px;
  }

  .planet__globe {
    width: 94%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planet__globe,
  .planet__route circle {
    animation: none;
  }

  .planet__traveler {
    display: none;
  }
}