/* Homepage section components.
*
* Each block maps to a registered section type in SectionRegistry.php.
* Load order: base.css → chrome.css → home.css → home-native.css → home-sections.css → commerce.css
*
* Scoped under .aeri-home-native so all rules inherit the page's token context and stay isolated
* from Elementor or any other block renderer that might share the DOM. */
/* ============================================================
* Card lift — the hover motion of the editorial band (home-native.css).
*
* Pods, systems tiles and social tiles used to share this lift; they now use the measured
* reference zoom defined under --aeri-zoom-* below. The notes on point 3 still explain why a
* translateY must never be added to either motion.
*
* There is no reference for the editorial band's motion. RYOBI's pods scale their ![]()
and nothing
* else, and its editorial card carries no text, so what reads there as "the card grew" is a
* side-effect of the markup rather than a designed interaction. This one is AERI's, and three
* choices carry it:
*
* 1. The whole card moves, not the image inside it. Scaling an image within a fixed frame reads as
* a picture sliding around inside a box; scaling the card moves the image and the caption
* together, which is what "the card came toward me" actually looks like.
*
* 2. Asymmetric timing. The base rule holds the leave and the :hover rule overrides it with the
* enter, so a card eases in slowly and returns quickly. Symmetric timing is what makes a hover
* feel sticky - the card is still shrinking under the cursor after the pointer has moved on -
* and it leaves a trail of half-grown cards when the pointer sweeps the row. The curve is
* front-loaded, so the movement is legible immediately and then settles; perceptually the
* motion is over well before the duration ends, which is what keeps 420ms from feeling slow.
*
* 3. transform-origin: center bottom, and no translateY.
*
* The first version of this lifted with translateY(-6px) on a centre origin, and that flickered.
* Measured: the -6px lift was larger than the downward growth from a centre-origin scale, which
* is height*(scale-1)/2 - 4.4px for a 219px social tile at 1440, 2.3px at 390. So a hovered
* card's bottom edge sat *higher* than it did at rest, and a pointer parked 1px above the rest
* bottom edge fell outside the card the moment it lifted. :hover switched off, the card dropped
* back under the pointer, :hover switched on, and the transition restarted in the other
* direction on almost every pointer move: a 1-4px jitter band at the bottom edge of every social
* tile at all four widths, and of pods at 390.
*
* Anchoring the scale at the bottom edge fixes it exactly. With origin centre-bottom and scale
* k>1 the hovered box is [x - w(k-1)/2, y - h(k-1)] to [x + w(k+1)/2, y + h] - a strict superset
* of the resting box [x, y] to [x + w, y + h]. A pointer inside the resting box is therefore
* always inside the hovered box, so the hover state cannot oscillate no matter where the pointer
* parks. The card still reads as growing toward the viewer: it rises off its base while the
* shadow stays put, which is a lift, just one that never retreats from the cursor.
*
* The editorial band takes a smaller factor (1.025) because it is ~1376px wide - see
* home-native.css.
*
* On the shadow: it is a box-shadow transition rather than an opacity fade on a pseudo-element,
* because the editorial card's overflow would clip a pseudo-element's outward shadow.
* ============================================================ */
.aeri-home-native{
--aeri-lift-enter:420ms;
--aeri-lift-enter-curve:cubic-bezier(.2,.75,.25,1);
--aeri-lift-leave:200ms;
--aeri-lift-leave-curve:cubic-bezier(.4,0,.2,1);
--aeri-lift-scale:1.04;
--aeri-lift-shadow:0 16px 34px -12px rgba(0,0,0,.3);
/* Card zoom — pods and systems tiles. (Social tiles fade instead; see the social grid block.)
*
* Measured on the reference at 1440, hovering a pod: the card box never changes
* (332x422.3 before and after) while its media goes 332 -> 348.6 wide, i.e. exactly 1.05,
* from a centre origin, over `all .3s cubic-bezier(.4,0,.2,1)`, with no shadow and no
* z-index change. Hovering a systems tile behaves the same way on its