.g-home-slide__shape.in-solar-system {
  left: 0;
  width: min(152vw, 100vh, 880px);
  height: min(152vw, 100vh, 880px);
  opacity: 1;
  pointer-events: none;
}

/*
  Slider photographs are persistent layers below Swiper. Only their opacity
  changes; the wrapper still performs Galerie's horizontal text motion.
*/
.g-home-slider__backgrounds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: var(--dark-background);
}

.g-home-slider__background {
  display: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: opacity;
}

.g-home-slider__background.is-preload,
.g-home-slider__background.is-active {
  display: block;
}

.g-home-slider__background.is-active {
  opacity: 1;
}

.g-home-slider__background .g-hero-image {
  position: absolute;
  inset: 0;
}

/*
  In slider mode this node is a direct child of .swiper, not a slide.
  It stays stationary while .swiper-wrapper translates underneath it.
*/
.g-home-slider > .swiper > .g-home-slide__shape.in-solar-system {
  z-index: 2;
}

.g-home-slider .g-home-silder__nav,
.g-home-slider .swiper-pagination {
  z-index: 3;
}

/*
  Story copy is visually above the Solar System, but plain text itself does not
  create a giant invisible pointer-blocking rectangle. Actual links/buttons keep
  normal pointer behavior, so planets can still be inspected behind non-clickable
  title/description text without stealing CTA/title-link clicks.
*/
.g-home-slider .g-home-slide__content {
  pointer-events: none;
}

.g-home-slider .g-home-slide__content a,
.g-home-slider .g-home-slide__content button,
.g-home-slider .g-home-slide__content [role='button'] {
  pointer-events: auto;
}

.g-solar-system-shape {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--foreground);
  pointer-events: none;
}

.g-home-slide.with-image .g-solar-system-shape,
.g-home-slider.with-image .g-solar-system-shape {
  color: var(--color-on-dark);
}

.g-solar-system-shape__orbit {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

/* Earth is the visual reference; orbit lines fade as they move away from it. */
.g-solar-system-shape__orbit.in-mercury { opacity: 0.09; }
.g-solar-system-shape__orbit.in-venus { opacity: 0.115; }
.g-solar-system-shape__orbit.in-earth { opacity: 0.14; }
.g-solar-system-shape__orbit.in-mars { opacity: 0.112; }
.g-solar-system-shape__orbit.in-jupiter { opacity: 0.088; }
.g-solar-system-shape__orbit.in-saturn { opacity: 0.07; }
.g-solar-system-shape__orbit.in-uranus { opacity: 0.055; }
.g-solar-system-shape__orbit.in-neptune { opacity: 0.043; }

/* A single Sun disc casts the radiation. No concentric faux-corona geometry. */
.g-solar-system-shape__sun {
  fill: currentColor;
  opacity: 0.075;
  filter:
    drop-shadow(0 0 12px currentColor)
    drop-shadow(0 0 30px currentColor)
    drop-shadow(0 0 68px currentColor);
}

/*
  Planet bodies are intentionally absent during initial page/image loading.
  Runtime positions them at the historical start state first, then reveals the
  whole set and begins the movement to now. No stale inline planet state flashes.
*/
.g-solar-system-shape__planet {
  opacity: 0;
  outline: none;
  pointer-events: none;
  cursor: default;
  transition: opacity 300ms ease;
}

.g-home-slide__shape.in-solar-system.is-planets-visible .g-solar-system-shape__planet {
  opacity: 1;
  pointer-events: all;
}

.g-home-slide__shape.in-solar-system.is-planets-visible .g-solar-system-shape__planet.is-far-side,
.g-home-slide__shape.in-solar-system.is-planets-visible .g-solar-system-shape__planet.is-interaction-blocked {
  pointer-events: none;
}

.g-solar-system-shape__planet-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.g-solar-system-shape__planet:focus-visible .g-solar-system-shape__planet-disc,
.g-solar-system-shape__planet:hover .g-solar-system-shape__planet-disc {
  opacity: 0.46;
}

.g-solar-system-shape__planet-disc {
  fill: currentColor;
  opacity: 0.23;
  transition: opacity 180ms ease;
}

.g-home-slide__shape.in-solar-system.is-entrance-animating .g-solar-system-shape__planet-disc {
  opacity: 0.34;
}

.g-solar-system-shape__planet.in-earth .g-solar-system-shape__planet-disc {
  opacity: 0.34;
}

.g-solar-system-shape__planet.in-jupiter .g-solar-system-shape__planet-disc,
.g-solar-system-shape__planet.in-saturn .g-solar-system-shape__planet-disc {
  opacity: 0.25;
}

.g-solar-system-shape__earth-halo,
.g-solar-system-shape__planet-halo,
.g-solar-system-shape__planet-outline,
.g-solar-system-shape__planet-ring,
.g-solar-system-shape__planet-detail {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

.g-solar-system-shape__earth-halo {
  stroke-width: 1.25;
  opacity: 0.18;
}

.g-solar-system-shape__planet-halo {
  stroke-width: 1;
  opacity: 0.09;
}

.g-solar-system-shape__planet-outline {
  stroke-width: 1;
  opacity: 0.12;
}

.g-solar-system-shape__planet-ring {
  stroke-width: 1.25;
  opacity: 0.22;
}

.g-solar-system-shape__planet-ring.in-uranus {
  opacity: 0.12;
}

.g-solar-system-shape__planet-detail {
  stroke-width: 0.9;
  opacity: 0.12;
}

/* JS places one global tooltip in <body> so no Swiper overflow can hide it. */
.g-solar-system-tooltip {
  position: fixed;
  z-index: 2147480000;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.4rem;
  background: rgba(18, 18, 24, 0.94);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  font-size: 0.75rem;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(7px);
}

.g-solar-system-tooltip[hidden] {
  display: none;
}

@media (min-width: 45rem) {
  .g-home-slide__shape.in-solar-system {
    width: min(84vw, 100vh, 1280px);
    height: min(84vw, 100vh, 1280px);
  }
}

@media (hover: none), (pointer: coarse) {
  .g-solar-system-shape__planet {
    pointer-events: none !important;
  }

  .g-solar-system-tooltip {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g-home-slider__background,
  .g-solar-system-shape__planet,
  .g-solar-system-shape__planet-disc {
    transition: none;
  }
}