CSS variables initial values via class

[fullyherge]

So I have a case of needing responsive animations - my element should pop in from the right to left on desktop, bottom to top on mobile. I solved this at first by having two different elements that switched display based on media query, but I figured I could try moving the animated variables into CSS variables. Now I'm struggling to find a way of having the initial values be responsive. This is required since the origin of the animation is a big part of the responsive difference.

Loosely based on this video.

This is what I have currently:

CSS

  .background {
    --initial-x: 50%;
    --initial-y: -50%;
    --initial-scale: 0;
    --animate-x: 0;
    --animate-y: -50%;
    --animate-scale: 1;
    --exit-x: 100%;
    --exit-y: -50%;
    --exit-scale: 0;
    height: 250%;
    width: 150%;
    background-color: var(--color-dark);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    @include breakpoint {
      --initial-x: -50%;
      --initial-y: 100%;
      --initial-scale: 0;
      --animate-x: -50%;
      --animate-y: 0;
      --animate-scale: 1;
      --exit-x: -50%;
      --exit-y: 100%;
      --exit-scale: 0;
      width: 150%;
      height: 50%;
      top: unset;
      bottom: 0;
      border-radius: 0;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
    }
  }

Component

function Background() {
  const variants = {
    initial: {
      x: "var(--initial-x)",
      y: "var(--initial-y)",
      scale: "var(--initial-scale)",
    },
    animate: {
      x: "var(--animate-x)",
      y: "var(--animate-y)",
      scale: "var(--animate-scale)",
    },
    exit: {
      x: "var(--exit-x)",
      y: "var(--exit-y)",
      scale: "var(--exit-scale)",
    },
  };
  return (
    <GridMotion
      variants={variants}
      initial="initial"
      animate="animate"
      exit="exit"
      transition={transition}
      className={styles.background}
    />
  );
}

The errors

You are trying to animate scale from "1" to "var(--exit-scale)". 1 is not an animatable value - to enable this animation set 1 to a value animatable to var(--exit-scale) via the `style` property.
You are trying to animate x from "50%" to "var(--animate-x)". 50% is not an animatable value - to enable this animation set 50% to a value animatable to var(--animate-x) via the `style` property.
You are trying to animate scale from "var(--initial-scale)" to "1". var(--initial-scale) is not an animatable value - to enable this animation set var(--initial-scale) to a value animatable to 1 via the `style` property.

I understand what this is asking for, but setting the initial values in the style prop won't make the initial values responsive... Am I missing something obvious?