/* ============================================================
   Hero band — the size-varies card belt.

   Its own file, loaded after styles.css so it wins on specificity. The whole
   band is one <link> and one block of markup in index.html.

   What it says: the SAME shopper, three different garments, three different
   sizes. That is the product's actual argument — a size is a property of the
   item, not of the person — and it is the thing a static "M" badge can never
   express. The widget already says it in words: "Your size in this item".

   Why an interface and not an image of a person: interfaces can be reproduced
   exactly, bodies cannot — a depicted body implies a claim about fit that only
   a real render can make. Every mark here is real UI carrying real widget
   copy, so it makes no claim beyond being what it literally is.

   The motion is deliberately one transform on one compositor layer: constant
   speed, exact loop, cheap enough for an old laptop.
   ============================================================ */

.hero__cards {
  --card-w: clamp(190px, 17vw, 236px);
  --card-gap: clamp(14px, 1.6vw, 24px);

  /* Same columns as .hero__support, whose border-top is the rule the cards sit
     on, so the band and the sentence beneath read as one block. */
  grid-column: 8 / -1;
  grid-row: 1 / span 2;
  align-self: end;
  justify-self: stretch;
  width: 100%;
  /* The track is two sets shifting by exactly one set, so the window must not
     be wider than a set or the tail runs out mid-cycle and a blank sweeps
     through. Capping it makes that impossible at any viewport, not just the
     ones I tested. */
  max-width: calc((var(--card-w) + var(--card-gap)) * 3);
  overflow: hidden;
  position: relative;
  padding-bottom: var(--space-s);
  contain: layout paint;
}

.card-belt {
  display: flex;
  align-items: flex-end;
  /* Required, not cosmetic. Without it the flex track collapses to the
     container width, so `-50%` is half the WINDOW rather than half the cards
     and the loop jumps by hundreds of pixels every cycle. */
  width: max-content;
  animation: card-belt 30s linear infinite;
  /* Rasterise once, then only move the finished texture. Without this the
     browser repaints the cards on frames where the belt crosses a tile
     boundary, which reads as a stutter. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Spacing as margin-right, NOT flex `gap`: with gap the track measures
   6w + 5g while half of it is 3w + 2.5g, so the -50% loop would drift by half
   a gap every cycle and slowly walk out of register. As a margin each slot is
   exactly w + g and half the track is exactly half the cards. */
.fit-card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  margin-right: var(--card-gap);
  padding: var(--space-s) var(--space-s) calc(var(--space-s) + 2px);
  border: 1px solid var(--w-08, rgba(24, 24, 24, .14));
  background: transparent;
  text-align: center;
}

/* The garment this size belongs to — the whole point of the cycle. */
.fit-card__item {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w-50, rgba(24, 24, 24, .5));
  display: block;
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--w-08, rgba(24, 24, 24, .14));
  margin-bottom: var(--space-s);
}

/* These three mirror the widget's own .your / .big / .why. */
.fit-card__your {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--w-50, rgba(24, 24, 24, .5));
}
.fit-card__size {
  font-family: var(--font-display, inherit);
  font-size: clamp(40px, 4vw, 56px); font-weight: 400; line-height: 1.05;
  margin: 6px 0 4px; letter-spacing: -.03em;
}
.fit-card__why { font-size: 13px; line-height: 1.45; color: var(--w-50, rgba(24, 24, 24, .5)); }

@keyframes card-belt {
  /* translate3d with a matching Z term — a translateX keyframe would override
     the static translateZ(0) and drop the layer promotion exactly when the
     animation starts, which is when it is needed. */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .card-belt { animation: none; }
}

@media (max-width: 1080px) {
  .hero__cards {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: auto;
    justify-self: center;
    margin-top: var(--space-l);
  }
}