/**
 * WellMade Axis Core: shared interactions.
 *
 * A small, block-agnostic layer of box-level hover effects that any WellMade
 * block can opt into (Info Box today, Testimonials / Icon List / others later).
 * The classes are deliberately neutral (not tied to a single block) so every
 * future block reuses the same source: one stylesheet, registered once, loaded
 * only on pages that contain a block which uses it.
 *
 * Scope (free Core): box-level effects that apply cleanly to any block root with
 * no structural requirement. Pure CSS, GPU-friendly (transform + box-shadow
 * only), with a reduced-motion guard. Cursor-driven and layered-depth effects
 * (3D tilt, spotlight, glare) are a paid add-on concern and are not defined here.
 *
 * Usage: a block adds `wma-hover wma-hover--{effect}` to its root element. The
 * base `wma-hover` class carries the transition; the modifier carries the move.
 *
 * @package WellMade_Core
 */

/* Motion tokens: the plugin-wide timing scale. Every WellMade interaction
   reads its duration and easing from these custom properties, so all motion
   across Core and add-ons speaks with one considered voice. The values sit
   inside the timing ranges the major design systems agree on: state feedback
   stays under a quarter second, and only movement that travels across a
   surface takes longer. Add-ons consume these with a fallback, so they keep
   working even when this stylesheet is not on the page. */
:root {
	--wma-motion-instant: 100ms; /* press feedback, immediate acknowledgment */
	--wma-motion-quick: 150ms;   /* small state changes and color shifts */
	--wma-motion-base: 200ms;    /* the hover default: reveals, lifts, fades */
	--wma-motion-gentle: 300ms;  /* larger overlays and soft emphasis */
	--wma-motion-travel: 550ms;  /* movement across a surface: sweeps and returns */
	--wma-motion-slow: 700ms;    /* reserved for long reveals */
	--wma-ease-out: cubic-bezier(0, 0, 0.3, 1);         /* decelerating entry, the hover curve */
	--wma-ease-standard: cubic-bezier(0.2, 0, 0, 1);    /* neutral move, both directions */
	--wma-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle settle, used for returns */
}

/* Base: the transition lives here so the hover modifiers only declare the
   end state. Transitioning transform + box-shadow keeps the work on the
   compositor (no layout, no paint thrash). */
.wma-hover {
	transition: transform var(--wma-motion-base) var(--wma-ease-out), box-shadow var(--wma-motion-base) var(--wma-ease-out);
}

/* Lift: the box rises and its shadow deepens. The most common card hover. */
.wma-hover--lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* Grow: the whole box scales up a touch. Subtle, works without a shadow. */
.wma-hover--grow:hover {
	transform: scale(1.02);
}

/* Sink: the opposite of lift. The box presses down slightly, shadow softens.
   Reads as a gentle "press" affordance. */
.wma-hover--sink:hover {
	transform: translateY(2px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Accessibility: honor a reduced-motion preference by removing the movement
   entirely. The box still works, it just does not animate. */
@media (prefers-reduced-motion: reduce) {
	.wma-hover {
		transition: none;
	}
	.wma-hover--lift:hover,
	.wma-hover--grow:hover,
	.wma-hover--sink:hover {
		transform: none;
	}
}