fix scroll animation: named view-timeline on SVG root

Individual view() timelines tracked each element's own visibility,
causing all elements to animate simultaneously. Named timeline
--diagram on the SVG root makes all children reference the same
scroll position, revealing elements sequentially as the diagram
scrolls into the viewport.

content/uploads/2026/03/contributor-decay.svg

@@ -12,35 +12,36 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+svg { view-timeline: --diagram block; }
 .anim { opacity: 0; }
-.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
-.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 2% entry 22%; }
-.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; }
-.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; }
-.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 11% entry 31%; }
-.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 14% entry 34%; }
-.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 17% entry 37%; }
-.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; }
-.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 22% entry 42%; }
-.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 25% entry 45%; }
-.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 28% entry 48%; }
-.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 31% entry 51%; }
-.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 34% entry 54%; }
-.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 37% entry 57%; }
-.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; }
-.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 42% entry 62%; }
-.d16 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 45% entry 65%; }
-.d17 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; }
-.d18 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 51% entry 71%; }
-.d19 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 54% entry 74%; }
-.d20 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 57% entry 77%; }
-.d21 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; }
-.d22 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 62% entry 82%; }
-.d23 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; }
-.d24 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 68% entry 88%; }
-.d25 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; }
-.d26 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 74% entry 94%; }
-.d27 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 77% entry 97%; }
+.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 5%; }
+.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 3% entry 8%; }
+.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 7% entry 12%; }
+.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 10% entry 15%; }
+.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 14% entry 19%; }
+.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 17% entry 22%; }
+.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 21% entry 26%; }
+.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 25% entry 30%; }
+.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 28% entry 33%; }
+.d9 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 32% entry 37%; }
+.d10 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 35% entry 40%; }
+.d11 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 39% entry 44%; }
+.d12 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 42% entry 47%; }
+.d13 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 46% entry 51%; }
+.d14 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 50% entry 55%; }
+.d15 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 53% entry 58%; }
+.d16 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 57% entry 62%; }
+.d17 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 60% entry 65%; }
+.d18 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 64% entry 69%; }
+.d19 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 67% entry 72%; }
+.d20 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 71% entry 76%; }
+.d21 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 75% entry 80%; }
+.d22 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 78% entry 83%; }
+.d23 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 82% entry 87%; }
+.d24 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 85% entry 90%; }
+.d25 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 89% entry 94%; }
+.d26 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 92% entry 97%; }
+.d27 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 96% entry 100%; }
 @supports not (animation-timeline: view()) {
   .anim { opacity: 1; }
 }

content/uploads/2026/03/eight-eyes.svg

@@ -9,23 +9,24 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+svg { view-timeline: --diagram block; }
 .anim { opacity: 0; }
-.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
-.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; }
-.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 10% entry 30%; }
-.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 15% entry 35%; }
-.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; }
-.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 25% entry 45%; }
-.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 30% entry 50%; }
-.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; }
-.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; }
-.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 45% entry 65%; }
-.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 50% entry 70%; }
-.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 55% entry 75%; }
-.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; }
-.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; }
-.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 70% entry 90%; }
-.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 75% entry 95%; }
+.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 6%; }
+.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 6% entry 12%; }
+.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 12% entry 18%; }
+.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 18% entry 24%; }
+.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 25% entry 31%; }
+.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 31% entry 37%; }
+.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 37% entry 43%; }
+.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 43% entry 49%; }
+.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 50% entry 56%; }
+.d9 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 56% entry 62%; }
+.d10 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 62% entry 68%; }
+.d11 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 68% entry 74%; }
+.d12 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 75% entry 81%; }
+.d13 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 81% entry 87%; }
+.d14 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 87% entry 93%; }
+.d15 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 93% entry 99%; }
 @supports not (animation-timeline: view()) {
   .anim { opacity: 1; }
 }

content/uploads/2026/03/load-bearing.svg

@@ -9,16 +9,17 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+svg { view-timeline: --diagram block; }
 .anim { opacity: 0; }
-.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
-.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; }
-.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 17% entry 37%; }
-.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 26% entry 46%; }
-.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; }
-.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 44% entry 64%; }
-.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 53% entry 73%; }
-.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 62% entry 82%; }
-.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; }
+.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 11%; }
+.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 11% entry 22%; }
+.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 22% entry 33%; }
+.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 33% entry 44%; }
+.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 44% entry 55%; }
+.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 55% entry 66%; }
+.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 66% entry 77%; }
+.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 77% entry 88%; }
+.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 88% entry 99%; }
 @supports not (animation-timeline: view()) {
   .anim { opacity: 1; }
 }

content/uploads/2026/03/mystic-pronouns.svg

@@ -12,36 +12,37 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+svg { view-timeline: --diagram block; }
 .anim { opacity: 0; }
-.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
-.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 2% entry 22%; }
-.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; }
-.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; }
-.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 11% entry 31%; }
-.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 13% entry 33%; }
-.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; }
-.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 19% entry 39%; }
-.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 22% entry 42%; }
-.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 24% entry 44%; }
-.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 27% entry 47%; }
-.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 30% entry 50%; }
-.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 33% entry 53%; }
-.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; }
-.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 38% entry 58%; }
-.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 41% entry 61%; }
-.d16 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 44% entry 64%; }
-.d17 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 46% entry 66%; }
-.d18 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 49% entry 69%; }
-.d19 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 52% entry 72%; }
-.d20 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 55% entry 75%; }
-.d21 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 57% entry 77%; }
-.d22 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; }
-.d23 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 63% entry 83%; }
-.d24 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 66% entry 86%; }
-.d25 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 68% entry 88%; }
-.d26 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; }
-.d27 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 74% entry 94%; }
-.d28 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 77% entry 97%; }
+.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 5%; }
+.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 3% entry 8%; }
+.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 6% entry 11%; }
+.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 10% entry 15%; }
+.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 13% entry 18%; }
+.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 17% entry 22%; }
+.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 20% entry 25%; }
+.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 24% entry 29%; }
+.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 27% entry 32%; }
+.d9 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 31% entry 36%; }
+.d10 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 34% entry 39%; }
+.d11 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 37% entry 42%; }
+.d12 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 41% entry 46%; }
+.d13 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 44% entry 49%; }
+.d14 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 48% entry 53%; }
+.d15 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 51% entry 56%; }
+.d16 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 55% entry 60%; }
+.d17 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 58% entry 63%; }
+.d18 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 62% entry 67%; }
+.d19 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 65% entry 70%; }
+.d20 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 68% entry 73%; }
+.d21 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 72% entry 77%; }
+.d22 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 75% entry 80%; }
+.d23 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 79% entry 84%; }
+.d24 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 82% entry 87%; }
+.d25 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 86% entry 91%; }
+.d26 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 89% entry 94%; }
+.d27 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 93% entry 98%; }
+.d28 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 96% entry 100%; }
 @supports not (animation-timeline: view()) {
   .anim { opacity: 1; }
 }

content/uploads/2026/03/naming-dance.svg

@@ -12,12 +12,13 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+svg { view-timeline: --diagram block; }
 .anim { opacity: 0; }
-.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
-.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; }
-.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 32% entry 52%; }
-.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; }
-.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 64% entry 84%; }
+.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 20%; }
+.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 20% entry 40%; }
+.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 40% entry 60%; }
+.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 60% entry 80%; }
+.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 80% entry 100%; }
 @supports not (animation-timeline: view()) {
   .anim { opacity: 1; }
 }

content/uploads/2026/03/one-multitudes.svg

@@ -9,18 +9,19 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+svg { view-timeline: --diagram block; }
 .anim { opacity: 0; }
-.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
-.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 7% entry 27%; }
-.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 14% entry 34%; }
-.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 21% entry 41%; }
-.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 29% entry 49%; }
-.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 36% entry 56%; }
-.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 43% entry 63%; }
-.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 50% entry 70%; }
-.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 58% entry 78%; }
-.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; }
-.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 72% entry 92%; }
+.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 9%; }
+.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 9% entry 18%; }
+.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 18% entry 27%; }
+.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 27% entry 36%; }
+.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 36% entry 45%; }
+.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 45% entry 54%; }
+.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 54% entry 63%; }
+.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 63% entry 72%; }
+.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 72% entry 81%; }
+.d9 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 81% entry 90%; }
+.d10 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 90% entry 99%; }
 @supports not (animation-timeline: view()) {
   .anim { opacity: 1; }
 }

content/uploads/2026/03/pronoun-masks.svg

@@ -9,11 +9,12 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+svg { view-timeline: --diagram block; }
 .anim { opacity: 0; }
-.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
-.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; }
-.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; }
-.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; }
+.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 25%; }
+.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 25% entry 50%; }
+.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 50% entry 75%; }
+.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 75% entry 100%; }
 @supports not (animation-timeline: view()) {
   .anim { opacity: 1; }
 }

content/uploads/2026/03/royal-we-unmasked.svg

@@ -12,12 +12,13 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
+svg { view-timeline: --diagram block; }
 .anim { opacity: 0; }
-.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; }
-.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; }
-.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 32% entry 52%; }
-.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; }
-.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 64% entry 84%; }
+.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 20%; }
+.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 20% entry 40%; }
+.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 40% entry 60%; }
+.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 60% entry 80%; }
+.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 80% entry 100%; }
 @supports not (animation-timeline: view()) {
   .anim { opacity: 1; }
 }