/* =========================================================================
   LOOP — Figma component set "Loop Big Type" 5495:35369
   420 5508:37092 · 1024 5495:35165 · 1440 5495:34961 · 1920 5492:17573
   (the live layout is the variant's "Frame 5"; the older blocks beside it
   are hidden in Figma)

   Intro (eyebrow, display heading, lede, one button); "Visuals" — the
   drawing (the AI loop over Mission Control, a Rive file) and the two
   blocks it illustrates, CoreWeave Forge and CoreWeave Infrastructure;
   "By the numbers" — two Black 5 cards of stat figures, each with a button.

   Phone: the drawing splits, the loop over the Forge block and Mission
   Control over the Infrastructure block. From 1024 it is one box on the
   left and the blocks a column on the right.

   ── Figma's tilt ──
   Every layer of text in all four frames — eyebrows, headings, bodies, the
   stat items — is rotated −0.15°. Auto-layout stacks the rotated boxes, and
   a rotated box is taller than its content by width × sin 0.15° (0.2618% of
   the width). Each tilted layer gets that extra below it, so the section
   keeps Figma's height; the slant itself is not drawn. A margin in % is a
   share of the parent's width, which for a full-width layer is its own:
   --s-loop-tilt. Layers narrower than their parent use their own width.
   Tilted text also keeps base.css's whole-pixel rounding, in the same
   margin. When the file is straightened, set --s-loop-tilt to 0 and drop
   the other tilt terms.
   ========================================================================= */

.s-loop {
  --s-loop-tilt: .2618%;
  --s-loop-title-tilt: .791px;                 /* 302 wide */
  gap: var(--spacing-section-gap);             /* "Frame 5": 40 · 48 · 64 · 80 */
}

/* text rounds to a whole pixel, as base.css means it to (its rule loses to
   the page's margin reset here), plus the tilt where Figma tilted it */
:where(.s-loop) :where(h2, h3, p)[class*="t-"] { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap); }
.s-loop .s-loop__eyebrow { gap: var(--spacing-inline-s); margin-bottom: var(--s-loop-tilt); }
.s-loop .s-loop__title { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap + var(--s-loop-title-tilt)); }
.s-loop .s-loop__lede  { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap + min(100%, 625.8px) * .002618); }
.s-loop .s-loop__h     { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap + var(--s-loop-tilt)); }
.s-loop .s-loop__body  { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap + min(100%, var(--s-loop-body-max, 100%)) * .002618); }
.s-loop .s-loop__card-h { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap + var(--s-loop-card-h-w) * .002618); }
.s-loop__stat { margin-bottom: var(--s-loop-tilt); }

/* ── intro ("Intro + Buttons") ─────────────────────────────────────── */
.s-loop__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
  width: 100%;
}
/* Figma breaks it by hand, after "CoreWeave"; below the 420 frame's width
   "Cloud Platform" is wider than the column on the narrowest phones, so it
   may wrap there — it fits, unwrapped, from about 340 up */
@media (min-width: 1024px) { .s-loop__title { white-space: nowrap; } }
.s-loop__lede { width: 100%; max-width: 625.8px; }   /* Figma: 625.8 wide in every frame */

/* ── "Visuals" ─────────────────────────────────────────────────────── */
/* Phone: box, graphic and column step aside and the four pieces stack:
   loop, Forge, Mission Control, Infrastructure (48 · 80 · 48 apart). */
.s-loop__visuals {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.s-loop__box, .s-loop__graphic, .s-loop__blocks { display: contents; }
.s-loop__piece--loop { order: 1; width: min(96.16%, 597.3px); }   /* 357.7 of 372; stops at its desktop size */
.s-loop__block--forge { order: 2; margin-top: var(--space-48); }
.s-loop__piece--mc { order: 3; width: min(80.16%, 497.8px); margin-top: var(--space-80); }   /* 298.2 of 372 */
.s-loop__block--mc { order: 4; margin-top: var(--space-48); }

.s-loop__block, .s-loop__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
  width: 100%;
}
.s-loop__h, .s-loop__body { width: 100%; }
.s-loop__h { text-wrap: balance; }
/* 420: Figma sets the Forge text in the graphic's inner width (357.7 of
   372), as wide as the loop above it */
.s-loop__block--forge .s-loop__text { width: 96.16%; }             /* Figma's breaks on the block heads read as balanced */

/* ── the drawing: two windows onto one Rive artboard ──
   The artboard is 900 × 788. In it the loop (with its labels) spans x 29 –
   870.5, y 36 – 364, and Mission Control x 98 – 801.5, y 355.5 – 763.5.
   Each window has Figma's box for its half ("Loop" 597.3 × 250.7, "Mission
   Control Diagram" 497.8 × 290.3); the artboard is scaled so the half is
   exactly as wide as Figma's and centred in the box's height. The two
   halves overlap by a few pixels at Mission Control's top point, so each
   window is clipped to its own half: the loop's has a notch where that
   point would poke in, Mission Control's is its rhombus. */
.s-loop__piece { position: relative; }
.s-loop__piece--loop { aspect-ratio: 597.3 / 250.7; }
.s-loop__piece--mc { aspect-ratio: 497.8 / 290.3; }
/* the clip is on an inner box: the reveal (data-fade-up) writes an inline
   clip-path on the piece itself */
.s-loop__clip { position: absolute; inset: 0; }
.s-loop__piece--loop .s-loop__clip {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 57% 100%, 50.09% 90%, 43.2% 100%, 0 100%);
}
.s-loop__piece--mc .s-loop__clip {
  clip-path: polygon(50% -2%, 102% 50%, 50% 102%, -2% 50%);
}
.s-loop__art {
  position: absolute;
  top: 0;
  aspect-ratio: 900 / 788;
}
.s-loop__piece--loop .s-loop__art {
  left: -3.446%;                               /* 29 / 841.5 */
  width: 106.952%;                             /* 900 / 841.5 */
  margin-top: -2.781%;                         /* centre y 200 of the artboard on the box's middle */
}
.s-loop__piece--mc .s-loop__art {
  left: -13.930%;                              /* 98 / 703.5 */
  width: 127.932%;                             /* 900 / 703.5 */
  margin-top: -50.372%;                        /* centre y 559.5 of the artboard on the box's middle */
}
.s-loop__still,
.s-loop__rive {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;                             /* styles.css caps img at 100% */
  height: 100%;
}
/* the script has taken over: the finished picture goes, the canvas draws */
.s-loop__piece.is-rive .s-loop__still { visibility: hidden; }
.s-loop__piece:not(.is-rive) .s-loop__rive { display: none; }

/* ── "By the numbers" ──────────────────────────────────────────────── */
.s-loop__numbers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);                 /* 24 · 24 · 40 · 48 */
  width: 100%;
}
.s-loop__cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-grid-gutter);
  width: 100%;
}
.s-loop__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
  padding: var(--space-40);
  border-radius: 4px;
  background: var(--color-black-5);
  --s-loop-card-h-w: 192.1px;                  /* Figma's width of the heading, for its tilt */
}
.s-loop__card--infra { --s-loop-card-h-w: 280.2px; }
.s-loop__card-h { white-space: nowrap; }       /* broken by hand, after "CoreWeave" */
.s-loop__stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-l);
  width: calc(100% + var(--space-40));         /* 420: Figma lets the Infrastructure figures run into the
                                                  card's right padding (345 wide), so they keep one line */
  margin-right: calc(-1 * var(--space-40));
}
.s-loop__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-s);
}

/* ── 1024 up: the drawing's box on the left, the blocks on the right ── */
@media (min-width: 1024px) {
  .s-loop { --s-loop-title-tilt: 1.186px; }   /* 453 wide */
  /* Figma sets the 1024/1440/1920 heading in hard numbers, not the style */
  .s-loop__title { font-size: 66px; line-height: 70px; }

  .s-loop__visuals {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-grid-gutter);
  }
  /* "Platform": an empty box (its line is switched off in Figma) holding
     "graphic" — 357.7 of 408 at 1024, 597.3 of 681.3 from 1440: the same
     share, so the margins are shares of the box. */
  .s-loop__box { display: block; flex: 1 1 0; min-width: 0; }
  .s-loop__graphic { display: block; margin: 7.63% 6.17%; }
  .s-loop__piece--loop { width: 100%; }
  .s-loop__piece--mc { width: 83.34%; margin: 6.568% 0 0 8.07%; }   /* 497.8 at 48.2, top at 289.9 of 597.3 */
  .s-loop__block--forge, .s-loop__block--mc { margin-top: 0; }
  .s-loop__block--forge .s-loop__text { width: 100%; }

  .s-loop__blocks {
    display: flex;
    flex-direction: column;
    gap: 124px;                                /* Figma hard-codes it (1024 and 1440) */
    flex: 1 1 0;
    min-width: 0;
  }

  .s-loop__cards { flex-direction: row; }
  .s-loop__card { flex: 1 1 0; min-width: 0; }
  .s-loop__stats { width: 100%; margin-right: 0; }
  /* one line each from 1024: Figma lets "faster reinforcement learning from
     production feedback" run 25px into the card's padding at 1024 */
  .s-loop__copy { white-space: nowrap; }
}

/* ── 1392 up (the 1440 frame) ──────────────────────────────────────── */
@media (min-width: 1392px) {
  .s-loop { --s-loop-title-tilt: 1.545px; }    /* 590 wide */
  .s-loop__title { font-size: 86px; line-height: 90px; }

  .s-loop__visuals { gap: 55px; }              /* Figma hard-codes it */
  .s-loop__box { flex: 0 0 681.3px; }          /* fixed in the 1440 and 1920 frames */

  .s-loop__card { padding: 60px; --s-loop-card-h-w: 342.5px; }   /* Figma: 60, no variable */
  .s-loop__card--infra { --s-loop-card-h-w: 380.5px; }
}

/* ── 1920 up ───────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .s-loop { --s-loop-title-tilt: 1.869px; }   /* 714 wide */
  .s-loop__title { font-size: 104px; line-height: 100px; }

  .s-loop__blocks { gap: var(--space-80); }
  /* the block heads are Heading/Card Large here (Heading/Item's twin below) */
  .s-loop__h {
    font-size: var(--heading-card-large-font-size);
    line-height: var(--heading-card-large-line-height);
  }
  .s-loop__block--forge .s-loop__h { max-width: 656px; }
  .s-loop__body { max-width: 586px; --s-loop-body-max: 586px; }

  .s-loop__card { --s-loop-card-h-w: 477.7px; }
  .s-loop__card--infra { --s-loop-card-h-w: 522.7px; }
  /* Figma fixes this heading's box at 107.9 tall (3.4 more than its two
     lines), which sets the height of the row of cards */
  .s-loop__card--infra .s-loop__card-h { min-height: 107.9px; }
}