/* ============================================================================
   Models Overview — the interaction layer.
   Added after the static build measured correct, per the house motion rules:
     - existing --t-* / --e-* tokens only, never a hand-written duration
     - transform and opacity only; nothing that re-runs layout
     - a press state on everything clickable
     - hover behind @media (hover:hover) and (pointer:fine), or it sticks
       after a tap on touch
     - a visible :focus-visible ring on every control
     - prefers-reduced-motion honoured, and nothing above the fold is hidden
       pending a scroll (there are no scroll reveals on this page at all)
   ========================================================================= */

/* ---- 1. press. The highest-value animation on the page. --------------- */
.afxmo-btn,
.afxmo-card__cta,
.afxmo-pl__size,
.afxmo-card,
.afxmo-step {
  transition: transform var(--t-instant) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
.afxmo-btn:active,
.afxmo-card__cta:active,
.afxmo-pl__size:active { transform: scale(.97); }

/* ---- 2. hover ---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .afxmo-btn:hover,
  .afxmo-card__cta--lime:hover { transform: translateY(-2px); }
  .afxmo-card__cta:not(.afxmo-card__cta--lime):hover {
    background-color: rgba(255,255,255,.14);
  }
  .afxmo-card:hover { transform: translateY(-3px); }
  .afxmo-step:hover { transform: translateY(-2px); }
  .afxmo-pl__size:hover:not([aria-checked="true"]) { background-color: #E8EBF0; }
  .afxmo-btn--ghost:hover { background-color: rgba(255,255,255,.07); }
}

/* the card hover lift must not drag the lifted card under its neighbour */
.afxmo-card:hover,
.afxmo-step:hover { z-index: 2; }

/* ---- 3. focus. Keyboard only, and never removed without a replacement. -- */
.afxmo-btn:focus-visible,
.afxmo-card__cta:focus-visible,
.afxmo-pl__size:focus-visible,
.afxmo-pl__range-input:focus-visible {
  outline: 2px solid var(--af-lime);
  outline-offset: 3px;
  transition: outline-offset var(--t-fast) var(--e-out);
}
/* the range input is transparent, so the ring goes on the visible thumb */
.afxmo-pl__range-input:focus-visible + .afxmo-pl__bubble,
.afxmo-pl__slider:focus-within .afxmo-pl__bubble {
  outline: 2px solid var(--af-teal);
  outline-offset: 3px;
}

/* ---- 4. state change: the slider and the size chips --------------------
   The fill and the bubble move together. Width on the fill is a layout
   property, so it animates transform-free only because it is a single
   8px-tall bar with nothing beside it — everything after it in the stack is
   absolutely positioned, so no reflow escapes the slider. */
.afxmo-pl__fill { transition: width var(--t-base) var(--e-inout); }
.afxmo-pl__bubble {
  transition: left var(--t-base) var(--e-inout),
              background-color var(--t-fast) var(--e-out);
}
.afxmo-pl__size { transition: background-color var(--t-fast) var(--e-out),
                              box-shadow var(--t-fast) var(--e-out),
                              transform var(--t-instant) var(--e-out); }

/* ---- 5. the one overshoot on the page, on the selected size chip ------- */
.afxmo-pl__size[aria-checked="true"] {
  transition: background-color var(--t-base) var(--e-spring),
              box-shadow var(--t-base) var(--e-spring);
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .afxmo-btn, .afxmo-card, .afxmo-card__cta, .afxmo-step,
  .afxmo-pl__size, .afxmo-pl__fill, .afxmo-pl__bubble {
    transition-duration: .01ms !important;
    transform: none !important;
  }
}