Logo Cloud Fade

Build a "trusted by" logo cloud section. Structure: 6 logos in a 3-column grid with generous gaps. If you don't have logo images, set text wordmarks with distinct type personalities (one heavy, one italic, one wide-tracked, one monospace) - they read as different brands while staying one system. Resting state: every logo sits at low contrast - about 28% ink opacity with a grayscale filter. The whole section should feel asleep. Hover: the hovered logo wakes up - full ink color, grayscale removed (0.3s ease), and it lifts 3px while scaling to 1.06 on a spring (stiffness ~420, damping ~22). Underneath it, a 2px accent underline grows from the left (scaleX 0 to 1, 0.3s, transform-origin left). Leaving reverses everything. Only one logo is awake at a time - the contrast between the one awake logo and the sleeping grid is the whole effect. Accessibility: logos are links or buttons with the brand name as the label; under prefers-reduced-motion skip the lift and keep only the color change. Colors as tokens: paper background, ink logos, one accent for the underline. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.