/* Clients: two rows of logo cards drifting in opposite directions on a dark band. Hover pauses the rows and lifts a card. */
.mq { position: relative; overflow: hidden; padding-bottom: clamp(3rem, 6vw, 6rem); color: #fff; background: radial-gradient(60% 70% at 85% 10%, rgba(144,15,255,.4), rgba(144,15,255,0) 70%), radial-gradient(50% 60% at 0% 100%, rgba(144,15,255,.22), rgba(144,15,255,0) 70%), linear-gradient(180deg, #0b0713, #07070b); }
.mq .label__name, .mq .label__side { color: #fff; }
.mq .label__name .mark { background-image: url("../images/brand/novva-n-light.svg"); }
.mq .label__side .link-arrow { color: var(--purple-light); }
.mq__title { margin-top: clamp(1.5rem, 3vw, 3rem); max-width: 12ch; font-size: clamp(2.4rem, 1rem + 5vw, 6rem); font-weight: 700; letter-spacing: -0.065em; line-height: .96; text-transform: uppercase; word-spacing: .1em; color: var(--cream); }
.mq__rows { display: grid; gap: 14px; margin-top: clamp(2rem, 4vw, 4rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mq__row { display: flex; gap: 14px; width: max-content; animation: mqL 38s linear infinite; }
.mq__row--b { animation-name: mqR; animation-duration: 46s; }
.mq__rows:hover .mq__row, .mq__rows:focus-within .mq__row { animation-play-state: paused; }
@keyframes mqL { to { transform: translateX(calc(var(--mq-shift, 50%) * -1)); } }
@keyframes mqR { from { transform: translateX(calc(var(--mq-shift, 50%) * -1)); } to { transform: translateX(0); } }
.mq__card { position: relative; display: grid; place-items: center; width: clamp(200px, 20vw, 280px); aspect-ratio: 16 / 9; padding: 1.2rem; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -26px rgba(0,0,0,.7); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.mq__card img { max-width: 66%; max-height: 52%; width: auto; height: auto; object-fit: contain; transition: transform .6s var(--ease); }
.mq__tag { position: absolute; left: .9rem; bottom: .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--purple); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .5s var(--ease); }
.mq__card:hover, .mq__card:focus-visible { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 0 3px var(--purple-light), 0 30px 60px -24px rgba(144,15,255,.8); }
.mq__card:hover img { transform: scale(1.06); }
.mq__card:hover .mq__tag, .mq__card:focus-visible .mq__tag { opacity: 1; transform: none; }
@media (hover: none) { .mq__tag { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mq__rows { -webkit-mask-image: none; mask-image: none; } .mq__row { animation: none; width: auto; flex-wrap: wrap; padding-inline: var(--gutter); } .mq__row li[aria-hidden="true"] { display: none; } }

/* The rows are masked (edge fade), and a mask clips to its box: the first row's hovered card (lifted 8px, with a purple ring and glow) was cut off at the top.
   Give the rows room above and below for the lift, ring and glow, and take the same space out of the margins so the layout does not move. */
.mq__rows { padding-block: 22px 56px; margin-top: calc(clamp(2rem, 4vw, 4rem) - 22px); }
.mq { padding-bottom: max(1rem, calc(clamp(3rem, 6vw, 6rem) - 56px)); }
/* the glow under a lifted card reaches about 66px below it: leave room for all of it, so the second row's glow does not end on a hard line */
.mq__rows { padding-block: 22px 88px; }
.mq { padding-bottom: max(.5rem, calc(clamp(3rem, 6vw, 6rem) - 88px)); }

/* more room between the rows: a hovered card rises 8px, scales a little and gets a 3px ring, which used up the whole 14px gap and touched the row above */
.mq__rows { gap: 32px; }

/* wider spacing between the brand cards (was 14px across, 32px between the rows): the same 32px both ways. The loop distance is measured by js, so it follows. */
.mq__row { gap: 32px; }
.mq__rows { gap: 32px; }