/* ============================================================================
   Community — the interaction layer. Goes on last, after the static build
   measured correct, and changes nothing at rest.

   Every duration and curve is a token from atlas-tokens.css; there is not a
   hand-written millisecond in this file. 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, and nothing on this page is hidden pending a scroll —
   there are no scroll reveals, because every band is content the reader needs
   whether or not JavaScript ran.

   The shared furniture (.afx-bar, .afx-nav, .afx-btn-lime, .afx-btn-ghost,
   .afxt*, .afxf*, .afxft*) already carries its own press and hover states in
   atlas-chrome.css / atlas-hero.css / atlas-stories.css / atlas-final.css /
   atlas-footer.css. This file only covers what the Community bands add.
   ========================================================================= */

/* ---- 774:60494 etc — the four chat cards. They are the one decorative
        element on the page, so they get the lightest possible acknowledgement:
        a 2px lift, and only where there is a real cursor to lift under. ---- */
.afxch__msg {
  transition: transform var(--t-base) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .afxch__msg:hover { transform: translateY(-2px); }
}

/* ---- 774:101224 etc — the six cards. Same 2px, plus the hairline coming up
        from .13 to .2. The border lives on a pseudo-element already, so this
        is an opacity change on a composited layer, not a repaint of the card. */
.afxw__card { transition: transform var(--t-base) var(--e-out); }
.afxw__card::after { transition: opacity var(--t-fast) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .afxw__card:hover { transform: translateY(-2px); }
  .afxw__card:hover::after { opacity: .2; }
}

/* the icon plate reacts with the card rather than on its own, so the card
   reads as one object instead of two things moving at different speeds. */
.afxw__plate { transition: transform var(--t-base) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .afxw__card:hover .afxw__plate { transform: scale(1.04); }
}

/* ---- the phone rail. Momentum scrolling and snap live in atlas-comm-m.css;
        this is the press state under a thumb dragging a card. ------------- */
@media (max-width: 720px) {
  .afxw__card:active { transform: scale(.99); }
}

/* ---- focus. `.afx :focus-visible` in atlas-chrome.css already puts a 2px
        lime ring on every control inside body.afx, which covers this page.
        The only thing worth adding is the offset easing; the ring's
        appearance itself stays immediate. ---------------------------------- */
.afxch a, .afxw a, .afxs a, .afxq a {
  transition: outline-offset var(--t-fast) var(--e-out);
}