/* =========================================================================
 * Dome / planet — a shared CSS component.
 *
 * An enormous circle of which only the top enters the frame: a dark body with
 * a light “polish” and a bright rim. The same rules as the dome of Measured
 * Results on the service pages (assets/css/mxdr-service/block5-results.css,
 * .lmx-mr-dome), moved under shared classes; a block only configures:
 *   --lmx-dome-w      — the diameter as a % of the wrapper width (460% is a
 *                       shallow arc, 240% is noticeably rounder);
 *   --lmx-dome-pad-x  — how far the wrapper extends past the section padding
 *                       (usually var(--lmx-section-padding-x)) so that the arc
 *                       runs off both edges of the screen.
 *
 * The wrapper is mandatory: the dome itself is several thousand pixels tall,
 * and without its own overflow:hidden it would count towards the section's
 * scrollHeight and the page engine would squeeze the block to fit the screen.
 * No images.
 * ====================================================================== */

.lmx-dome-wrap{position:absolute;top:0;bottom:-8%;
  left:calc(-1 * var(--lmx-dome-pad-x,0px));right:calc(-1 * var(--lmx-dome-pad-x,0px));
  overflow:hidden;pointer-events:none;z-index:0}
.lmx-dome{position:absolute;left:50%;top:0;width:var(--lmx-dome-w,460%);aspect-ratio:1/1;
  transform:translateX(-50%);border-radius:50%;display:block;
  background:radial-gradient(50% 50% at 50% 50%,#0c1214 0%,#080c0d 40%,#040606 62%,#020303 100%)}
/* The polish: concentric strokes, visible only near the rim. */
.lmx-dome::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.028) 0 1px,transparent 1px 7px);
  opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 6%);
  mask-image:linear-gradient(180deg,#000 0,transparent 6%)}
/* The rim: brightest at the apex, fading towards the sides. */
.lmx-dome::after{content:'';position:absolute;inset:0;border-radius:50%;
  border-top:2px solid rgba(255,255,255,.55);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 44%,#000 56%,transparent 70%);
  mask-image:linear-gradient(90deg,transparent 30%,#000 44%,#000 56%,transparent 70%)}

/* The variant with a teal rim and a glow above the horizon (Why LMNTRIX). */
.lmx-dome--teal::after{border-top-color:rgba(160,240,238,.85);
  box-shadow:0 -2px 18px rgba(82,199,198,.35);
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%);
  mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%)}
.lmx-dome--teal{box-shadow:0 -14px 60px rgba(82,199,198,.16),0 -40px 140px rgba(82,199,198,.08)}