/* =====================================================================
   MESA QUANTUM — DESIGN SYSTEM (NEXT) · MOTIFS
   Rushi's three-device toolkit, as usable CSS.

     .motif-outline   formal      · the logo outline
     .motif-dots      semi-formal · the sensing lattice
     .motif-contour   expressive  · the navigation/terrain layer

   Register rule from the 2026-08-26 review: outline is for formal
   surfaces, dots for semi-formal, contour for expressive. DIGITAL IS
   THE EXCEPTION — on screen any or all three may be combined, chosen
   per communication. That is the whole point of a toolkit.

   All three inherit `color`, so they tint themselves from the theme.
   All three are decorative: they must sit behind `aria-hidden` wrappers
   and must never carry meaning a screen reader would need.
   ===================================================================== */

.motif {
  position: absolute;
  inset: 0;
  z-index: var(--ds-z-motif);
  pointer-events: none;
  overflow: hidden;
}
.motif > * { position: absolute; }

/* ---------- Dots: the sensing lattice ---------- */
.motif-dots {
  --dot-size: 1.5px;
  --dot-gap: 22px;
  --dot-color: currentColor;
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: center;
  opacity: var(--ds-motif-opacity, 0.25);
}
/* Denser secondary lattice — reads as resolution, not noise */
.motif-dots--fine { --dot-size: 1px; --dot-gap: 11px; }
.motif-dots--wide { --dot-size: 2px; --dot-gap: 40px; }

/* A lattice that fades out from a point: use where the subject is a
   sensor's field of view, so the pattern depicts falloff.
   --field-x / --field-y are set by the CALLER (inline or in a page
   stylesheet) and both carry fallbacks, so they are intentionally not
   defined in the token layer. */
.motif-dots--field {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at var(--field-x, 50%) var(--field-y, 40%), #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at var(--field-x, 50%) var(--field-y, 40%), #000 0%, transparent 78%);
}

/* ---------- Contour: terrain / navigation ----------
   DEFECT FIXED 2026-08-26, reported by the Direction B build.
   This was `background-image: url('contour.svg')`, and contour.svg paints with
   stroke="currentColor". An SVG referenced as a CSS background is an INDEPENDENT
   DOCUMENT — `currentColor` resolves against the SVG's own root, which defaults
   to black, and never inherits from the host page. On a dark ground the contour
   rendered black-on-near-black: invisible.
   The file is now used as an alpha MASK over a currentColor fill, so it tints
   from the theme like the other two devices. `background-color` is kept as the
   paint source; browsers without mask support fall back to a flat tint, which
   is a degraded motif rather than a broken one. */
.motif-contour {
  background-color: currentColor;
  -webkit-mask-image: url('contour.svg');
          mask-image: url('contour.svg');
  -webkit-mask-size: cover;    mask-size: cover;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: var(--ds-motif-opacity, 0.22);
}
.motif-contour--tile {
  -webkit-mask-size: 900px auto; mask-size: 900px auto;
  -webkit-mask-repeat: repeat;   mask-repeat: repeat;
}

/* Contour as a readout strip — a thin band rather than a full field.
   Use behind a stat row or a capability header. */
.motif-contour--band {
  inset: auto 0 0 0;
  height: clamp(120px, 22vh, 260px);
  /* two masks: the contour geometry, faded out toward the top */
  -webkit-mask-image: url('contour.svg'), linear-gradient(to top, #000, transparent);
          mask-image: url('contour.svg'), linear-gradient(to top, #000, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-size: cover, 100% 100%; mask-size: cover, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
}

/* ---------- Outline: the formal register ---------- */
.motif-outline {
  background-image: url('mark-outline.svg');
  background-repeat: no-repeat;
  background-position: right -8% top 50%;
  background-size: auto 120%;
  opacity: var(--ds-motif-opacity, 0.09);
}

/* ---------- Layering ---------- */
/* Contour beneath, lattice above: terrain sensed by an array. This is the
   combination Rushi described — dots layered over contour reading as a
   heat map. Only use it where that is actually the subject. */
.motif-sensing > .motif-contour { opacity: calc(var(--ds-motif-opacity, 0.22) * 0.9); }
.motif-sensing > .motif-dots    { opacity: calc(var(--ds-motif-opacity, 0.22) * 0.7); }

/* ---------- Motion: REMOVED IN THIS VENDORED COPY ----------
   The upstream system ships one animation here — `ds-lattice-drift`, a
   38-second drift on `.motif-dots--sweep`. It is deleted from this copy,
   not merely left unused, for two reasons.

   1. Direction A does not use the DOTS device at all; dots are Direction
      B's primary motif. Borrowing its animation would blur the very
      comparison the three builds exist to make.
   2. The audit's motion detector reads keyframes blocks out of the stylesheet
      text, not out of what the page actually applies. A keyframes block
      that nothing references is still motion the audit can see, and
      declaring it in motion-manifest.json would be a written claim about
      something that never moves.

   Upstream source of truth: mq-website-astro/design-system-next/motifs/
   motifs.css. Restore the block from there if a direction ever uses the
   sweep, and declare it in motion-manifest.json in the same commit.
   ---------------------------------------------------------------- */