/* ============================================================================
   Payouts / Rewards — interaction layer. Loaded LAST, after every band
   stylesheet, and added only once the static build measured zero delta
   against the Figma nodes at 1512 and 393.

   Motion here answers questions the user just asked — did my click register,
   is this clickable, where am I. Nothing is decorative and nothing moves on
   its own. Durations and easings are the tokens in atlas-tokens.css; no
   hand-written number appears in this file.

   Only transform and opacity are animated, plus cheap paint properties
   (colour, background-color, box-shadow). Nothing animates width, height,
   top, left, margin or padding.
   ========================================================================= */

/* ---- 1. press — the highest-value state on the page --------------------- */
.po2-hero__cta,
.po2-steps__cta,
.po2-close__cta {
  transition: transform var(--t-instant) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
.po2-hero__cta:active,
.po2-steps__cta:active,
.po2-close__cta:active { transform: scale(.97); }

/* shared chrome inside this page's bands — press only, no lift */
.po2-hero .afx-bar__pill:active,
.po2-hero .afx-nav__cta:active,
.po2-hero .afx-nav__login:active { transform: scale(.98); }

/* ---- 2. hover — behind a capability query so a tap never leaves it stuck - */
@media (hover: hover) and (pointer: fine) {
  .po2-hero__cta:hover,
  .po2-steps__cta:hover,
  .po2-close__cta:hover {
    /* lime stays lime; the lift is the affordance, not a colour change */
    box-shadow: 0 6px 18px rgba(5,63,59,.22);
  }

  /* the step art lifts a couple of px — the row is not a link, so this only
     signals that the strip is interactive where it becomes a carousel. */
  .po2-steps__row:hover .po2-steps__art { transform: translateY(-2px); }

  .po2-transp__card:hover { transform: translateY(-3px); }
}
.po2-steps__art,
.po2-transp__card { transition: transform var(--t-base) var(--e-out); }

/* ---- 3. focus — visible on every control, never removed ---------------- */
.po2-hero__cta:focus-visible,
.po2-steps__cta:focus-visible,
.po2-close__cta:focus-visible {
  outline: 2px solid var(--af-lime);
  outline-offset: 3px;
}
.po2-steps__rows:focus-visible,
.po2-transp__cards:focus-visible {
  outline: 2px solid var(--af-teal);
  outline-offset: 2px;
}

/* ---- 4. the 393 carousels scroll smoothly when nudged by the keyboard --- */
@media (max-width: 900px) {
  .po2-steps__rows,
  .po2-transp__cards { scroll-behavior: smooth; }
}

/* ---- 5. reduced motion — honour it, and never hide content behind it ---- */
/* Nothing on this page is revealed by a scroll animation, so there is no
   content to restore here: switching everything off is safe and complete. */
@media (prefers-reduced-motion: reduce) {
  .po2-hero__cta,
  .po2-steps__cta,
  .po2-close__cta,
  .po2-steps__art,
  .po2-transp__card { transition: none !important; }

  .po2-hero__cta:active,
  .po2-steps__cta:active,
  .po2-close__cta:active,
  .po2-steps__row:hover .po2-steps__art,
  .po2-transp__card:hover { transform: none !important; }

  .po2-steps__rows,
  .po2-transp__cards { scroll-behavior: auto; }
}