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

package/dist/index.js

@@ -39095,9 +39095,45 @@ var story_default = `/* The story pages: chapters beside one drawing, under the
   .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'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: clamp(0, var(--handover, 0) - 1, 1);
+    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)
+      )
+    );
+  }
+  /* 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;
+  }
+  .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 {
@@ -39716,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
@@ -41870,16 +41892,25 @@ function handoverProgress(nextTop, scrolled, viewportHeight, 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 = [];
@@ -41927,6 +41958,10 @@ var storyRuntimeScript = ASK_ROOM_SCRIPT + `(function () {
       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")));
@@ -57980,4 +58015,4 @@ export {
   workSections
 };
 
-//# debugId=213DF796E82D7BB964756E2164756E21
+//# debugId=B1F5BE6FAAA7D59664756E2164756E21