/* ═══════════════════════════════════════════════════════════════════════════
   QUANTUM Hera — containment sphere visual
   XOVEREIGN Technologies · White Crown Enterprises

   CSS 3D only. No WebGL, no canvas, no Three.js, no library of any kind — the
   sphere is `preserve-3d` and a set of rotated rings, which renders identically
   offline and costs nothing to ship.

   TWO TRAPS THIS FILE IS WRITTEN AROUND, both of which flatten a 3D scene into
   a single plane with no error and no warning:

     1. `filter` (and `backdrop-filter`) on an ANCESTOR of a `preserve-3d`
        subtree creates a containing block that collapses the whole thing. Any
        blur in here is therefore applied to a SIBLING of the stage, never to a
        parent of it.

     2. `overflow` other than `visible` on an ancestor does the same. The stage
        clips with a mask on a sibling layer instead.

   Colour: silver, platinum and blue only. No gold anywhere, including the
   depth ramp — the shells are a cold luminosity gradient, not a warm one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stage ──────────────────────────────────────────────────────────────── */

.qx-sphere-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin-inline: auto;
  perspective: 1100px;
  perspective-origin: 50% 46%;
  /* No overflow, no filter. See the header. */
}

.qx-sphere {
  position: relative;
  width: 74%;
  height: 74%;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(0deg);
  animation: qx-sphere-spin 46s linear infinite;
  will-change: transform;
}

@keyframes qx-sphere-spin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}

/* ── Meridians ──────────────────────────────────────────────────────────── */
/*
   The geometry has 360 meridian sectors. The diagram draws every tenth of
   them — thirty-six rings — because 360 outlined elements is a lot of DOM for
   a decorative figure and the tenth-degree spacing reads as a continuous
   surface anyway. The caption in the markup says so; it does not claim to be
   drawing all 360.
*/
.qx-meridian {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transform-style: preserve-3d;
  opacity: 0.5;
}

/* Every third ring is drawn brighter, so the eye can count around the sphere
   instead of seeing an undifferentiated mesh. */
.qx-meridian.is-major {
  border-color: rgba(122, 162, 255, 0.55);
  opacity: 0.85;
}

/* ── Depth shells ───────────────────────────────────────────────────────── */
/*
   A sphere is SOLID, not a shell, and a wireframe on its own reads as a cage.
   The nested shells below are the depth: each a smaller sphere inside the
   last, dimmer as it goes in, so the figure reads as filled.

   THEY DO NOT ROTATE, and that is the whole point of this element existing
   separately from `.qx-sphere`. A flat disc inside a `preserve-3d` subtree
   turns with it, which means it goes edge-on twice per revolution and renders
   as a bright vertical streak through the middle of the sphere. Billboarding
   the volume — keeping it outside the rotating subtree — makes it read as a
   filled body from every angle instead.
*/
.qx-sphere-volume {
  position: absolute;
  /* Matches `.qx-sphere`, which is 74% of the stage, centred. */
  inset: 13%;
  z-index: 1;
  pointer-events: none;
}

.qx-shell {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 30%,
    rgba(159, 232, 255, 0.30),
    rgba(77, 163, 255, 0.19) 44%,
    rgba(47, 111, 208, 0.10) 74%,
    transparent 100%
  );
}

.qx-shell-2 { inset: 11%; opacity: 0.80; }
.qx-shell-3 { inset: 22%; opacity: 0.66; }
.qx-shell-4 { inset: 33%; opacity: 0.52; }
.qx-shell-5 { inset: 44%; opacity: 0.40; }

/* The core: the deepest point of the depth column. */
.qx-core {
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ice), var(--blue-deep) 62%, transparent 100%);
  opacity: 0.55;
}

/* ── Glow ───────────────────────────────────────────────────────────────── */
/*
   A SIBLING of the stage, deliberately, and behind it. A blur on an ancestor
   of the sphere would flatten preserve-3d and collapse the whole figure into a
   flat disc.
*/
.qx-sphere-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 163, 255, 0.26), transparent 68%);
  filter: blur(34px);
  z-index: 0;
  pointer-events: none;
}

.qx-sphere-stage > .qx-sphere { z-index: 2; }

/* ── Penetration front ──────────────────────────────────────────────────── */
/*
   The radial track an attack sinks along, and the marker showing how deep it
   has reached. Both are driven from the engine's real depth figure, not from
   an animation timeline.
*/
.qx-front-track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 37%;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(159, 232, 255, 0.62), rgba(159, 232, 255, 0.06));
  border-radius: 2px;
  opacity: 0;
  transition: opacity 240ms var(--ease);
  z-index: 2;
  pointer-events: none;
}

.qx-front-track.is-live { opacity: 1; }

.qx-front-marker {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 12px rgba(159, 232, 255, 0.85);
  transition: left 420ms var(--ease-out);
}

/* A sealed front: the route behind it has been re-keyed. Drawn as a closed
   ring rather than a trailing line, because there is no longer a trail. */
.qx-front-track.is-sealed {
  background: linear-gradient(90deg, rgba(185, 198, 222, 0.10), rgba(159, 232, 255, 0.55));
}

/* ── Readouts ───────────────────────────────────────────────────────────── */

.qx-sphere-readout {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.qx-readout-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: rgba(17, 26, 51, 0.42);
}

.qx-readout-key {
  font-size: var(--t-label);
  color: var(--dim);
  letter-spacing: 0.02em;
}

.qx-readout-value {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--platinum);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.qx-readout-value.is-good { color: var(--ice); }

/* ── The three mechanics ────────────────────────────────────────────────── */

.qx-mechanic {
  position: relative;
  padding-left: 54px;
}

.qx-mechanic-mark {
  position: absolute;
  left: 0;
  top: 2px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(17, 26, 51, 0.6);
  color: var(--blue-soft);
}

.qx-mechanic-mark svg { width: 20px; height: 20px; }

/* ── Formula plates ─────────────────────────────────────────────────────── */

.qx-formula {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(22, 32, 63, 0.55), rgba(11, 18, 38, 0.35));
}

.qx-formula-name {
  font-size: var(--t-label);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
}

.qx-formula-math {
  font-family: var(--mono);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.qx-formula-result {
  margin: 12px 0 0;
  font-size: var(--t-small);
  color: var(--silver);
}

.qx-formula-result b {
  color: var(--ice);
  font-family: var(--mono);
  font-weight: 600;
}

/* ── Barrier ladder ─────────────────────────────────────────────────────── */

.qx-ladder {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.qx-ladder-item {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: rgba(11, 18, 38, 0.45);
  font-size: var(--t-small);
}

.qx-ladder-pos {
  font-family: var(--mono);
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.qx-ladder-item[data-kind="sphere"] {
  border-color: rgba(122, 162, 255, 0.42);
  background: rgba(22, 32, 63, 0.66);
}

.qx-ladder-item[data-kind="sphere"] .qx-ladder-label { color: var(--ice); }

.qx-ladder-kind {
  font-size: var(--t-label);
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* ── Demonstration controls ─────────────────────────────────────────────── */

.qx-demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
/*
   The rotation is decoration; the readouts carry every fact the figure shows.
   Under a reduced-motion preference the sphere holds a fixed three-quarter
   angle, which is more legible anyway, and the front marker snaps instead of
   easing.
*/
@media (prefers-reduced-motion: reduce) {
  .qx-sphere {
    animation: none;
    transform: rotateX(-18deg) rotateY(-24deg);
  }
  .qx-front-marker,
  .qx-front-track {
    transition: none;
  }
}

/* ── Narrow viewports ───────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .qx-sphere-stage { max-width: 300px; }
  .qx-mechanic { padding-left: 0; padding-top: 48px; }
  .qx-mechanic-mark { top: 0; }
  .qx-ladder-item { grid-template-columns: 2.2rem 1fr; }
  .qx-ladder-kind { grid-column: 2; }
}