/* ==========================================================================
   What your team can handle — Figma frame-y 5694→6569 (875 tall)
   ========================================================================== */

.gw-team {
  position: relative;
  background: var(--gw-white);
  overflow: clip;
  container-type: inline-size;
}

.gw-team__stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  height: calc(875 * var(--u));
  --u: min(1px, calc(100cqw / 1440));
}
.gw-team__stage > * { position: absolute; }

/* ---- turf ground (two overlaid crops, as in the comp) ------------------- */
.gw-team__turf { object-fit: cover; z-index: 0; pointer-events: none; }
.gw-team__turf--a { top: 0;                   left: calc(-11 * var(--u)); width: calc(1492 * var(--u)); height: calc(872 * var(--u)); }
.gw-team__turf--b { top: calc(63 * var(--u)); left: calc(-4 * var(--u));  width: calc(1446 * var(--u)); height: calc(811 * var(--u)); }

/* ---- intro --------------------------------------------------------------- */
.gw-team__intro {
  top: calc(102 * var(--u)); left: calc(194 * var(--u));
  width: calc(1161 * var(--u));
  z-index: 2;
}
.gw-team__title {
  display: flex; flex-direction: column;
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: calc(36 * var(--u));
  line-height: calc(50.4 * var(--u));
}
.gw-team__title-a { color: var(--gw-black); }
.gw-team__title-b { color: var(--gw-violet); }
.gw-team__sub {
  margin-top: calc(32 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(28.6 * var(--u));
  color: var(--gw-black);
}

/* ---- marquee rows -------------------------------------------------------- */
.gw-team__row {
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(1271 * var(--u));
  height: calc(78 * var(--u));
  z-index: 3;
  /* the ball is taller than the row and must not be clipped by it */
  overflow: visible;
  /* the ball's geometry, in row-local comp units: the same offset in every row,
     which is what steps the three of them across the comp's diagonal */
  --dum-x: 1237;
  /* 43, not the row's own 39 midline: Figma puts BG-GOLF-DUM 5 at rel y 426
     against row 2's 469, i.e. 43 of the ball above the row's top edge */
  --dum-y: 43;
  --dum-rx: 82;
  --dum-ry: 86;

  /* The cut follows the INNER circle, not the image's edge, so a pill runs on
     under the outer rings before it disappears. Measured off the artwork: rings
     sit at r = 40/43/46 (the inner circle, drawn three times by the overlapping
     copies), then 55/58, then 69 — and the ring centre is 5 left and 4 up of the
     image's own box centre. */
  --ring-r: 43;
  --ring-x: calc(var(--dum-x) - 5);
  --ring-y: calc(var(--dum-y) - 4);
}

/* The masked window. Two layers ADDED — their union is what stays visible:
     1. the inner circle, filled
     2. everything up to the circle's centre, plus a soft entry at the left
   So a pill runs right across the circle and is cut on its FAR edge: the leading
   edge takes the curve of the circle's right arc, reaching furthest at the pill's
   middle and least at its top and bottom. Never moved or scaled, and the track
   past the circle reads as empty. */
.gw-team__clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-mask-image:
    radial-gradient(circle calc(var(--ring-r) * var(--u))
      at calc(var(--ring-x) * var(--u)) calc(var(--ring-y) * var(--u)),
      #000 90%, transparent 100%),
    linear-gradient(90deg,
      transparent 0,
      #000 calc(90 * var(--u)),
      #000 calc(var(--ring-x) * var(--u)),
      transparent calc(var(--ring-x) * var(--u)));
          mask-image:
    radial-gradient(circle calc(var(--ring-r) * var(--u))
      at calc(var(--ring-x) * var(--u)) calc(var(--ring-y) * var(--u)),
      #000 90%, transparent 100%),
    linear-gradient(90deg,
      transparent 0,
      #000 calc(90 * var(--u)),
      #000 calc(var(--ring-x) * var(--u)),
      transparent calc(var(--ring-x) * var(--u)));
  -webkit-mask-composite: source-over;
          mask-composite: add;
}

.gw-team__track {
  display: flex;
  gap: calc(8 * var(--u));
  width: max-content;
  will-change: transform;
}

/* The ball sits OVER the pills so its rings keep their border where a pill
   crosses — the pill passes beneath the ring lines rather than painting them
   out. That only works because the export is keyed to black + alpha: it puts
   the faint lines down and nothing else, so the pill's own white stays pure
   white everywhere the lines are not. (The original opaque export needed a
   blend mode here, and that is what used to tint the pill grey.) */
.gw-team__dum {
  position: absolute;
  left: calc((var(--dum-x) - var(--dum-rx)) * var(--u));
  top: calc((var(--dum-y) - var(--dum-ry)) * var(--u));
  width: calc((var(--dum-rx) * 2) * var(--u));
  height: calc((var(--dum-ry) * 2) * var(--u));
  pointer-events: none;
  z-index: 2;
}

.gw-team__pill {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(78 * var(--u));
  padding: calc(24 * var(--u));
  border: 1px solid var(--gw-violet-200);
  border-radius: calc(40 * var(--u));
  background: var(--gw-white);
  white-space: nowrap;
  font-size: calc(20 * var(--u));
  line-height: calc(24.2 * var(--u));
  color: var(--gw-black);
  transform-origin: center bottom;
}
.gw-team__pill-icon {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  flex: none;
  color: var(--gw-pink);
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .gw-team__stage { height: auto; --u: 1px; padding: 56px 0 64px; }
  .gw-team__stage > * { position: static; }
  .gw-team__turf, .gw-team__dum { display: none; }
  .gw-team__intro { width: auto; margin-inline: var(--gw-gutter); }
  .gw-team__title { font-size: 30px; line-height: 40px; }
  .gw-team__sub { font-size: 19px; line-height: 26px; }
  .gw-team__row { width: 100%; margin-top: 20px; overflow: hidden; }
  /* no ball to fall into once stacked, so the window is just the row */
  .gw-team__clip {
    position: static;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  .gw-team__row:first-of-type { margin-top: 36px; }
  .gw-team__pill { font-size: 16px; line-height: 22px; height: 60px; padding: 16px 20px; }
  .gw-team__pill-icon { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
  .gw-team__title { font-size: 24px; line-height: 32px; }
}


/* ==========================================================================
   Motion — three staggered marquees, all running LEFT TO RIGHT.
   Two identical cycles per track, so translating by exactly one cycle (50%)
   returns the same picture: the loop is seamless and the stream never ends.
   ========================================================================== */

@keyframes gw-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.gw-motion .gw-team__track {
  animation: gw-marquee var(--dur, 46s) linear infinite;
}
/* the stream never stops — no hover pause */