/* =========================================================================
   #1 AI CLOUD PLATFORM — Figma component 5495:34725 (420 5508:36300 · 1024 5495:34888 · 1440 5495:34815 · 1920 5492:17571)
   A heading block, then the logo rows as the old page's marquee (home.css
   .hp-marquee / .hp-logo, driven by home2.js [data-marquee-row]).

   Figma's section has no side padding: the Header carries page-margin and
   the Logo Grid is centred and bleeds off both edges. So the section drops
   .l-section's inline padding and the head takes the gutter back, which
   lets the marquee rows span the whole window.

   The ground is Black 10 over White (#e6e6e7), not the Gray token — it is
   what all four frames fill the section with.
   ========================================================================= */

.s-platform {
  padding-inline: 0;
  align-items: stretch;   /* the ground is the section's l-section--* class */
}

/* ── Header ────────────────────────────────────────────────────────── */
.s-platform__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
  padding-inline: var(--gutter);
}
.s-platform__eyebrow { gap: var(--spacing-stack-xs); }
.s-platform__title { width: 100%; }
/* Figma fixes the heading's width from 1024 (it sets the line breaks):
   501.6 (1024) · 688.7 (1440) · 997.7 (1920) */
@media (min-width: 1024px) { .s-platform__title { width: 501.59px; max-width: 100%; } }
@media (min-width: 1392px) { .s-platform__title { width: 688.75px; } }
@media (min-width: 1920px) { .s-platform__title { width: 997.67px; } }

/* ── 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. */
.s-platform__logos {
  --card-w: 175px;                  /* Figma: Logo 175 × 100 at 420 */
  --card-h: 100px;
  --card-r: 2px;
  --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. */
.s-platform__marquee {
  --air: 48px;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--air);
  margin-block: calc(var(--air) * -1);
  pointer-events: none;
}
.s-platform__marquee--3 { display: block; }

.s-platform__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). */
.s-platform__marquee--1 .s-platform__row { margin-left: calc(50% - 1653px); }   /* 420: x −78, less one set (1365) */
.s-platform__marquee--2 .s-platform__row { margin-left: calc(50% - 754px); }    /* 420: x −544 */
.s-platform__marquee--3 .s-platform__row { margin-left: calc(50% - 1057px); }   /* 420: x −847 */

.s-platform__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. */
.s-platform__logo img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  max-width: none;
}
.s-platform__logo--google      { --x: 22.1429%; --y: 33.75%;  --w: 56.0133%; }
.s-platform__logo--decart      { --x: 20.3571%; --y: 38.125%; --w: 59.2131%; }
.s-platform__logo--mistral     { --x: 16.7857%; --y: 17.5%;   --w: 66.5476%; }
.s-platform__logo--cloudflare  { --x: 22.5%;    --y: 34.375%; --w: 55.0582%; }
.s-platform__logo--cohere      { --x: 20%;      --y: 20.625%; --w: 60.2765%; }
.s-platform__logo--runway      { --x: 20.7143%; --y: 36.875%; --w: 58.8432%; }
.s-platform__logo--jane-street { --x: 23.2143%; --y: 31.875%; --w: 53.508%;  }

/* ── 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. */
.s-platform__marquee[data-reveal],
.s-platform__marquee[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: none;
}
.s-platform__marquee[data-reveal] .s-platform__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);
}
.s-platform__marquee[data-reveal].is-in .s-platform__logo { opacity: 1; transform: none; }
.s-platform__logo:nth-child(7n+2) { --logo-in:  60ms; }
.s-platform__logo:nth-child(7n+3) { --logo-in: 120ms; }
.s-platform__logo:nth-child(7n+4) { --logo-in: 180ms; }
.s-platform__logo:nth-child(7n+5) { --logo-in: 240ms; }
.s-platform__logo:nth-child(7n+6) { --logo-in: 300ms; }
.s-platform__logo:nth-child(7n+7) { --logo-in: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .s-platform__marquee[data-reveal] .s-platform__logo,
  .s-platform__marquee[data-reveal].is-in .s-platform__logo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 1024: two rows of 196 × 112 ──────────────────────────────────── */
@media (min-width: 1024px) {
  .s-platform__eyebrow { gap: var(--spacing-inline-s); }
  .s-platform__logos {
    --card-w: 196px;                /* Figma: Logo 196 × 112 */
    --card-h: 112px;
    --card-r: 4.8px;                /* Figma: Background radius 4.8 */
    --row-gap: var(--spacing-grid-gutter);
    gap: var(--spacing-grid-gutter);   /* Figma: rows 128 apart, cards 112 tall */
  }
  .s-platform__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. */
  .s-platform__marquee--1 .s-platform__row { margin-left: calc(50% - 1913px); }  /* 1024: x 83, less one set (1484) */
  .s-platform__marquee--2 .s-platform__row { margin-left: calc(50% - 1039px); }  /* 1024: x −527 */
}

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

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