/* =========================================================================
   Module · Logos / Grid — Figma 5495:34725 (page Global: Modules)
   420 5508:36300 · 1024 5495:34888 · 1440 5495:34815 · 1920 5492:17571
   Home: 420 7021:54684 · 1024 7021:54673 · 1440 7021:54662 · 1920 7021:54619

   Header (a Section Header, inset by page-margin), section-gap, then the
   Logo Grid: the rows of logo cards, centred and bleeding off both edges,
   run as the old page's marquee (home2.js [data-marquee-row]).
   The section has no side padding of its own (Figma: the Header carries
   page-margin, the grid is centred on the frame), so the rows can span the
   whole window. The ground is Module Background (data-bg), over White.

   The logo card is drawn on the module in Figma (a group: a White
   rectangle and the logo), not a block, so it is styled here.
   Raw in Figma: the card sizes (175 × 100, 196 × 112, 280 × 160,
   336 × 192), their radii (2, 4, 4.8 and 6 mixed — radius/box here), the
   rows' positions and the gaps between them (21 at 420, 24 at 1920), the
   logos' places in their cards.
   ========================================================================= */
.m-logos-grid {
  padding-inline: 0;
  align-items: stretch;
  background: linear-gradient(var(--module-background), var(--module-background)), var(--color-white);
}
.m-logos-grid__header { padding-inline: var(--gutter); }

/* ── Logo Grid ─────────────────────────────────────────────────────────
   The rows are Figma's rows, one card size and one pitch per frame
   (card + gap: 175 + 20 at 420, 196 / 280 / 336 + grid-gutter above).
   Figma places the rows absolutely: 21 apart at 420, grid-gutter at 1024
   and 1440 (24.33 there, read as 24), 24 at 1920. */
.m-logos-grid__grid {
  --card-w: 175px;                  /* Figma: Logo 175 × 100 at 420 */
  --card-h: 100px;
  --card-r: var(--radius-box);   /* Figma: 2 / 4 / 4.8 / 6 mixed, raw; radius/box here */
  --row-gap: var(--space-20);
  display: flex;
  flex-direction: column;
  gap: 21px;                        /* Figma: rows 121 apart, cards 100 tall */
}

/* The clip. It has to be `overflow` on both axes, which would cut the
   cards' 44px rise flush at the row's edges, so
   the box gets that room inside the clip as padding and hands it back to
   the layout as a negative margin — the old page's .hp-marquee trick. The
   overlapping padding would catch the pointer meant for the row above or
   the button over it, so the box itself lets the pointer through.
   `clip` where it exists: unlike `hidden` it is not a scroll container, so
   focusing a card parked off-screen cannot scroll the row sideways. */
.m-logos-grid__marquee {
  --air: 48px;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--air);
  margin-block: calc(var(--air) * -1);
  pointer-events: none;
}
.m-logos-grid__marquee--3 { display: block; }

.m-logos-grid__row {
  display: flex;
  gap: var(--row-gap);
  width: max-content;
  will-change: transform;
}

/* ── where the rows rest ───────────────────────────────────────────────
   Figma draws each row at one moment of the loop; the 1:1 compare runs with
   reduced motion, where home2.js leaves the rows at that resting pose:
   row 1 at translate 0, row 2 half a period along (the script starts every
   second row there). So the offsets below are Figma's positions, written
   as they move with the window — the Logo Grid is centred, so each row
   sits at 50% + (its x − half the frame).

   Why the logos are in the markup twice: the script's period is then two
   sets, so row 2's half-period start is one whole set — the same picture
   as translate 0 — and the row is long enough to cover a 2560 window
   through the whole loop. The offsets are those positions moved left by a
   whole set where needed, so each row starts at or before the window's
   left edge and still reaches past its right edge at the far end of the
   loop (x ≤ 0 and x + 2 sets − gap ≥ window, across the frame's range). */
.m-logos-grid__marquee--1 .m-logos-grid__row { margin-left: calc(50% - 1653px); }   /* 420: x −78, less one set (1365) */
.m-logos-grid__marquee--2 .m-logos-grid__row { margin-left: calc(50% - 754px); }    /* 420: x −544 */
.m-logos-grid__marquee--3 .m-logos-grid__row { margin-left: calc(50% - 1057px); }   /* 420: x −847 */

.m-logos-grid__logo {
  flex: none;
  display: block;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  background: var(--color-white);
  position: relative;
  pointer-events: none;   /* no mouse interaction with the logos at all */
}
/* Each logo sits where Figma put it, as a share of the card — the same
   share at every size, so one set of numbers serves all four frames. */
.m-logos-grid__logo img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  max-width: none;
}

/* ── the arrival (old page: .hp-marquee[data-reveal] .hp-logo) ─────────
   The marquee is the trigger, not a thing that moves: one observer opens
   the whole row, copies parked off-screen included. The cards rise 44 and
   fade, stepped by their place in the set so a card and its copies open on
   the same beat. */
.m-logos-grid__marquee[data-reveal],
.m-logos-grid__marquee[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: none;
}
.m-logos-grid__marquee[data-reveal] .m-logos-grid__logo {
  --logo-in: 0ms;
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition: opacity    1.2s  var(--e-reveal) var(--logo-in),
              transform  1.2s  var(--e-reveal) var(--logo-in);
}
.m-logos-grid__marquee[data-reveal].is-in .m-logos-grid__logo { opacity: 1; transform: none; }
.m-logos-grid__logo:nth-child(7n+2) { --logo-in:  60ms; }
.m-logos-grid__logo:nth-child(7n+3) { --logo-in: 120ms; }
.m-logos-grid__logo:nth-child(7n+4) { --logo-in: 180ms; }
.m-logos-grid__logo:nth-child(7n+5) { --logo-in: 240ms; }
.m-logos-grid__logo:nth-child(7n+6) { --logo-in: 300ms; }
.m-logos-grid__logo:nth-child(7n+7) { --logo-in: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .m-logos-grid__marquee[data-reveal] .m-logos-grid__logo,
  .m-logos-grid__marquee[data-reveal].is-in .m-logos-grid__logo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 1024: two rows of 196 × 112 ──────────────────────────────────── */
@media (min-width: 1024px) {
  .m-logos-grid__grid {
    --card-w: 196px;                /* Figma: Logo 196 × 112 */
    --card-h: 112px;
    --row-gap: var(--spacing-grid-gutter);
    gap: var(--spacing-grid-gutter);   /* Figma: rows 128 apart, cards 112 tall */
  }
  .m-logos-grid__marquee--3 { display: none; }
  /* Figma leaves the window's left edge of row 1 (0–83) and the right edge
     of row 2 (941–1024) empty — the rows are one set long there. A loop
     has no ends, so here the set before / after shows in those strips. */
  .m-logos-grid__marquee--1 .m-logos-grid__row { margin-left: calc(50% - 1913px); }  /* 1024: x 83, less one set (1484) */
  .m-logos-grid__marquee--2 .m-logos-grid__row { margin-left: calc(50% - 1039px); }  /* 1024: x −527 */
}

/* ── 1440: 280 × 160 ─────────────────────────────────────────────── */
@media (min-width: 1392px) {
  .m-logos-grid__grid { --card-w: 280px; --card-h: 160px; }   /* Figma: Logo 280 × 160 */
  .m-logos-grid__marquee--1 .m-logos-grid__row { margin-left: calc(50% - 2984.5px); }  /* 1440: x −136.5, less one set (2128) */
  .m-logos-grid__marquee--2 .m-logos-grid__row { margin-left: calc(50% - 1247.5px); }  /* 1440: x −527.5 */
}

/* ── 1920: 336 × 192, rows 24 apart ───────────────────────────────── */
@media (min-width: 1920px) {
  .m-logos-grid__grid {
    --card-w: 336px;                /* Figma: Logo 336 × 192 */
    --card-h: 192px;
    gap: var(--space-24);           /* Figma: rows 216 apart, cards 192 tall */
  }
  .m-logos-grid__marquee--1 .m-logos-grid__row { margin-left: calc(50% - 3543px); }  /* 1920: x −7, less one set (2576) */
  .m-logos-grid__marquee--2 .m-logos-grid__row { margin-left: calc(50% - 1577px); }  /* 1920: x −617 */
}