/* ============================================================================
   Pay Later v2 — interaction layer. Loaded LAST, after every band stylesheet.

   Motion goes on after the static build measures correct, and it only answers
   questions the user just asked: did my click register, is this clickable,
   where am I. Nothing here 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.

   Bands 3, 5 and 6 already ship their own press/hover/focus rules from their
   build; this file covers what those missed — the hero, the announcement bar,
   the reused pricing component's controls, and band 4's cards — and adds the
   page-wide focus ring and the reduced-motion escape hatch.

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

/* ---- 1. press — the highest-value state on the page --------------------- */
/* Every clickable thing acknowledges locally and instantly, so the page feels
   responsive before the network answers.                                     */
.pl2-hero__cta,
.pl2-values__card a,
.afxp.pl2-pricing .afxp-cta,
.afxp.pl2-pricing .afxp-promo__code,
.pl2-pricing__guide {
  transition: transform var(--t-instant) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              opacity var(--t-fast) var(--e-out);
}

.pl2-hero__cta:active,
.afxp.pl2-pricing .afxp-cta:active,
.afxp.pl2-pricing .afxp-promo__code:active,
.pl2-pricing__guide:active {
  transform: scale(.97);
}

/* the bar pills and nav actions are the shared chrome; press only, no lift */
.pl2-hero .afx-bar__pill:active,
.pl2-hero .afx-nav__cta:active,
.pl2-hero .afx-nav__login:active,
.pl2-hero .afx-nav__globe:active {
  transform: scale(.97);
}

/* ---- 2. hover — intent, not levitation ---------------------------------- */
/* Behind a capability query, or it sticks after a tap on touch. */
@media (hover: hover) and (pointer: fine) {
  .pl2-hero__cta:hover { transform: translateY(-2px); }

  .pl2-pricing__guide:hover { border-color: var(--w-25, rgba(255,255,255,.25)); }

  /* band 4's value cards lift a couple of px — never more */
  .pl2-values__card {
    transition: transform var(--t-base) var(--e-out);
  }
  .pl2-values__card:hover { transform: translateY(-3px); }

  .pl2-hero .afx-nav__link {
    transition: opacity var(--t-fast) var(--e-out);
  }
  .pl2-hero .afx-nav__link:hover { opacity: .7; }
}

/* ---- 3. focus — an accessibility feature, not decoration ---------------- */
/* :focus-visible so it shows for keyboard users and not on mouse click.
   The ring itself is immediate; only its offset eases.                      */
.pl2-hero a:focus-visible,
.pl2-hero button:focus-visible,
.pl2-values a:focus-visible,
.pl2-values button:focus-visible,
.afxp.pl2-pricing a:focus-visible,
.afxp.pl2-pricing button:focus-visible,
.pl2-pricing__guide:focus-visible {
  outline: 2px solid var(--af-lime);
  outline-offset: 2px;
  border-radius: inherit;
  transition: outline-offset var(--t-fast) var(--e-out);
}

/* ---- 4. reduced motion -------------------------------------------------- */
/* Kill every translate and scale. Opacity may stay — it does not trigger
   motion sensitivity. Nothing on this page is hidden pending a scroll, so
   there is no revealed content to rescue here.                              */
@media (prefers-reduced-motion: reduce) {
  .pl2-hero *, .pl2-hero *::before, .pl2-hero *::after,
  .pl2-values *, .pl2-values *::before, .pl2-values *::after,
  .pl2-lowrisk *, .pl2-steps *, .pl2-final *,
  .afxp.pl2-pricing *, .afxp.pl2-pricing *::before, .afxp.pl2-pricing *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pl2-hero__cta:hover,
  .pl2-values__card:hover { transform: none !important; }
}