/* =====================================================================
   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 ---------- */
.motif-contour {
  background-image: url('contour.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--ds-motif-opacity, 0.22);
}
.motif-contour--tile { background-size: 900px auto; background-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);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}

/* ---------- 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 BUILD (Direction A · Structure), deliberately.

   The system ships exactly one animation: `.motif-dots--sweep`, a 38s lattice
   drift on the DOTS device. Dots are Direction B's primary motif, and the
   guidelines forbid fixing one direction's weakness by borrowing another's
   device. Direction A therefore ships ZERO motion — a state the brief calls a
   legitimate choice for this direction, and one that passes C07 by construction.

   The rule and the keyframes were stripped rather than left unused because the
   audit reads every stylesheet the site serves, not only the classes the markup
   uses: an unused `@keyframes` block is still detected motion, and declaring it
   in motion-manifest.json would be a written claim about something that never
   moves on this site. Deleting it is the honest form of "ship no motion".

   To restore, copy the block back from
   design-system-next/motifs/motifs.css in mq-website-astro.
   ===================================================================== */