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

package/dist/index.js

@@ -39058,11 +39058,15 @@ var story_default = `/* The story pages: chapters beside one drawing, under the
   width: min(100%, calc(100svh - var(--bar-height, 4.6rem) - 2rem));
   aspect-ratio: 1;
 }
-/* On a wide screen the opening's drawing keeps its place beside the words
-   while the opening is read, an answer included, and leaves with the opening;
-   it fades once the reading has moved the figure on, as on a phone. In flow
-   with no height, so the words do not move; its width is the room right of
-   the words, as the absolute layer's was. */
+/* On a wide screen the opening's drawing holds the figure's place: it stands
+   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. 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
@@ -39070,31 +39074,30 @@ var story_default = `/* The story pages: chapters beside one drawing, under the
   .chapter--opening .opening__words {
     --ask-column-clear: calc(8rem + var(--bar-height, 4.6rem));
   }
-  :where(.chapter--opening) > .net-layer {
+  :where(.chapters) > .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(var(--words) + var(--words-gap));
     width: calc(
       100cqi - max(0px, (100cqi - 80rem) / 2) - clamp(1rem, 5vw, 5rem) -
         var(--words) - var(--words-gap) - clamp(1rem, 6vw, 7rem)
     );
-    transition: opacity 0.6s ease;
   }
-  :where(.chapter--opening) > .net-layer > * {
+  :where(.chapters) > .net-layer > * {
     translate: 0 -50%;
-  }
-  .story:has(.figure:not([data-stage="0"]))
-    :where(.chapter--opening)
-    > .net-layer,
-  .story:has(.figure:not([data-stage="0"])) .net-leads {
-    opacity: 0;
+    scale: calc(1 - clamp(0, var(--handover, 0), 1));
   }
   .net-leads {
-    transition: opacity 0.6s ease;
+    opacity: calc(1 - clamp(0, var(--handover, 0) * 2, 1));
+  }
+  /* The figure's first drawing opens out of the point the network drew into. */
+  .living-org .o-box {
+    scale: clamp(0, var(--handover, 0) - 1, 1);
   }
 }
 .net-svg {
@@ -39734,11 +39737,9 @@ var story_default = `/* The story pages: chapters beside one drawing, under the
    viewport is their frame. On a phone the opening's drawing joins the open
    conversation as the first item of its scroll, a slot holding its place. */
 .net-leads {
-  position: fixed;
+  position: absolute;
   inset: 0;
   z-index: 2;
-  width: 100vw;
-  height: 100vh;
   overflow: visible;
   pointer-events: none;
 }
@@ -41862,9 +41863,17 @@ 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);
+}
 var storyRuntimeScript = ASK_ROOM_SCRIPT + `(function () {
   ${currentChapter.toString()}
   ${readingLine.toString()}
+  ${handoverProgress.toString()}
   function init() {
     var story = document.querySelector(".story");
     if (!story) return;
@@ -41917,6 +41926,7 @@ 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));
       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")));
@@ -55235,6 +55245,7 @@ function StoryPage({
       /* @__PURE__ */ jsx49(ReadingThread, {}),
       /* @__PURE__ */ jsxs35("div", {
         className: "story",
+        ...{ [ASK_ROOM_ATTRIBUTE]: "" },
         children: [
           /* @__PURE__ */ jsx49("div", {
             className: "chapters",
@@ -56694,67 +56705,8 @@ function NetworkLayer({
 function Opening(data) {
   const headingLead = data.headingLead ?? DEFAULT_COPY.headingLead;
   const lede = data.lede ?? DEFAULT_COPY.lede;
-  return /* @__PURE__ */ jsxs39("section", {
-    id: "hero",
-    className: "chapter chapter--opening",
-    "data-title": "Top",
-    ...data.askBox ? { [ASK_ROOM_ATTRIBUTE]: "" } : {},
+  return /* @__PURE__ */ jsxs39(Fragment21, {
     children: [
-      /* @__PURE__ */ jsxs39("div", {
-        className: "opening__words",
-        ...data.askBox ? { [ASK_COLUMN_ATTRIBUTE]: "" } : {},
-        children: [
-          data.kicker && /* @__PURE__ */ jsx56("p", {
-            className: "eyebrow",
-            children: data.kicker
-          }),
-          /* @__PURE__ */ jsxs39("h1", {
-            children: [
-              headingLead,
-              data.headingAccent && /* @__PURE__ */ jsxs39(Fragment21, {
-                children: [
-                  " ",
-                  /* @__PURE__ */ jsx56("em", {
-                    children: data.headingAccent
-                  })
-                ]
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx56("p", {
-            className: "lede",
-            children: lede
-          }),
-          data.askBox ? /* @__PURE__ */ jsxs39("div", {
-            className: "ask",
-            children: [
-              /* @__PURE__ */ jsx56(AskBoxHost, {
-                prefix: "opening",
-                placeholder: data.prompt ?? undefined
-              }),
-              data.topics.length > 0 && /* @__PURE__ */ jsx56("ul", {
-                className: "ask__topics",
-                "aria-label": "Suggested questions",
-                children: data.topics.map((topic) => /* @__PURE__ */ jsx56("li", {
-                  children: /* @__PURE__ */ jsx56("button", {
-                    type: "button",
-                    "data-atlas-fill": topic,
-                    children: topic
-                  })
-                }, topic))
-              }),
-              /* @__PURE__ */ jsx56("script", {
-                src: ASK_BOX_SCRIPT_PATH,
-                defer: true
-              })
-            ]
-          }) : data.ctaHref && data.ctaLabel && /* @__PURE__ */ jsx56("a", {
-            className: "opening__door",
-            href: data.ctaHref,
-            children: data.ctaLabel
-          })
-        ]
-      }),
       /* @__PURE__ */ jsx56(NetworkLayer, {
         ...placeNetwork(data),
         lendable: data.askBox
@@ -56763,6 +56715,66 @@ function Opening(data) {
         className: "net-leads",
         ...{ [ASK_LEADS_ATTRIBUTE]: "" },
         "aria-hidden": "true"
+      }),
+      /* @__PURE__ */ jsx56("section", {
+        id: "hero",
+        className: "chapter chapter--opening",
+        "data-title": "Top",
+        children: /* @__PURE__ */ jsxs39("div", {
+          className: "opening__words",
+          ...data.askBox ? { [ASK_COLUMN_ATTRIBUTE]: "" } : {},
+          children: [
+            data.kicker && /* @__PURE__ */ jsx56("p", {
+              className: "eyebrow",
+              children: data.kicker
+            }),
+            /* @__PURE__ */ jsxs39("h1", {
+              children: [
+                headingLead,
+                data.headingAccent && /* @__PURE__ */ jsxs39(Fragment21, {
+                  children: [
+                    " ",
+                    /* @__PURE__ */ jsx56("em", {
+                      children: data.headingAccent
+                    })
+                  ]
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx56("p", {
+              className: "lede",
+              children: lede
+            }),
+            data.askBox ? /* @__PURE__ */ jsxs39("div", {
+              className: "ask",
+              children: [
+                /* @__PURE__ */ jsx56(AskBoxHost, {
+                  prefix: "opening",
+                  placeholder: data.prompt ?? undefined
+                }),
+                data.topics.length > 0 && /* @__PURE__ */ jsx56("ul", {
+                  className: "ask__topics",
+                  "aria-label": "Suggested questions",
+                  children: data.topics.map((topic) => /* @__PURE__ */ jsx56("li", {
+                    children: /* @__PURE__ */ jsx56("button", {
+                      type: "button",
+                      "data-atlas-fill": topic,
+                      children: topic
+                    })
+                  }, topic))
+                }),
+                /* @__PURE__ */ jsx56("script", {
+                  src: ASK_BOX_SCRIPT_PATH,
+                  defer: true
+                })
+              ]
+            }) : data.ctaHref && data.ctaLabel && /* @__PURE__ */ jsx56("a", {
+              className: "opening__door",
+              href: data.ctaHref,
+              children: data.ctaLabel
+            })
+          ]
+        })
       })
     ]
   });
@@ -57968,4 +57980,4 @@ export {
   workSections
 };
 
-//# debugId=8D4FE8A38066E70164756E2164756E21
+//# debugId=213DF796E82D7BB964756E2164756E21