/*
 * pointer-tilt.css — styles of js/pointer-tilt.js ([data-tilt] hosts).
 * Spec: docs/REDESIGN-PROPOSAL.md §2.7 ("Hero stage tilt" row, R1, R8), §7 T40.
 * Queued with its script by partials/hero_asset.php (home only), so the module
 * is self-contained: render a [data-tilt] host, queue both files.
 *
 * The tilted element is the host's first element child; the host keeps its
 * own transform (data-reveal). Everything sits behind .is-tilt-ready (set by
 * the script) AND the R8 + no-preference query, so no JS, touch, coarse
 * pointers and reduced motion all keep the untransformed resting look.
 *   follow   180ms --ease-out (.is-tilting, while the pointer moves)
 *   return   280ms --ease-out (pointer leaves → both angles back to 0)
 *   range    rotateX/Y ≤ 4°, perspective(900px); transform only (R1)
 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    [data-tilt].is-tilt-ready > :first-child {
        transform: perspective(900px) rotateX(var(--lp-tilt-x, 0deg)) rotateY(var(--lp-tilt-y, 0deg));
        transition: transform var(--dur-panel) var(--ease-out);
    }
    [data-tilt].is-tilt-ready.is-tilting > :first-child {
        transition-duration: var(--dur-ui);
        will-change: transform;
    }
}