linear() multi-point easing

/* Bounce easing — overshoots then settles */
.bounce {
  animation: slide 1.4s infinite alternate;
  animation-timing-function: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 13.7%,
    0.721 16.4%, 0.867 19.1%, 0.962 21.9%,
    1.004 24.7%, 0.998 27.3%, 0.978 30%,
    0.961 32.5%, 0.962 34.7%, 0.998 39.6%,
    1 41.7%, 0.997 44.3%, 0.988 46.7%, 1
  );
}

/* Elastic easing — spring overshoot and settle */
.elastic {
  animation: slide 1.4s infinite alternate;
  animation-timing-function: linear(
    0, 0.218 2.1%, 0.862 6.5%, 1.114 8.5%,
    1.193 9.8%, 1.222 11%, 1.199 13%, 1.016 16.8%,
    0.951, 0.937 18%, 0.951 20.3%, 1.013 23%,
    1.022 24.4%, 1.01 25.9%, 1 27.3%
  );
}

/* Snap easing — slow start, fast finish */
.snap {
  animation: slide 1.4s infinite alternate;
  animation-timing-function: linear(
    0, 0.001 4%, 0.006 8%, 0.019 12%,
    0.042 16%, 0.08 20%, 0.141 25%,
    0.25 31%, 0.461 40%, 1
  );
}

@keyframes slide {
  from { transform: translateY(1.5rem); }
  to   { transform: translateY(-1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .bounce, .elastic, .snap {
    animation: none;
  }
}

You are a senior frontend engineer specializing in CSS animation and motion design.

Goal: Create three custom easing curves using the CSS linear() timing function — a bounce, an elastic, and a snap easing — applied to a keyframe animation with no JavaScript.

Technical constraints:
- Use animation-timing-function: linear(...) with multiple value stops to define the easing curve.
- Values in linear() can exceed 1 (overshoot) and go below 0 (undershoot) to simulate spring physics.
- Optional percentage hints (e.g. 0.862 6.5%) define both the output value and the time offset, allowing uneven sampling.
- Always pair with @media (prefers-reduced-motion: reduce) that sets animation: none.
- Use oklch() for element background colors throughout.
- The animation property itself should use a simple timing like linear or ease for the outer duration; the custom curve is in animation-timing-function only.

Framework variant (pick one):
A) Vanilla CSS — define each easing as an animation-timing-function value on a class.
B) CSS custom properties — store each linear() curve in a --ease-bounce, --ease-elastic, --ease-snap variable at :root and reference them via var() in animation-timing-function.

Edge cases to handle:
- Browser fallback: if linear() is unsupported, the browser falls back to ease — add @supports (animation-timing-function: linear(0, 1)) to scope the custom easing.
- Animating layout properties (width, height) will not be compositor-friendly — limit animations to transform and opacity.
- Infinite animations should use animation-direction: alternate to avoid a jarring jump on each restart.
- Avoid animating with linear() on very short durations (under 200ms) — the multi-point lookahead becomes invisible.

Return CSS only.