/* ============================================================================
   How It Works — the interaction layer.
   Added after the static build measured zero delta at 1512 and 393, so nothing
   in here may move anything at rest. Every value is a token from
   atlas-tokens.css; there is not a hand-written duration in this file.

   Transform and opacity only, plus colour on a couple of small surfaces.
   Nothing above the fold is hidden pending a scroll, and there is no scroll
   reveal on this page at all: it is four bands of short copy and the content
   has to be readable the instant it paints.
   ========================================================================= */

/* ---- press. The one that matters: local, instant acknowledgement --------- */
.afxhw-btn,
.afxhw-size,
.afxhw-card {
  transition: transform var(--t-instant) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
.afxhw-btn:active { transform: scale(.97); }
.afxhw-size:active { transform: scale(.97); }

/* ---- hover. Behind a capability query, or it sticks after a tap --------- */
@media (hover: hover) and (pointer: fine) {
  /* the lime CTA carries a drawn shadow already; deepen it rather than lift */
  .afxhw-btn:hover { transform: translateY(-1px); box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); }

  /* 1048:492611 off-state is #F2F4F7; a step toward the on-state reads as
     "this is selectable" without pretending it is already chosen */
  .afxhw-size:not([aria-checked="true"]):hover { background-color: #E8EBF0; }

  /* -2px, not -10. The cards are 703 wide and a real lift looks like a bug */
  .afxhw-steps__grid .afxhw-card:hover { transform: translateY(-2px); }
}

/* ---- focus. Not optional, and it is an accessibility feature ------------ */
.afxhw-btn:focus-visible,
.afxhw-size:focus-visible,
.afxhw-calc__range:focus-visible {
  outline: 2px solid var(--af-deep);
  outline-offset: 2px;
  transition: outline-offset var(--t-fast) var(--e-out);
}
/* on the dark bands the deep teal ring disappears into the photograph */
.afxhw-final .afxhw-btn:focus-visible,
.afxhw-hero .afxhw-btn:focus-visible { outline-color: var(--af-lime); }

/* ---- the calculator ----------------------------------------------------
   The fill and the bubble are driven by inline width/left from the JS, so the
   transition has to name those two properties. They are the one place this
   file departs from transform-and-opacity: a 560px track's fill IS a width,
   and translating a scaled bar would blur its rounded caps. Only two 8px bars
   and a 36px pill move, so there is nothing to thrash. */
.afxhw-calc__fill,
.afxhw-calc__bubble { transition: width var(--t-fast) var(--e-out), left var(--t-fast) var(--e-out); }

/* dragging has to feel simultaneous with the pointer, so the ease is killed
   while the control is actually held */
.afxhw-calc__range:active ~ .afxhw-calc__bubble,
.afxhw-calc__range:active ~ .afxhw-calc__fill { transition: none; }

/* the figure recomputes on every step of the slider. A cross-fade there would
   read as flicker, so it does not animate at all. Deliberate. */

/* ---- mobile carousel ---------------------------------------------------- */
.afxhw-steps__rail i { transition: transform var(--t-fast) var(--e-out); }
.afxhw-steps__track { scroll-behavior: smooth; }

/* ---- reduced motion ----------------------------------------------------
   Scoped to this page's own classes rather than a global reset, so it cannot
   reach into the shared chrome or footer, which handle their own. */
@media (prefers-reduced-motion: reduce) {
  .afxhw-btn, .afxhw-size, .afxhw-card,
  .afxhw-calc__fill, .afxhw-calc__bubble, .afxhw-steps__rail i {
    transition-duration: .01ms !important;
  }
  .afxhw-btn:hover, .afxhw-btn:active,
  .afxhw-size:active,
  .afxhw-steps__grid .afxhw-card:hover { transform: none !important; }
  .afxhw-steps__track { scroll-behavior: auto !important; }
}