@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/recipes/marquee/create-marquee.ts

@@ -0,0 +1,74 @@
+import { entrances } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { TIMING } from '../../core/timing';
+import { inert, warnOnce, type Instance } from '../../core/types';
+
+/*
+ * Siena's marquee: the first child (the group) is copied until the strip is
+ * full, plus one; every copy slides its own length in a linear loop, so the
+ * strip never shows a seam. Speed: 2 s per item in the group (at most 14).
+ * Copies are aria-hidden and inert: readers and keyboards meet the group once.
+ */
+
+export interface MarqueeOptions {
+  /** 'x' (default) or 'y' (Siena's vertical strip). */
+  axis?: 'x' | 'y';
+  /** Seconds per item. */
+  speed?: number;
+  reverse?: boolean;
+}
+
+export interface MarqueeInstance extends Instance {
+  /** Recount the copies (after the content or size changed). */
+  refresh(): void;
+}
+
+export function createMarquee(root: HTMLElement | null, options: MarqueeOptions = {}): MarqueeInstance {
+  const group = (root?.firstElementChild as HTMLElement | null) ?? null;
+  if (!root || !group) {
+    warnOnce('marquee: needs a group inside');
+    return inert({ refresh() {} });
+  }
+  const t = TIMING.marquee;
+  const { axis = 'x', speed = t.perItem, reverse = false } = options;
+  const scope = createScope();
+  const classes = ['mk-marquee', `mk-marquee--${axis}`, reverse && 'mk-marquee--reverse'].filter(Boolean).join(' ');
+  scope.attr(root, 'class', [root.getAttribute('class'), classes].filter(Boolean).join(' '));
+  const items = Math.min(group.children.length || 1, t.maxItems);
+  root.style.setProperty('--mk-marquee-duration', `${items * speed}s`);
+  scope.add(() => {
+    root.style.removeProperty('--mk-marquee-duration');
+    if (root.getAttribute('style') === '') root.removeAttribute('style');
+  });
+  let copies: HTMLElement[] = [];
+
+  const refresh = () => {
+    for (const copy of copies.splice(0)) copy.remove();
+    if (!entrances()) return;
+    const size = axis === 'x' ? group.offsetWidth : group.offsetHeight;
+    const room = axis === 'x' ? root.clientWidth : root.clientHeight;
+    // Unmeasurable (hidden, not laid out yet): five copies, like Siena.
+    const count = size > 0 ? Math.max(1, Math.ceil(room / size)) + 1 : 5;
+    for (let i = 0; i < count; i++) {
+      const copy = group.cloneNode(true) as HTMLElement;
+      copy.setAttribute('aria-hidden', 'true');
+      copy.inert = true;
+      for (const el of copy.querySelectorAll('[id]')) el.removeAttribute('id');
+      root.append(copy);
+      copies.push(copy);
+    }
+  };
+  refresh();
+  scope.add(() => {
+    for (const copy of copies.splice(0)) copy.remove();
+  });
+  root.dataset.mkReady = '';
+
+  return {
+    refresh,
+    destroy() {
+      scope.dispose();
+      delete root.dataset.mkReady;
+    },
+  };
+}

package/src/recipes/marquee/marquee.css

@@ -0,0 +1,41 @@
+/* marquee — Siena's strip: every copy of the group slides its own length in a linear loop. */
+.mk-marquee {
+  display: flex;
+  gap: var(--mk-marquee-gap, 0px);
+  overflow: hidden;
+}
+
+.mk-marquee--y {
+  flex-direction: column;
+}
+
+.mk-marquee > * {
+  flex: none;
+  animation: mk-marquee-x var(--mk-marquee-duration, 10s) linear infinite;
+}
+
+.mk-marquee--y > * {
+  animation-name: mk-marquee-y;
+}
+
+.mk-marquee--reverse > * {
+  animation-direction: reverse;
+}
+
+@keyframes mk-marquee-x {
+  to {
+    transform: translateX(calc(-100% - var(--mk-marquee-gap, 0px)));
+  }
+}
+
+@keyframes mk-marquee-y {
+  to {
+    transform: translateY(calc(-100% - var(--mk-marquee-gap, 0px)));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-marquee > * {
+    animation: none;
+  }
+}

package/src/recipes/mask-text/README.md

@@ -0,0 +1,39 @@
+# mask-text
+
+El texto sale de su máscara: cada línea (o palabra, o letra) vive en un recorte y sube desde abajo (`yPercent 100 → 0`, 1.2 s `expo.out`, retardo 0.1 s, 20 ms entre piezas) cuando el 80 % del bloque está en pantalla. Al salir de la pantalla vuelve a esconderse, así que se repite cada vez que regresa (salvo `once`). SplitText lo vuelve a partir al cambiar el tamaño o al cargar la fuente, algo que OFFFICE no hacía.
+
+Origen: OFFFICE (offficestud.io) `masked-type`; Siena usa el mismo gesto en los títulos de película partiendo de 120 %.
+
+## HTML / Astro
+
+```html
+<h2 data-mk="mask-text">Office for future furnishing</h2>
+<p data-mk="mask-text" data-mk-by="words" data-mk-once>Texto que entra palabra a palabra.</p>
+<h1 data-mk="mask-text" data-mk-y="120" data-mk-trigger="load">Savoy</h1>
+```
+
+## React
+
+```tsx
+const ref = useRef<HTMLHeadingElement>(null);
+const text = useMaskText(ref, { by: 'lines' });
+<h2 ref={ref} data-mk="mask-text">Office for future furnishing</h2>
+// text.current?.hide() antes de cambiar de página
+```
+
+## API
+
+`createMaskText(el, { by, y, duration, ease, delay, stagger, trigger, once })` → `{ play(), hide(), split, destroy }`.
+
+| Opción | Por defecto | |
+|---|---|---|
+| `by` | `'lines'` | `'words'`, `'chars'` |
+| `y` | `100` | % desde el que sube cada pieza |
+| `trigger` | `'scroll'` | `'load'`, `'manual'` |
+| `once` | `false` | no vuelve a esconderse al salir |
+
+`hide()` es la salida de OFFFICE: todas bajan a su recorte con 2 ms entre piezas.
+
+## Accesibilidad
+
+La raíz recibe `aria-label` con el texto completo y las piezas quedan ocultas a lectores (SplitText `aria: 'auto'`); `destroy()` lo deshace. Con movimiento reducido no se parte ni se esconde nada.

package/src/recipes/mask-text/create-mask-text.ts

@@ -0,0 +1,134 @@
+import { gsap, SplitText, registerMotion } from '../../core/gsap';
+import { entrances } from '../../core/reduced';
+import { TIMING } from '../../core/timing';
+import { shows, thresholds } from '../../core/visible';
+import { inert, warnOnce, type Instance } from '../../core/types';
+
+/*
+ * OFFFICE's masked type (and Siena's case titles): the text is split into lines,
+ * words or letters, each inside its own clip, and rises from below it
+ * (yPercent 100 → 0, 1.2 s expo.out, 0.1 s delay, 20 ms apart) once 80 % of it
+ * is on screen. It hides again when it leaves the screen (unless `once`), so it
+ * plays every time it comes back. SplitText re-splits on resize and font load.
+ */
+
+export interface MaskTextOptions {
+  by?: 'lines' | 'words' | 'chars';
+  /** Start offset in % of each piece (Siena's case titles: 120). */
+  y?: number;
+  duration?: number;
+  ease?: string;
+  delay?: number;
+  stagger?: number;
+  /** 'scroll' (default) plays when 80 % is visible; 'load' now; 'manual' waits for play(). */
+  trigger?: 'scroll' | 'load' | 'manual';
+  /** Play once and stay (OFFFICE's data-a-mod). */
+  once?: boolean;
+}
+
+export interface MaskTextInstance extends Instance {
+  play(): void;
+  /** OFFFICE's exit: back down into the clips, 2 ms apart. */
+  hide(): void;
+  readonly split: SplitText | null;
+}
+
+const CLASSES = { lines: 'mk-mask-line', words: 'mk-mask-word', chars: 'mk-mask-char' };
+const TYPES = { lines: 'lines', words: 'words', chars: 'words,chars' };
+
+export function createMaskText(el: HTMLElement | null, options: MaskTextOptions = {}): MaskTextInstance {
+  if (!el) {
+    warnOnce('mask-text: missing element');
+    return inert({ play() {}, hide() {}, split: null });
+  }
+  const t = TIMING.maskText;
+  const {
+    by = 'lines',
+    y = t.y,
+    duration = t.duration,
+    ease = 'expo.out',
+    delay = t.delay,
+    stagger = t.stagger,
+    trigger = 'scroll',
+    once = false,
+  } = options;
+  if (!entrances()) {
+    el.dataset.mkReady = '';
+    return {
+      play() {},
+      hide() {},
+      split: null,
+      destroy() {
+        delete el.dataset.mkReady;
+      },
+    };
+  }
+  registerMotion();
+  let shown = false;
+  let tween: gsap.core.Tween | null = null;
+  let observer: IntersectionObserver | null = null;
+
+  const split = SplitText.create(el, {
+    type: TYPES[by],
+    mask: by,
+    autoSplit: true,
+    aria: 'auto',
+    linesClass: CLASSES.lines,
+    wordsClass: CLASSES.words,
+    charsClass: CLASSES.chars,
+    // A new split (resize, fonts) keeps the state the text was in.
+    onSplit: (self: SplitText) => {
+      tween?.kill();
+      gsap.set(self[by], { yPercent: shown ? 0 : y });
+    },
+  });
+  const pieces = () => split[by] as HTMLElement[];
+  gsap.set(pieces(), { yPercent: y });
+
+  const play = () => {
+    shown = true;
+    tween?.kill();
+    tween = gsap.to(pieces(), { yPercent: 0, duration, ease, delay, stagger: { each: stagger, from: 'start' }, overwrite: true });
+  };
+  const hide = () => {
+    shown = false;
+    tween?.kill();
+    tween = gsap.to(pieces(), { yPercent: y, duration, ease, stagger: { each: t.exitStagger }, overwrite: true });
+  };
+  const reset = () => {
+    shown = false;
+    tween?.kill();
+    gsap.set(pieces(), { yPercent: y });
+  };
+
+  if (trigger === 'load') play();
+  else if (trigger === 'scroll' && typeof IntersectionObserver === 'function') {
+    observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          // 80 % visible — or, for text taller than the screen, 80 % of the screen.
+          if (shows(entry, t.threshold)) {
+            if (!shown) play();
+            if (once) observer?.disconnect();
+          } else if (!entry.isIntersecting && shown && !once) reset();
+        }
+      },
+      { threshold: thresholds(t.threshold), rootMargin: '10px' },
+    );
+    observer.observe(el);
+  }
+  el.dataset.mkReady = '';
+
+  return {
+    play,
+    hide,
+    split,
+    destroy() {
+      observer?.disconnect();
+      tween?.kill();
+      gsap.killTweensOf(pieces());
+      split.revert();
+      delete el.dataset.mkReady;
+    },
+  };
+}

package/src/recipes/parallax/README.md

@@ -0,0 +1,31 @@
+# parallax
+
+La foto se mueve dentro de su marco mientras el marco cruza la pantalla: escalada a 1.2 (1.3 con `amount` distinto de 1, salvo en el móvil), viaja de −10 % a +10 % de su altura × `amount`. Sigue al scroll de la página sin retraso (Siena suavizaba la página entera con Lenis; con scroll nativo un suavizado propio deja la foto arrastrándose detrás del marco — `lerp: .1` si lo quieres). Una foto arriba del todo de la página cuenta desde `top top`, así que empieza en −10 %.
+
+Origen: Siena Film Foundation, fotos de las páginas de película y About (`translateY(-10·a + p·20·a %) scale(1.2)`).
+
+## HTML / Astro
+
+```html
+<figure data-mk="parallax" style="height: 70vh">
+  <img src="foto.jpg" alt="…" style="width: 100%; height: 100%; object-fit: cover">
+</figure>
+<figure data-mk="parallax" data-mk-amount="2">…</figure>
+```
+
+El marco recorta (`overflow: clip`, lo pone el motor). El objetivo es `[data-mk-parallax-target]`, si no la primera `img`, `video` o `picture`, si no el primer hijo.
+
+## React
+
+```tsx
+const ref = useRef<HTMLElement>(null);
+useParallax(ref, { amount: 1 });
+```
+
+## API
+
+`createParallax(root, { amount, lerp, scroll })` → `{ seek(p), destroy }`. Con `scroll: false` solo se mueve con `seek`.
+
+## Accesibilidad
+
+Con movimiento reducido la foto queda centrada y quieta.

package/src/recipes/parallax/create-parallax.ts

@@ -0,0 +1,74 @@
+import { registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { trackScroll, type ScrollTrack } from '../../core/scroll-track';
+import { TIMING } from '../../core/timing';
+import { inert, warnOnce, type Instance } from '../../core/types';
+
+/*
+ * Siena's photo parallax: the frame clips, the picture inside is scaled up
+ * (1.2, or 1.3 for a stronger amount on wide screens) and travels from −10 % to
+ * +10 % of its height × amount while the frame crosses the screen (a frame at
+ * the top of the page counts from "top top", so it starts at −10 %). Target:
+ * [data-mk-parallax-target], else the first img / video / picture, else the
+ * first child.
+ */
+
+export interface ParallaxOptions {
+  amount?: number;
+  lerp?: number;
+  /** Follow the scroll (default). Off: only seek() moves it. */
+  scroll?: boolean;
+}
+
+export interface ParallaxInstance extends Instance {
+  /** Show the state at progress 0…1. */
+  seek(progress: number): void;
+}
+
+export function createParallax(root: HTMLElement | null, options: ParallaxOptions = {}): ParallaxInstance {
+  const target =
+    root?.querySelector<HTMLElement>('[data-mk-parallax-target]') ??
+    root?.querySelector<HTMLElement>(':scope > img, :scope > video, :scope > picture') ??
+    (root?.firstElementChild as HTMLElement | null) ??
+    null;
+  if (!root || !target) {
+    warnOnce('parallax: needs an element with a picture inside');
+    return inert({ seek() {} });
+  }
+  const t = TIMING.parallax;
+  const { amount = 1, lerp = t.lerp, scroll = true } = options;
+  const phone = typeof matchMedia === 'function' && matchMedia('(max-width: 767px)').matches;
+  const scale = amount !== 1 && !phone ? t.strongScale : t.scale;
+  registerMotion();
+  // Not an entrance: it hides nothing, so only reduced motion stills it.
+  const moving = !reduced();
+  const originalTransform = target.style.transform;
+  const originalOverflow = root.style.overflow;
+  root.style.overflow = 'clip';
+
+  const render = (progress: number) => {
+    const p = moving ? progress : 0.5;
+    const y = Number((-t.travel * amount + p * 2 * t.travel * amount).toFixed(3));
+    target.style.transform = `translateY(${y}%) scale(${scale})`;
+  };
+  let track: ScrollTrack | null = null;
+  if (moving && scroll) {
+    const top = root.getBoundingClientRect().top + (window.scrollY || 0);
+    track = trackScroll(root, { start: top < 20 ? 'top top' : 'top bottom', lerp, onUpdate: render });
+  } else render(0.5);
+  root.dataset.mkReady = '';
+
+  return {
+    seek(progress: number) {
+      if (track) track.set(progress);
+      else render(progress);
+    },
+    destroy() {
+      track?.destroy();
+      target.style.transform = originalTransform;
+      root.style.overflow = originalOverflow;
+      for (const el of [target, root]) if (el.getAttribute('style') === '') el.removeAttribute('style');
+      delete root.dataset.mkReady;
+    },
+  };
+}

package/src/recipes/pile/README.md

@@ -0,0 +1,48 @@
+# pile
+
+Un proyecto como pila de 2–3 capas giradas que escalan con rebote al entrar en pantalla y reaccionan al hover.
+
+Origen: spencergabor.com — Overview / GridEntry.
+
+## Vanilla / Astro
+
+```html
+<button class="mk-pile" data-mk="pile">
+  <span class="mk-pile__stack">
+    <!-- capas traseras primero; style generado con pileStyle(pileLayers(n, seed)[i]) -->
+    <span class="mk-pile__layer" style="--mk-rot:-3.1;--mk-px:6.2;--mk-py:10">
+      <span class="mk-pile__media"><span class="mk-pile__shadow"></span><span class="mk-pile__plate"></span></span>
+    </span>
+    <span class="mk-pile__layer">
+      <span class="mk-pile__media"><span class="mk-pile__shadow"></span><img src="cover.jpg" alt=""></span>
+    </span>
+  </span>
+  <span>Proyecto · 2026</span>
+</button>
+```
+
+Con `autoInit()` (de `@yewdiel21/motion-kit/auto`) las opciones van como `data-mk-<opción>` en kebab-case. Sin `autoInit`: `createPile(el, opciones)`.
+
+## React
+
+```tsx
+const ref = useRef<HTMLButtonElement>(null);
+usePile(ref);
+const layers = pileLayers(2, index); // determinista: igual en servidor y cliente
+```
+
+## Opciones
+
+| Opción | Por defecto | Qué hace |
+|---|---|---|
+| `threshold` | `.25` | Fracción visible para disparar la entrada |
+
+## Controles
+
+`destroy()`; utilidades `pileLayers(count, seed)` y `pileStyle(layer)`
+
+## CSS
+
+La entrada (escala .7 → 1 y sombra) es CSS con `--mk-ease-elastic`, activada por `data-mk-inview`.
+
+Con `prefers-reduced-motion: reduce` la receta deja el contenido en su estado final, sin animar.

package/src/recipes/pile/create-pile.ts

@@ -0,0 +1,50 @@
+import { createScope } from '../../core/scope';
+import { inert, warnOnce, type Instance } from '../../core/types';
+import { shows, thresholds } from '../../core/visible';
+import type { PileLayer } from './pile-math';
+
+export { pileLayers, type PileLayer } from './pile-math';
+
+/*
+ * spencergabor.com project grid: a pile of two or three rotated layers that
+ * scale in (CSS, elastic) once the pile scrolls into view. The rotations are
+ * generated once with `pileLayers()` and written into the markup with
+ * `pileStyle()`, so server and client render the same pile.
+ */
+
+export interface PileOptions {
+  /** Fraction of the pile that must be visible before it scales in. */
+  threshold?: number;
+}
+
+export type PileInstance = Instance;
+
+/** Inline style for a back layer: `style={pileStyle(layer)}`. */
+export const pileStyle = (layer: PileLayer) =>
+  `--mk-rot:${layer.rotation.toFixed(2)};--mk-px:${layer.offsetX.toFixed(2)};--mk-py:${layer.offsetY}`;
+
+export function createPile(root: HTMLElement | null, options: PileOptions = {}): PileInstance {
+  if (!root) {
+    warnOnce('pile: missing root');
+    return inert();
+  }
+  const scope = createScope();
+  const threshold = Math.min(1, Math.max(0, options.threshold ?? 0.25));
+  const io = scope.observe(
+    new IntersectionObserver(
+      ([entry]) => {
+        if (!entry || !shows(entry, threshold)) return;
+        root.dataset.mkInview = '';
+        io.disconnect();
+      },
+      { threshold: thresholds(threshold) },
+    ),
+  );
+  io.observe(root);
+  root.dataset.mkReady = '';
+  scope.add(() => {
+    delete root.dataset.mkInview;
+    delete root.dataset.mkReady;
+  });
+  return { destroy: () => scope.dispose() };
+}

package/src/recipes/pile/pile-math.ts

@@ -0,0 +1,27 @@
+export interface PileLayer {
+  rotation: number;
+  offsetX: number;
+  offsetY: number;
+}
+
+function mulberry32(seed: number) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** Spencer's stack transforms, seeded so SSR output is stable. Layer 0 is the back. */
+export function pileLayers(count: number, seed: number): PileLayer[] {
+  const rand = mulberry32(seed + 1);
+  const range = (min: number, max: number) => rand() * (max - min) + min;
+  return Array.from({ length: count }, (_, i) => ({
+    rotation: range(2, 5) * ((i % 2) * 2 - 1),
+    offsetX: range(4, 10) * (rand() < 0.5 ? -1 : 1),
+    offsetY: (count - i) * 5,
+  }));
+}

package/src/recipes/pile/pile.css

@@ -0,0 +1,63 @@
+/* pile — stack recipe from spencergabor.com (GridEntry) */
+
+.mk-pile {
+  display: grid;
+  gap: 2.25rem;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  text-align: left;
+}
+
+.mk-pile__stack {
+  display: grid;
+  aspect-ratio: 4 / 3;
+}
+
+.mk-pile__layer {
+  position: relative;
+  grid-area: 1 / 1;
+  border-radius: var(--mk-radius-card);
+  rotate: calc(var(--mk-rot, 0) * 0.6deg);
+  translate: calc(var(--mk-px, 0) * 0.3%) calc(var(--mk-py, 0) * 0.3%);
+}
+
+.mk-pile__media {
+  position: absolute;
+  inset: 0;
+  display: block;
+  border-radius: inherit;
+  transition: scale 0.8s var(--mk-ease-elastic);
+}
+
+.mk-pile__shadow {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: rgb(0 0 0 / 0.05);
+  box-shadow: var(--mk-shadow-soft);
+  transition: opacity 0.8s var(--mk-ease-elastic);
+}
+
+.mk-pile__media > img,
+.mk-pile__plate {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+  background: var(--mk-surface);
+}
+
+@media (any-hover: hover) {
+  .mk-pile:hover .mk-pile__layer:nth-last-child(1) .mk-pile__media { scale: 1.03; }
+  .mk-pile:hover .mk-pile__layer:nth-last-child(2) .mk-pile__media { scale: 1.02; }
+  .mk-pile:hover .mk-pile__layer:nth-last-child(3) .mk-pile__media { scale: 1.01; }
+}
+
+.mk-pile:active .mk-pile__layer:nth-last-child(1) .mk-pile__media { scale: 0.97; }
+.mk-pile:active .mk-pile__layer:nth-last-child(2) .mk-pile__media { scale: 0.98; }
+.mk-pile:active .mk-pile__layer:nth-last-child(3) .mk-pile__media { scale: 0.99; }

package/src/recipes/pill/README.md

@@ -0,0 +1,30 @@
+# pill
+
+Botón píldora con escala elástica al pasar (1.05 + sombra) y al pulsar (.95), y `.mk-stretch` para enlaces que se estiran al pasar.
+
+Origen: spencergabor.com — Button.vue.
+
+## Vanilla / Astro
+
+```html
+<button class="mk-pill">Enviar mensaje</button>
+<a class="mk-stretch" href="#">GitHub</a>
+```
+
+Solo CSS: importa `@yewdiel21/motion-kit/css`.
+
+## React
+
+```tsx
+<button className="mk-pill">Enviar</button>
+```
+
+## Controles
+
+— (solo CSS)
+
+## CSS
+
+Colores con `--mk-pill-bg` y `--mk-pill-fg`.
+
+Con `prefers-reduced-motion: reduce` la receta deja el contenido en su estado final, sin animar.

package/src/recipes/pill/pill.css

@@ -0,0 +1,48 @@
+/* pill — spencergabor.com button: elastic scale and shadow */
+
+.mk-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 1rem 1.75rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--mk-pill-bg, #0a0a0a);
+  color: var(--mk-pill-fg, #fff);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    scale 0.8s var(--mk-ease-elastic),
+    box-shadow 0.8s var(--mk-ease-elastic),
+    opacity 0.2s;
+}
+
+.mk-pill:active {
+  scale: 0.95;
+}
+
+.mk-pill:disabled {
+  opacity: 0.5;
+  cursor: progress;
+}
+
+@media (any-hover: hover) {
+  .mk-pill:hover {
+    scale: 1.05;
+    box-shadow: var(--mk-shadow);
+  }
+}
+
+/* Stretch on hover (spencergabor.com footer links) */
+.mk-stretch {
+  display: inline-block;
+  transform-origin: 50% 100%;
+  transition: transform 1s var(--mk-ease-elastic-hover);
+}
+
+@media (any-hover: hover) {
+  .mk-stretch:hover {
+    transform: scaleY(1.2);
+  }
+}