Define CSS variables inside animation and trigger inner animation from variable inside animation

Question

I'm investigating if I can create a glow effect to jQuery Terminal underline cursor animation that is created with box-shadow.

TL;DR at the bottom there is a demo that is my attempt to define CSS variables inside the animation.

The way to change the animation in jQuery Terminal is to set variable:

:root {
   --animation: terminal-underline;
}

and underline animation look like this:

@keyframes terminal-underline {
    0%, 50% {
        box-shadow: 0 2px 0 #aaa;
        box-shadow: 0 2px 0 var(--original-color, #aaa);
    }
    50.1%, 100% {
        box-shadow: none;
    }
}

See Demo

To keep the current API of setting animation, my first attempt was to create an inner pseudo-element that will have a height of 2px that will be in the same place as a current underline cursor. To animate it I came up with this hack:

:root {
    --size: 1.4;
    --glow: 1;
    --animation: terminal-underline-2;
}
@keyframes terminal-underline-2 {
  0%, 50% {
      --terminal-underline: terminal-underline-pseudo 1s infinite linear;
  }
  50.1%, 100% {
      --terminal-underline: terminal-underline-pseudo 1s infinite linear;
  }
}
.cmd-cursor [data-text] {
    position: relative;
}
.cmd-cursor [data-text]::before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    z-index: 100;
    height: 2px;
    bottom: -2px;
    animation: var(--terminal-underline);
}
@keyframes terminal-underline-pseudo {
  0%, 50% {
      box-shadow: 0 2px 0 #aaa;
      box-shadow: 0 2px 0 var(--original-color, #aaa),
                  0 2px calc(var(--glow) * 5px) var(--original-color, #aaa);
  }
  50.1%, 100% {
      box-shadow: none;
  }
}

But it doesn't work. If I set the animation terminal-underline-pseudo manually it works fine, but I need to trigger it when the main CSS variable --animation is set to terminal-underline.

this works:

.cmd-cursor [data-text]::before {
   animation:  terminal-underline-pseudo 1s infinite linear;
}

But I need that animation to be conditional.

I also can't use terminal-underline-pseudo as my main animation because box-shadow is outside of the cursor box, not around the border. The original animation use trick where box-shadow x is 0 so only the bottom part of the box-shadow is visible.

Here is the POC of this, but it doesn't work. In Chrome, it shows the color as red but in Firefox it doesn't work at all:

@keyframes animation-var {
    0%, 100% {
        --anim: animation-inner 1s infinite linear;
        --color: red;
    }
}
@keyframes animation-inner {
    0%, 50% {
        background: black;
        color: white;
    }
    50.1%, 100% {
        background: white;
        color: black;
    }
}
.foo {
    animation: animation-var 1s infinite linear;
}
.bar {
    color: var(--color);
    animation: var(--anim);
}

<div class="foo">
    <div class="bar">xxxx</div>
</div>

Do have any idea how to make this work? Or maybe how to create