asdf

src/styles/base.css

@@ -281,6 +281,18 @@ p { overflow-wrap: break-word; }
   white-space: nowrap; border: 0;
 }
 
+/* Page load: an element rises in after a delay of --i steps (the index in its sequence).
+   Used for the intro of inner pages, in the home hero's vocabulary. */
+.load-rise {
+  opacity: 0;
+  animation: load-rise var(--dur-rise) var(--ease) forwards;
+  animation-delay: calc(var(--delay-rise) + var(--i, 0) * var(--stagger-rise));
+}
+@keyframes load-rise {
+  from { opacity: 0; transform: translateY(0.18em); }
+  to   { opacity: 1; transform: none; }
+}
+
 /* Motion off. No exceptions. */
 @media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
@@ -290,4 +302,5 @@ p { overflow-wrap: break-word; }
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
+  .load-rise { animation: none; opacity: 1; }
 }

src/styles/tokens.css

@@ -125,6 +125,9 @@
   --dur:      240ms;
   --dur-slow: 320ms;
   --dur-hero: 1400ms;
+  --dur-rise: 700ms;      /* a headline line rising in on load */
+  --delay-rise: 240ms;    /* before the first line */
+  --stagger-rise: 160ms;  /* between lines */
 
   /* Chrome */
   --header-height: 4.5rem;