@rizom/site-rizom-ai 0.2.0-alpha.264 → 0.2.0-alpha.266

package/dist/index.js

@@ -39062,9 +39062,11 @@ var story_default = `/* The story pages: chapters beside one drawing, under the
    before the opening in the chapters column and sticks at the figure's centre
    line down the whole story (the story is a size container, so nothing in it
    can be fixed to the screen). It stays while the opening is read, an answer
-   included, and the words scroll past it. Once the reading has moved the
-   figure on, it draws into its centre point and the figure's first drawing
-   opens out of that same point; back up the page, the other way round. */
+   included, and the words scroll past it. The handover to the figure follows
+   the scroll (--handover, set by the runtime from the science's top on the
+   screen): as the science comes up the network draws into its centre point,
+   and past the reading line the figure's first drawing opens out of that same
+   point; scrolling back runs it backwards. */
 @media not all and (max-width: 60rem) {
   /* The words are the room's column (the kit scrolls it within the screen);
      the bar and the opening's 4rem of padding above and below stay clear, so
@@ -39085,26 +39087,53 @@ var story_default = `/* The story pages: chapters beside one drawing, under the
       100cqi - max(0px, (100cqi - 80rem) / 2) - clamp(1rem, 5vw, 5rem) -
         var(--words) - var(--words-gap) - clamp(1rem, 6vw, 7rem)
     );
-    /* Back from the point, lit at once. */
-    transition: opacity 0.3s ease;
   }
   :where(.chapters) > .net-layer > * {
     translate: 0 -50%;
-    transition: scale 1.2s cubic-bezier(0.3, 0.7, 0.2, 1);
+    scale: calc(1 - clamp(0, var(--handover, 0), 1));
   }
-  .story:has(.figure:not([data-stage="0"])) :where(.chapters) > .net-layer > * {
-    scale: 0;
-  }
-  .story:has(.figure:not([data-stage="0"])) :where(.chapters) > .net-layer,
-  .story:has(.figure:not([data-stage="0"])) .net-leads {
-    opacity: 0;
+  .net-leads {
+    opacity: calc(1 - clamp(0, var(--handover, 0) * 2, 1));
+  }
+  /* The figure's first drawing opens out of the point the network drew into;
+     the figure draws back into the point as the Asked-before chapter arrives
+     with its own drawing, and opens again as the chapter after it does. */
+  .living-org .o-box {
+    scale: min(
+      clamp(0, var(--handover, 0) - 1, 1),
+      max(
+        1 - clamp(0, var(--asked, 0), 1),
+        clamp(0, (var(--leaving, 0) - 1) * 2, 1)
+      )
+    );
   }
-  /* Lit while it draws in; out at the point. */
-  .story:has(.figure:not([data-stage="0"])) :where(.chapters) > .net-layer {
-    transition: opacity 0.6s ease 0.6s;
+  /* The Asked-before chapter's drawing holds the figure's centre line while
+     the chapter is read: first in the chapter's flow, so it is at the line
+     from the moment the chapter reaches it. It opens out of the point as the
+     chapter arrives, in half the line's distance so a short chapter still
+     shows it whole, and draws back in as the next chapter does. */
+  .asked > .net-layer {
+    position: sticky;
+    order: -1;
+    top: calc(
+      var(--bar-height, 4.6rem) + (100svh - var(--bar-height, 4.6rem)) / 2
+    );
+    left: auto;
+    right: auto;
+    height: 0;
+    margin-left: calc(100% + var(--words-gap));
+    width: calc(
+      100cqi - max(0px, (100cqi - 80rem) / 2) - clamp(1rem, 5vw, 5rem) -
+        var(--words) - var(--words-gap) - clamp(1rem, 6vw, 7rem)
+    );
+    translate: none;
   }
-  .net-leads {
-    transition: opacity 0.6s ease;
+  .asked > .net-layer > * {
+    translate: 0 -50%;
+    scale: calc(
+      clamp(0, (var(--asked, 0) - 1) * 2, 1) *
+        (1 - clamp(0, var(--leaving, 0), 1))
+    );
   }
 }
 .net-svg {
@@ -39723,22 +39752,8 @@ var story_default = `/* The story pages: chapters beside one drawing, under the
   color: var(--color-text-muted);
   quotes: "\u201C" "\u201D";
 }
-/* The chapter's drawing stands where the organism stood, beside the words,
-   and the organism steps aside while the chapter is read. */
-.asked .net-layer {
-  top: 50%;
-  translate: 0 -50%;
-  left: calc(100% + var(--words-gap));
-  right: auto;
-  width: min(
-    calc(100svh - var(--bar-height, 4.6rem) - 2rem),
-    calc(100cqi - var(--words) - var(--words-gap) - clamp(1rem, 6vw, 7rem))
-  );
-}
-.story.is-asked .figure {
-  opacity: 0;
-  transition: opacity 0.6s ease;
-}
+/* The chapter's drawing stands where the organism stood, beside the words
+   (placed in the wide-screen block above; on a phone it takes the strip). */
 /* The Ask room's lead layer (the room script draws into it; the kit styles
    the leads): leads join words to the drawing across the page, so the
    viewport is their frame. On a phone the opening's drawing joins the open
@@ -40487,11 +40502,7 @@ var livingOrganism = organism({
     ...Object.fromEntries(economy.map((_2, i) => [`E${i + 1}`, i % 3 === 0 ? "lantern" : ""]))
   },
   stages: [
-    {
-      T1: [C3, 300, 0, 0],
-      T2: [C3, 300, 0, 0],
-      T3: [C3, 300, 0, 0]
-    },
+    {},
     {
       L: [C3, 300, 8, 1],
       T1: at(team2[0], 6),
@@ -41874,15 +41885,32 @@ function readingLine(viewportHeight, stripBottom) {
   const beside = 0.45;
   return stripBottom === null ? viewportHeight * beside : stripBottom + 1;
 }
+function handoverProgress(nextTop, scrolled, viewportHeight, line) {
+  if (nextTop > line) {
+    return scrolled <= 0 ? 0 : scrolled / (scrolled + nextTop - line);
+  }
+  const span = viewportHeight - line;
+  return span <= 0 ? 2 : 1 + Math.min(1, (line - nextTop) / span);
+}
+function arrivalProgress(top, viewportHeight, line) {
+  const span = viewportHeight - line;
+  if (span <= 0)
+    return top <= line ? 2 : 0;
+  return Math.min(2, Math.max(0, (viewportHeight - top) / span));
+}
 var storyRuntimeScript = ASK_ROOM_SCRIPT + `(function () {
   ${currentChapter.toString()}
   ${readingLine.toString()}
+  ${handoverProgress.toString()}
+  ${arrivalProgress.toString()}
   function init() {
     var story = document.querySelector(".story");
     if (!story) return;
     var chapters = Array.prototype.slice.call(story.querySelectorAll(".chapter"));
     if (!chapters.length) return;
     var figure = story.querySelector(".figure");
+    // The chapter that takes the figure's place with its own drawing, and the one after it.
+    var lights = chapters.findIndex(function (chapter) { return chapter.hasAttribute("data-lights-network"); });
     var stageCount = figure ? Number(figure.dataset.stages || chapters.length) : chapters.length;
     var rail = document.querySelector(".rail");
     var railNodes = [];
@@ -41929,6 +41957,11 @@ var storyRuntimeScript = ASK_ROOM_SCRIPT + `(function () {
       var current = currentChapter(tops, line);
       var stage = currentChapter(tops, line, stageCount);
       if (figure) figure.dataset.stage = String(stage);
+      if (tops.length > 1) story.style.setProperty("--handover", handoverProgress(tops[1], scrollY, innerHeight, line).toFixed(4));
+      if (lights >= 0) {
+        story.style.setProperty("--asked", arrivalProgress(tops[lights], innerHeight, line).toFixed(4));
+        story.style.setProperty("--leaving", (lights + 1 < tops.length ? arrivalProgress(tops[lights + 1], innerHeight, line) : 0).toFixed(4));
+      }
       chapters.forEach(function (chapter, i) { chapter.classList.toggle("is-current", i === current); });
       // A chapter that lights the network keeps the live drawing in view while it is read.
       story.classList.toggle("is-asked", !!(chapters[current] && chapters[current].hasAttribute("data-lights-network")));
@@ -57982,4 +58015,4 @@ export {
   workSections
 };
 
-//# debugId=5C42B2A5AC99CE6264756E2164756E21
+//# debugId=B1F5BE6FAAA7D59664756E2164756E21