.animated-diagram-list .animated-paragraph {
  position: relative; }

.animated-diagram-list p span,
.animated-diagram-list *::before,
.animated-diagram-list *::after {
  transition: opacity 0.5s;
  transition-delay: 0.125s; }

.animated-diagram-list span {
  opacity: 0; }
  .animated-diagram-list span[visible] {
    opacity: 1; }

.animated-diagram-list .animated-paragraph *::before {
  opacity: 0; }

.animated-diagram-list .animated-paragraph[visible] span,
.animated-diagram-list .animated-paragraph[visible] *::before {
  opacity: 1; }

.animated-diagram-list .canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-height: 150lvh;
  margin: 0;
  mix-blend-mode: difference;
  z-index: 150; }