/* ==========================================================================
   Mechanica — client marks, gentle staggered breathing (motion layer only)
   Scope: #trust-band.spotlight-trust, and only while the script is running.
   Pairs with: /scripts/client-logo-rotation.js
   Docs: dev/client-logo-rotation.md

   Rules:
   - No boxes, borders, rules, gradients or decoration: type and spacing only.
   - Every mark keeps its own slot in the static grid, so nothing reflows and
     there are no carousel controls anywhere.
   - With no script, no JavaScript, or reduced motion, none of this applies and
     the parent stylesheet shows all seven marks plainly.
   - The motion is opacity only: a mark fades fully out (0) and comes straight
     back to full strength (1), in its own grid cell, with no transform, no
     movement and no controls. Markup is never hidden from assistive
     technology and never removed from the keyboard order.
   ========================================================================== */

/* each mark switches off and on again inside its own grid cell */
#trust-band.spotlight-trust .spotlight-trust__marks .spotlight-trust__mark {
  opacity: 1;
  transition: opacity 480ms ease-in-out;
}

#trust-band.spotlight-trust .spotlight-trust__marks .spotlight-trust__mark[data-clr-active] {
  opacity: 0;
}

/* keyboard first: a focused mark comes straight back to full strength */
#trust-band.spotlight-trust .spotlight-trust__marks:focus-within .spotlight-trust__mark[data-clr-active],
#trust-band.spotlight-trust .spotlight-trust__marks .spotlight-trust__mark:focus-within {
  opacity: 1;
  transition: none;
}

/* the pointer rests on the row, so the row stays lit */
@media (hover: hover) {
  #trust-band.spotlight-trust .spotlight-trust__marks:hover .spotlight-trust__mark[data-clr-active] {
    opacity: 1;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — the row is completely static: no transitions, no motion,
   every mark at full strength.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #trust-band.spotlight-trust .spotlight-trust__marks .spotlight-trust__mark {
    opacity: 1;
    transition: none;
  }

  #trust-band.spotlight-trust .spotlight-trust__marks .spotlight-trust__mark[data-clr-active] {
    opacity: 1;
  }
}