/* ============================================================================
   Trader payouts — the proof marquee.

   Sits between the markets band and the white "why Atlas" band, which is where
   Lucas asked for it: after someone has picked a market and before we start
   making claims about ourselves, they see other people getting paid.

   The reference is fundedelite.com's Discord payout rail. Mechanically it is
   the same idea (duplicated flex track, translate 0 to -50%, linear, infinite)
   because that is simply how a seamless marquee works. Everything visual is
   Atlas: our glass card, our masked gradient hairline, our lime for the money,
   our radii and motion tokens. Their card is a flat rgba(255,255,255,.06) box
   with a solid 1px border, which on our palette would look like a different
   site had been pasted in.

   Three things their version gets wrong and this one does not:
     - it never pauses, so you cannot actually click a card you are reading
     - it runs at full speed under prefers-reduced-motion
     - the rail just clips at the container edge instead of fading out
   ========================================================================= */

.afxpo {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 120px 0 128px;
  background: var(--af-black);
  overflow: hidden;
}

/* the same faint vertical light the markets band uses, so the two dark bands
   read as one continuous surface rather than two stacked blocks */
.afxpo__glow {
  position: absolute; left: 50%; top: -10%;
  width: 1100px; height: 520px; margin-left: -550px;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(124,177,172,.10) 0%, rgba(124,177,172,0) 100%);
  pointer-events: none;
}

/* ---- heading ----------------------------------------------------------- */
.afxpo__head {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: var(--page); margin: 0 auto 56px; padding: 0 var(--gutter);
  text-align: center;
}
/* .afxpo__eyebrow is styled by assets/atlas-eyebrow.css, like every other
   eyebrow on the site. It is named there, not here. */

.afxpo__h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  color: var(--af-white);
}
/* second line drops to 40% so the pair reads as one sentence with emphasis on
   the first half, matching the markets and final bands */
.afxpo__h2 span { color: var(--w-40); }

.afxpo__sub {
  margin: 0; max-width: 560px;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; color: var(--w-60);
}

/* ---- the rail ---------------------------------------------------------- */
/* The mask is why this looks finished rather than cropped: cards dissolve at
   both edges instead of being guillotined by an overflow boundary. 140px of
   fade at 1512, tightening on small screens where there is less room. */
.afxpo__rail {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}

.afxpo__track {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: max-content;
  will-change: transform;
  animation: afxpo-marquee 64s linear infinite;
}

/* PAUSE ON HOVER. The cards are links; a rail that never stops is a rail you
   cannot use. Also pauses on keyboard focus, or tabbing to a card would drag
   the focus ring off-screen. */
.afxpo__rail:hover .afxpo__track,
.afxpo__rail:focus-within .afxpo__track { animation-play-state: paused; }

@keyframes afxpo-marquee {
  from { transform: translate3d(0, 0, 0); }
  /* -50% and not -100%: the track holds the set twice, so half a loop is one
     full set and the seam lands exactly where it started */
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---- card -------------------------------------------------------------- */
.afxpo-card {
  position: relative; isolation: isolate;
  box-sizing: border-box;
  flex: none; width: 328px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 13px 13px 18px;
  border-radius: var(--r-24);
  background: var(--w-06);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  text-decoration: none;
  transition: transform var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out);
}
/* the signature masked gradient hairline. atlas-tokens.css is explicit that
   flattening --af-hair to a solid colour is the single most visible way to
   lose the look, so it is a masked pseudo-element here, not a border. */
.afxpo-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; opacity: .14; background: var(--af-hair);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.afxpo-card:hover { transform: translateY(-4px); background: var(--w-08); }
.afxpo-card:hover::before { opacity: .28; }

/* screenshot well. Fixed aspect so a tall or short screenshot cannot resize
   the card and break the marquee's -50% seam. */
.afxpo-card__shot {
  position: relative; overflow: hidden;
  border-radius: var(--r-16);
  background: rgba(0,0,0,.35);
  aspect-ratio: 302 / 196;
}
.afxpo-card__shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}

/* ---- action row -------------------------------------------------------- */
.afxpo-card__row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 3px;
}
.afxpo-btn {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 36px; border: 0; padding: 0;
  border-radius: var(--r-12);
  background: var(--w-06); color: var(--af-white);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast) var(--e-out);
}
.afxpo-btn:hover { background: var(--w-14); }
.afxpo-btn svg { width: 16px; height: 16px; display: block; }
/* Discord's own brand colour on hover, so the affordance is unmistakable */
.afxpo-btn--discord:hover { background: #5865F2; }

.afxpo-card__spacer { flex: 1 1 auto; }

/* ---- identity + amount ------------------------------------------------- */
.afxpo-card__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; padding: 0 3px;
}
.afxpo-card__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.afxpo-card__name {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 20px; letter-spacing: -.32px;
  color: var(--af-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.afxpo-card__meta {
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 11px; line-height: 14px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--w-40);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the money is the point of the whole band, so it gets the brand accent */
.afxpo-card__amount {
  flex: none;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 26px; line-height: 28px; letter-spacing: -.78px;
  color: var(--af-lime);
  font-variant-numeric: tabular-nums;
}

/* ---- lightbox ---------------------------------------------------------- */
.afxpo-lb {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--e-out), visibility var(--t-base);
}
.afxpo-lb.is-open { opacity: 1; visibility: visible; }
.afxpo-lb img {
  max-width: min(1100px, 92vw); max-height: 86vh;
  border-radius: var(--r-16); display: block;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.afxpo-lb__close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-12);
  background: var(--w-10); color: var(--af-white); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.afxpo-lb__close:hover { background: var(--w-25); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .afxpo { padding: 96px 0 100px; }
  .afxpo__h2 { font-size: 60px; line-height: 60px; letter-spacing: -1.8px; }
  .afxpo__rail {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  }
}
@media (max-width: 760px) {
  .afxpo { padding: 72px 0 76px; }
  .afxpo__head { margin-bottom: 36px; }
  .afxpo__h2 { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .afxpo__sub { font-size: 16px; line-height: 24px; }
  .afxpo-card { width: 274px; }
  .afxpo__rail {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
}

/* ---- reduced motion ----------------------------------------------------
   atlas-tokens.css globally forces animation-duration to .01ms under reduced
   motion. For a marquee that is WORSE than not animating: the track would
   snap to -50% instantly and sit there, hiding the first half of the cards.
   So the animation is removed outright and the rail becomes a normal
   horizontal scroller the reader drives themselves. The content stays fully
   reachable, which is the actual goal.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .afxpo__track {
    animation: none !important;
    transform: none !important;
  }
  .afxpo__rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .afxpo-card { scroll-snap-align: center; }
  .afxpo-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Visually-hidden label. The marquee's own markup uses .afxm-vh on every
   "Enlarge X's payout screenshot" and "Read X's payout in Discord" label, so
   each card is announced once and properly to a screen reader.

   THE CLASS WAS DEFINED IN atlas-markets.css AND NOWHERE ELSE. That worked
   everywhere it had been used, because the marquee only ever shipped on the
   homepage, directly under the markets band, so the rule happened to be on
   the page. /start-access is the first page to use the marquee WITHOUT the
   markets band, and the labels rendered as visible text sprawling across
   every card - two paragraphs of alt copy over the payout screenshots.

   Defined here now so the component owns the class its own markup depends on.
   Byte-identical to the atlas-markets.css rule; leaving both is deliberate,
   since deleting the other one would break the markets band for no gain.
   Found on the preview build, 5 Aug 2026.
   ------------------------------------------------------------------------ */
.afxm-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}