Inheriting sibling-index() for staggered animation

One primary use case for sibling-index() is staggered animations. In the above example, the images I’m animating aren’t siblings, but their parents are. CSS variables are inherited by default, so I assumed the following code would just work:

.item {
    --i: calc(sibling-index() - 1); /* minus 1 because I don’t want any delay on the first animation. */ 
}

.item .inner {
    animation-delay: calc(var(--i) * 0.1s);
}

Turns out I needed to register the custom property to make this work as expected:

@property --i {
  syntax: "<integer>";
  inherits: true;
  initial-value: 1;
}