/* index of each <ruby> among its siblings; rt inherits it */
ruby { --i: 0; }
@supports (order: sibling-index()) {
    ruby { --i: sibling-index(); }
}
/* fallback (generate up to the longest paragraph, e.g. with a Sass @for):
   ruby:nth-of-type(1) { --i: 1; } ruby:nth-of-type(2) { --i: 2; } ... */

rt {
    animation: summon 1s ease-out both;
    animation-delay: calc(var(--i) * 50ms);
    /* two tiny glints drawn as gradients, so they never affect layout */
    background:
        radial-gradient(circle, #fff 0 .06em, #ffd86b .1em, transparent .18em) no-repeat,
        radial-gradient(circle, #fff 0 .05em, #d6b8ff .09em, transparent .16em) no-repeat;
    background-size: 0 0, 0 0;
    background-position: 10% 30%, 90% 60%;
}
@keyframes summon {
    0%   { opacity: 0; letter-spacing: .5em; filter: blur(4px) brightness(3); }
    40%  { opacity: 1; letter-spacing: .05em; filter: blur(0) brightness(1.6);
           text-shadow: 0 0 3px #fff, 0 0 8px #ffd86b, 0 0 16px #b48cff;
           background-size: .4em .4em, .3em .3em; background-position: 0% 0%, 100% 20%; }
    100% { opacity: 1; letter-spacing: normal; filter: none; text-shadow: none;
           background-size: 0 0, 0 0; background-position: -10% -20%, 110% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    rt { animation: none; background: none; }
}