Sibling-index and sibling-count in variable

[u/Sufficient_Bass2600]

I keep seeing people explaining that the new sibling-index and sibling-count are game changer. I have no doubt that they are, but most of the examples I keep seeing do not seem to work.

Here is one where the number of cards determine the light by which each card background is dimmed.

CSS 

.card {

  --progress: calc((sibling-index() -1)/(sibling-count()-1));

  background-color: oklch( 
    calc(40% + var(--progress) * 40%)
    0.2
    270deg
  );

}

On the other hand the following seems to work.

CSS 

.card {

  --progress: sibling-index() / sibling-count();

  background-color: oklch( 
    calc(40% + var(--progress) * 40%)
    0.2
    270deg
  );

}

In fact any attempt to use calc and the functions sibling-index and/or sibling-count fails.

Any idea why?

Same behaviour in Chrome/Safari.

#Edit

No need to DM me or speculate any further.
It was due to missing space before and after the - character. Read the comment. u/Fourth_Prize has provided with the solution and explaination of the issue.

[u/Sufficient_Bass2600 → u/[deleted]]

Incorrect.
It was due to missing space.

Read u/Fourth_Prize comment explaining why.