/*
  File: meadnyte-site/assets/css/orbital-planets.css
  Phase: 04_Threshold_Starfield_and_Stage_Polish

  Purpose:
  - Controls visual appearance and static starting placement of the six orbital room planets.
  - Makes planets read as dimensional planetary bodies instead of flat black discs.
  - Adds restrained surface tone, rim light, atmospheric glow, subtle terrain/cloud texture, and Sigil-facing illumination.
  - Preserves the current Meadnyte design language: dark, ceremonial, regal, gold-violet, not colorful sci-fi.

  Modification boundary:
  - Tune planet surface, rim light, glow, texture, label readability, and base visual treatment here.
  - Do not calculate orbital movement here; use orbital-config.js and orbital-menu.js.
  - Do not style the central logo/sigil here; use sigil.css.
  - Do not style starfield or browser background fill here; use entry-threshold.css.
  - Do not change navigation, room IDs, page structure, or destination paths here.
*/

.orbital-planets {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  font-family: var(--font-ui);
}

.orbital-planet {
  --orbit-x: 0px;
  --orbit-y: 0px;
  --planet-size: clamp(4.6rem, 6.9vw, 5.95rem);
  --planet-scale: 1;

  --planet-surface-deep: rgba(7, 6, 16, 0.99);
  --planet-surface-mid: rgba(33, 27, 58, 0.98);
  --planet-surface-high: rgba(92, 68, 132, 0.72);
  --planet-surface-gold: rgba(214, 189, 120, 0.2);
  --planet-rim: rgba(214, 189, 120, 0.34);
  --planet-glow: rgba(117, 84, 176, 0.28);
  --planet-shadow: rgba(0, 0, 0, 0.76);
  --planet-terminator: rgba(0, 0, 0, 0.62);
  --planet-label-shadow: rgba(0, 0, 0, 0.9);

  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--planet-size);
  aspect-ratio: 1;
  overflow: visible;
  border: 1px solid rgba(214, 189, 120, 0.2);
  border-radius: 50%;
  color: rgba(242, 234, 217, 0.88);
  background:
    radial-gradient(circle at 30% 24%, rgba(242, 234, 217, 0.18) 0 0.18rem, transparent 0.62rem),
    radial-gradient(circle at 34% 27%, var(--planet-surface-gold), transparent 28%),
    radial-gradient(circle at 38% 32%, var(--planet-surface-high), var(--planet-surface-mid) 36%, var(--planet-surface-deep) 69%, #000 100%);
  box-shadow:
    -0.28rem -0.22rem 0.78rem rgba(242, 234, 217, 0.09),
    0.3rem 0.36rem 1.45rem var(--planet-shadow),
    0 0 0.8rem rgba(214, 189, 120, 0.08),
    0 0 2rem var(--planet-glow),
    inset 0.58rem 0.48rem 0.9rem rgba(242, 234, 217, 0.055),
    inset -1.05rem -0.96rem 1.75rem var(--planet-terminator),
    inset 0 0 1.5rem rgba(214, 189, 120, 0.045);
  text-align: center;
  text-decoration: none;
  transform:
    translate(-50%, -50%)
    translate(var(--orbit-x), var(--orbit-y))
    scale(var(--planet-scale));
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
  will-change: transform;
}

.orbital-planet::before {
  content: "";
  position: absolute;
  inset: -0.62rem;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid rgba(120, 86, 180, 0.16);
  background:
    radial-gradient(circle at 34% 27%, rgba(242, 234, 217, 0.09), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(214, 189, 120, 0.1) 69%, transparent 78%);
  box-shadow:
    0 0 1.2rem rgba(120, 86, 180, 0.22),
    0 0 2.35rem rgba(214, 189, 120, 0.07);
  pointer-events: none;
}

.orbital-planet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 30% 22%, rgba(242, 234, 217, 0.2), transparent 20%),
    radial-gradient(ellipse at 22% 56%, rgba(214, 189, 120, 0.1), transparent 17%),
    radial-gradient(ellipse at 58% 36%, rgba(242, 234, 217, 0.055), transparent 24%),
    radial-gradient(ellipse at 65% 74%, rgba(0, 0, 0, 0.28), transparent 26%),
    linear-gradient(125deg, transparent 0 27%, rgba(242, 234, 217, 0.045) 28% 31%, transparent 32% 47%, rgba(214, 189, 120, 0.045) 48% 51%, transparent 52%),
    linear-gradient(160deg, transparent 0 18%, rgba(0, 0, 0, 0.16) 19% 24%, transparent 25% 62%, rgba(0, 0, 0, 0.18) 63% 68%, transparent 69%);
  mix-blend-mode: screen;
  opacity: 1.00;
  pointer-events: none;
}

.orbital-planet__label {
  position: relative;
  z-index: 2;
  max-width: 86%;
  padding: 0.16rem 0.26rem;
  border-radius: 999px;
  font-size: clamp(0.48rem, 0.62vw, 0.64rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow:
    0 0 0.42rem var(--planet-label-shadow),
    0 0 0.74rem rgba(0, 0, 0, 0.86),
    0 0 0.22rem rgba(214, 189, 120, 0.18);
  text-transform: uppercase;
}

.orbital-planet:hover,
.orbital-planet:focus-visible,
.orbital-planet.is-active {
  color: var(--color-gold-bright);
  border-color: rgba(214, 189, 120, 0.56);
  box-shadow:
    -0.32rem -0.25rem 0.9rem rgba(242, 234, 217, 0.13),
    0.34rem 0.42rem 1.55rem var(--planet-shadow),
    0 0 1rem rgba(214, 189, 120, 0.18),
    0 0 2.55rem rgba(129, 91, 188, 0.42),
    inset 0.58rem 0.48rem 0.95rem rgba(242, 234, 217, 0.075),
    inset -1.05rem -0.96rem 1.75rem var(--planet-terminator),
    inset 0 0 1.7rem rgba(214, 189, 120, 0.08);
}

.orbital-planet:hover::before,
.orbital-planet:focus-visible::before,
.orbital-planet.is-active::before {
  border-color: rgba(214, 189, 120, 0.26);
  box-shadow:
    0 0 1.25rem rgba(214, 189, 120, 0.2),
    0 0 2.65rem rgba(120, 86, 180, 0.3);
}

/* Planet: Listen — luminous violet-gold body */
.orbital-planet--listen {
  --orbit-x: -2.2rem;
  --orbit-y: -11rem;
  --planet-size: clamp(4.8rem, 7vw, 6.05rem);
  --planet-scale: 1.02;
  --planet-surface-deep: rgba(8, 7, 19, 1.00);
  --planet-surface-mid: rgba(47, 34, 82, 1.00);
  --planet-surface-high: rgba(113, 82, 158, 1.00);
  --planet-surface-gold: rgba(214, 189, 120, 1.00);
  --planet-rim: rgba(214, 189, 120, 0.38);
  --planet-glow: rgba(129, 91, 188, 0.32);
}

/* Planet: Signals — cooler deep-space signal body */
.orbital-planet--signals {
  --orbit-x: -8.8rem;
  --orbit-y: -5.3rem;
  --planet-size: clamp(4.3rem, 6.2vw, 5.35rem);
  --planet-scale: 0.94;
  --planet-surface-deep: rgba(4, 8, 18, 1.00);
  --planet-surface-mid: rgba(24, 45, 75, 1.00);
  --planet-surface-high: rgba(68, 96, 135, 1.00);
  --planet-surface-gold: rgba(214, 189, 120, 1.00);
  --planet-glow: rgba(72, 112, 168, 0.28);
}

/* Planet: House — largest ceremonial dark-gold body */
.orbital-planet--house {
  --orbit-x: -10rem;
  --orbit-y: 4.7rem;
  --planet-size: clamp(5rem, 7.6vw, 6.55rem);
  --planet-scale: 1.08;
  --planet-surface-deep: rgba(10, 7, 13, 1.00);
  --planet-surface-mid: rgba(54, 39, 52, 1.00);
  --planet-surface-high: rgba(123, 86, 87, 1.00);
  --planet-surface-gold: rgba(214, 189, 120, 1.00);
  --planet-glow: rgba(214, 189, 120, 0.18);
}

/* Planet: Contact — warm near-field body */
.orbital-planet--contact {
  --orbit-x: 8.3rem;
  --orbit-y: 2.5rem;
  --planet-size: clamp(4.5rem, 6.4vw, 5.6rem);
  --planet-scale: 0.96;
  --planet-surface-deep: rgba(8, 6, 14, 1.00);
  --planet-surface-mid: rgba(50, 31, 56, 1.00);
  --planet-surface-high: rgba(116, 72, 105, 1.00);
  --planet-surface-gold: rgba(214, 189, 120, 1.00);
  --planet-glow: rgba(156, 98, 152, 0.26);
}

/* Planet: Watch — smaller dark-violet observation body */
.orbital-planet--watch {
  --orbit-x: 10.7rem;
  --orbit-y: 6.1rem;
  --planet-size: clamp(4rem, 5.7vw, 4.9rem);
  --planet-scale: 0.86;
  --planet-surface-deep: rgba(5, 6, 16, 1.00);
  --planet-surface-mid: rgba(31, 30, 69, 1.00);
  --planet-surface-high: rgba(78, 78, 135, 1.00);
  --planet-surface-gold: rgba(214, 189, 120, 1.00);
  --planet-glow: rgba(93, 93, 169, 0.26);
  opacity: 1.00;
}

/* Planet: About — smallest archived ember body */
.orbital-planet--about {
  --orbit-x: 5.2rem;
  --orbit-y: 9rem;
  --planet-size: clamp(3.6rem, 5.1vw, 4.45rem);
  --planet-scale: 0.78;
  --planet-surface-deep: rgba(7, 5, 12, 1.00);
  --planet-surface-mid: rgba(41, 27, 49, 1.00);
  --planet-surface-high: rgba(91, 62, 94, 1.00);
  --planet-surface-gold: rgba(214, 189, 120, 1.00);
  --planet-glow: rgba(118, 76, 136, 0.22);
  opacity: 1.00;
}

@media (max-width: 620px) {
  .orbital-planet {
    width: var(--planet-size, clamp(3.65rem, 14.5vw, 4.6rem));
  }

  .orbital-planet__label {
    font-size: clamp(0.43rem, 1.8vw, 0.56rem);
  }

  .orbital-planet--listen {
    --orbit-x: -2.4rem;
    --orbit-y: -8.1rem;
  }

  .orbital-planet--signals {
    --orbit-x: -6.5rem;
    --orbit-y: -3.7rem;
  }

  .orbital-planet--house {
    --orbit-x: -6.5rem;
    --orbit-y: 3.4rem;
  }

  .orbital-planet--contact {
    --orbit-x: 5.8rem;
    --orbit-y: 2.4rem;
  }

  .orbital-planet--watch {
    --orbit-x: 7.5rem;
    --orbit-y: 5.4rem;
  }

  .orbital-planet--about {
    --orbit-x: 3.4rem;
    --orbit-y: 7.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbital-planet {
    transition: none !important;
  }
}