/* ============================================================================
   Stories v2 (705:463416) — the interaction layer. Goes on last, after the
   static build measured correct at 1512, and changes nothing at rest.

   Written against assets/atlas-comm-motion.css, which is the house precedent
   for this file. Same rules, same order, same reasoning:

     - every duration and curve is a token from atlas-tokens.css. There is not
       a hand-written millisecond or bezier below.
     - transform and opacity only, so nothing here can move a box.
     - hover is behind a real-pointer query, or it sticks after a tap.
     - prefers-reduced-motion is already neutralised globally in
       atlas-tokens.css; the block at the foot of this file is the extra guard
       the scroll reveal needs, because a duration override does not stop a
       scroll-driven animation.
     - the hero paints complete on load. Nothing above the fold is hidden
       pending a scroll, and the one reveal on the page degrades to plain
       visible content with no JavaScript and no @supports match.

   ONE PRESS VOCABULARY. The site already presses at transform: scale(.97) /
   var(--t-instant) on every button in atlas-chrome.css, atlas-hero.css and
   atlas-footer.css. Everything this file adds a press to uses the same figure
   rather than inventing a second one.

   RESTATED TRANSITIONS. CSS cannot append to a transition list, so where a
   band sheet already declares one this file re-states it verbatim and adds
   `transform` on the end. Every restatement below is a character-for-character
   copy of the original list — check it against the named sheet before editing.

   Already covered by the shared furniture, and deliberately not repeated here:
     .afx-bar__pill              atlas-chrome.css   hover (gated) + press
     .afx-nav__globe/login/cta   atlas-chrome.css   hover (gated) + press
     .afx-btn-lime/.afx-btn-ghost atlas-hero.css    hover (gated) + press,
                                 which is both hero CTAs and, via
                                 .afxs-cta__lime/.afxs-cta__ghost, both final
                                 CTAs — so band 6 needs nothing.
     .afxft__cta / .afxft__soc   atlas-footer.css   hover (gated) + press
   FOCUS. `.afx :focus-visible` in atlas-chrome.css puts a 2px lime ring on
   every control inside body.afx, and atlas-st2-grid.css, atlas-st2-spot.css
   and atlas-st2-cta.css already override it where the band needs a different
   colour or offset. This file adds NO ring: a second one would only compete.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   BAND 1 — .afx-bar. Nothing. The pill is shared chrome and already presses.
   ------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
   BAND 2 — .afxs-hero, and the nav that floats over it.

   The nav links, the brand mark and the language menu items are the three
   clickable things in the chrome with no press state. The nav links keep
   their growing underline; the press is a separate channel so the two do not
   fight over the same property.
   ------------------------------------------------------------------------ */

/* restates atlas-chrome.css:160 */
.afx-nav__link {
  transition: background-size var(--t-base) var(--e-out),
              opacity var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afx-nav__link:active { transform: scale(.97); }

/* the wordmark is a real link to /. It had no acknowledgement at all. */
.afx-nav__brand { transition: transform var(--t-instant) var(--e-out); }
.afx-nav__brand:active { transform: scale(.98); }

/* restates atlas-chrome.css:317 */
.afx-lang__link {
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afx-lang__link:active { transform: scale(.97); }

/* 705:463464 — "All verifiable" in the live payout card. Its chevron already
   nudges on hover (atlas-hero.css:129); only the press was missing. */
.afx-payouts__verifiable { transition: transform var(--t-instant) var(--e-out); }
.afx-payouts__verifiable:active { transform: scale(.97); }


/* ---------------------------------------------------------------------------
   BAND 3 — .afxs-grid. Five filter pills, nine cards, nine verify links.
   ------------------------------------------------------------------------ */

/* 705:504193..197 — the pills. atlas-st2-grid.css:308 raises them to full
   opacity on :hover with no pointer query, so on a touch device the pill you
   last tapped stays lit. Neutralised for coarse pointers rather than edited
   in place; :focus-visible and the pressed pill both keep their full opacity,
   which is why they are excluded rather than blanket-reset. */
@media (hover: none), (pointer: coarse) {
  .afxs-grid__pill:hover:not(:focus-visible):not([aria-pressed='true']) { opacity: .7; }
}
/* restates atlas-st2-grid.css:292 */
.afxs-grid__pill {
  transition: opacity var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afxs-grid__pill:active { transform: scale(.97); }

/* 705:504248 — "Verify this payout", x9. Same treatment: the background lift
   at atlas-st2-grid.css:567 is ungated, so it is undone for coarse pointers
   at the value the band sheet sets at rest. */
@media (hover: none), (pointer: coarse) {
  .afxs-gcard__verify:hover:not(:focus-visible) { background: rgba(255,255,255,.05); }
}
/* restates atlas-st2-grid.css:565 */
.afxs-gcard__verify {
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afxs-gcard__verify:active { transform: scale(.97); }

/* the chevron nudge is the site's existing "forward" gesture — .afx-btn-lime,
   .afx-payouts__verifiable and .afxft__cta all do exactly this, at exactly
   this distance. Reused rather than re-invented. */
.afxs-gcard__chev img { transition: transform var(--t-fast) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .afxs-gcard__verify:hover .afxs-gcard__chev img { transform: translateX(2px); }
}

/* ---- the card stagger --------------------------------------------------
   Nine cards is too many to fade in as one block and too many to stagger one
   by one — a nine-step ramp has the last card arriving long after the reader
   got there. So the stagger is POSITIONAL: the three cards in a column share
   a range, and the three columns are offset from each other. Every card is a
   settle of 10px, well inside the 8–16 the house allows, and it fires once
   because a view() timeline has no concept of firing twice.

   No JavaScript. If @supports does not match, or the pointer is on the phone
   rail, or the reader asked for reduced motion, the cards are simply visible
   — the base stylesheet never hides them, so there is no state to rescue.

   WHY .afxs-grid IS RE-DECLARED HERE. atlas-st2-grid.css:60 gives the band
   `overflow: hidden` to clip six decorative layers. `overflow: hidden` makes
   the band a scroll container, and a view() timeline resolves against the
   NEAREST scroll container — which would be the band itself, where every card
   is permanently in view and the reveal is dead code. `overflow: clip` clips
   identically without creating a scroll container. Swapping it alone would
   also drop the block formatting context the band relies on to contain
   .afxs-grid__inner's 120px margins, which would move the band, so
   `display: flow-root` puts the BFC back explicitly. Net layout: identical —
   verified by measuring every band offset with this sheet on and off. It is
   scoped inside the @supports so no browser that lacks `overflow: clip` can
   ever see it. Do not lift either declaration out of this block.

   The card carries the animation, so the animation owns `transform` on the
   card for good (fill: both) and a :hover lift on the same element would be
   overridden and silently do nothing. That is fine, and correct here: unlike
   the Community cards in atlas-comm-motion.css, an .afxs-gcard is not itself
   a link — the only clickable thing on it is the verify button — so lifting
   the whole card would advertise a click that does not exist. The hover
   affordance sits on the button instead. This is the one place this file
   diverges from the Community precedent, and that is why.
   ---------------------------------------------------------------------- */
@keyframes afxst2-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
    .afxs-grid { overflow: clip; display: flow-root; }

    .afxs-gcard {
      animation-name: afxst2-card-in;
      animation-duration: auto;
      /* --e-inout, not the --e-out this file uses everywhere else. Progress
         here comes from the scroll position, not a clock — this is a thing
         moving A to B on screen, which is exactly what --e-inout is for.
         Measured with --e-out the card was 90% opaque within a tenth of its
         entry, i.e. an animation nobody could see. */
      animation-timing-function: var(--e-inout);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 4% entry 44%;
    }
    /* the three columns, 6% of the entry range apart */
    .afxs-gcard:nth-child(3n + 2) { animation-range: entry 10% entry 50%; }
    .afxs-gcard:nth-child(3n)     { animation-range: entry 16% entry 56%; }
  }
}


/* ---------------------------------------------------------------------------
   BAND 4 — .afxs-spot, the light band. One clickable thing on it.
   ------------------------------------------------------------------------ */

/* 705:524619 — atlas-st2-spot.css:279 fades it to .75 on :hover with no
   pointer query. Undone for coarse pointers at its resting value. */
@media (hover: none), (pointer: coarse) {
  .afxs-spot__verify:hover:not(:focus-visible) { opacity: 1; }
}
/* restates atlas-st2-spot.css:277 */
.afxs-spot__verify {
  transition: opacity var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afxs-spot__verify:active { transform: scale(.97); }

/* the same 2px nudge. Both halves of the double chevron are pseudo-elements
   at different offsets, so both move, together. */
.afxs-spot__chev::before,
.afxs-spot__chev::after { transition: transform var(--t-fast) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .afxs-spot__verify:hover .afxs-spot__chev::before,
  .afxs-spot__verify:hover .afxs-spot__chev::after { transform: translateX(2px); }
}


/* ---------------------------------------------------------------------------
   BAND 5 — .afxs-nums. Nothing, on purpose. Four figures and four hairlines,
   nothing clickable, and a counting or revealing number strip on a page whose
   whole argument is "these are real, go and check them" would be the one
   animation a reader notices. Left static.

   BAND 6 — .afxs-cta. Nothing to add: both buttons are .afx-btn-lime and
   .afx-btn-ghost, which press and hover already, and atlas-st2-cta.css:269
   supplies the focus ring at the wider offset this band needs.
   ------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
   FOOTER — .afxft. The two link families and the wordmark had hover but no
   press. Press goes on transform so the existing opacity hover is untouched.
   ------------------------------------------------------------------------ */

/* restates atlas-footer.css:127 */
.afxft__link {
  transition: opacity var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afxft__link:active { transform: scale(.97); }

/* restates atlas-footer.css:183 */
.afxft__baselink {
  transition: opacity var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afxft__baselink:active { transform: scale(.97); }

/* 705:77992 — the wordmark link. No class in the markup; it is the only <a>
   in .afxft__brandtop, which is why it is selected structurally. It is a flex
   item of that column, so it is already blockified and takes a transform; no
   display is set here. */
.afxft__brandtop a { transition: transform var(--t-instant) var(--e-out); }
.afxft__brandtop a:active { transform: scale(.98); }


/* ---------------------------------------------------------------------------
   REDUCED MOTION.

   atlas-tokens.css already flattens every transition and animation DURATION
   globally, which handles every press and hover above. It does not handle a
   scroll-driven animation, whose progress comes from the scroller and not
   from a clock — so the reveal is switched off by name, and the cards are
   pinned to their finished state. `opacity: 1` and `transform: none` are the
   values the cards already hold at rest, so this changes nothing at rest.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .afxs-gcard {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}