/* Loops — small reusable primitives */
const Container = ({ children, className = "" }) =>
{children}
;
const Section = ({ id, children, className = "", as = "section", aria, style }) => {
const Tag = as;
return (
{children}
);
};
const Kicker = ({ children }) =>
{children};
const SectionHeading = ({ kicker, title, body, align = "left", titleClassName = "", className = "" }) =>
{kicker ?
{kicker}
: null}
{title}
{body ?
{body}
: null}
);
};
/* ----------------------------------------------------------------
Hover micro-interaction helper.
Plays a looping WAAPI animation while `card` is hovered/focused.
On hover-in: eases playback up to full speed.
On hover-out: instead of freezing mid-motion, it smoothly carries
the animation FORWARD to its next resting frame (an iteration
boundary, where the element sits at its default state) and only
then pauses — so every hover animation resets cleanly.
Respects prefers-reduced-motion (stays at the resting frame).
Returns a cleanup function.
------------------------------------------------------------------- */
function attachHoverLoop(el, card, keyframes, timing) {
if (!el) return () => {};
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const D = timing.duration;
const anim = el.animate(keyframes, { ...timing, iterations: Infinity, easing: "linear" });
anim.pause();
if (reduce || !card) return () => anim.cancel();
let raf = null,last = null;
let mode = "idle"; // 'in' | 'out' | 'idle'
let settleFrom = 0,settleTarget = 0,settleElapsed = 0,settleDur = 1;
const easeOut = (p) => 1 - Math.pow(1 - p, 3);
const loop = (t) => {
if (last == null) last = t;
const dt = (t - last) / 1000;
last = t;
if (mode === "in") {
let r = anim.playbackRate;
r += (1 - r) * Math.min(1, dt * 4.5); // ease up to speed
if (1 - r < 0.012) r = 1;
anim.playbackRate = r;
if (anim.playState !== "running") anim.play();
raf = requestAnimationFrame(loop);
} else if (mode === "out") {
// drive currentTime manually toward the next resting frame
settleElapsed += dt * 1000;
const p = Math.min(1, settleElapsed / settleDur);
anim.currentTime = settleFrom + (settleTarget - settleFrom) * easeOut(p);
if (p >= 1) {anim.currentTime = settleTarget;anim.pause();mode = "idle";raf = null;last = null;return;}
raf = requestAnimationFrame(loop);
} else {
raf = null;last = null;
}
};
const kick = () => {if (!raf) {last = null;raf = requestAnimationFrame(loop);}};
const start = () => {mode = "in";if (anim.playState !== "running") anim.play();kick();};
const stop = () => {
const c = anim.currentTime || 0;
settleFrom = c;
settleTarget = Math.ceil((c + 0.001) / D) * D; // next iteration boundary = resting frame
settleElapsed = 0;
settleDur = Math.min(650, settleTarget - c + 120); // proportional, capped, snappy
anim.pause(); // we drive currentTime ourselves now
anim.playbackRate = 1;
mode = "out";
kick();
};
card.addEventListener("mouseenter", start);
card.addEventListener("mouseleave", stop);
card.addEventListener("focusin", start);
card.addEventListener("focusout", stop);
return () => {
card.removeEventListener("mouseenter", start);
card.removeEventListener("mouseleave", stop);
card.removeEventListener("focusin", start);
card.removeEventListener("focusout", stop);
if (raf) cancelAnimationFrame(raf);
anim.cancel();
};
}
Object.assign(window, { Container, Section, SectionHeading, Kicker, Button, Chip, AppStoreBadge, Keyline, SeasonGlyph, attachHoverLoop });