/* =====================================================================
   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 ----------
   The stated standard: motion must depict something. The only animation
   shipped with the system is a slow lattice drift, which reads as a
   sensor sweeping a field. It is opt-in, and it stops for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .motif-dots--sweep {
    animation: ds-lattice-drift 38s linear infinite;
  }
}
@keyframes ds-lattice-drift {
  from { background-position: 0 0; }
  to   { background-position: var(--dot-gap) var(--dot-gap); }
}