Oh boy, that seems quite convoluted.

Well... you really need to compare it to the equivalent vanilla CSS.

This?

  @supports(backdrop-filter: blur(6px)) {
    .card {
      background-color: rgba(0,0,0,0.75);
      // Why would you not also be using backdrop-filter here anyways?
    }
  }

It's more verbose if you have one property sure... but if you do two, tree, or more, all in the @supports rule, it's a big difference.