feat(story): build procedural notebook animation

app/globals.css

@@ -905,6 +905,11 @@ textarea {
   width: 100%;
   height: 100%;
 }
+.notebook-story-canvas > div:first-child,
+.notebook-story-canvas canvas {
+  pointer-events: none;
+}
+
 .notebook-story-static-content {
   width: min(1080px, 100%);
   margin: 0 auto;
@@ -919,6 +924,7 @@ textarea {
 
 .notebook-screen-surface {
   width: min(660px, 68vw);
+  pointer-events: auto;
   min-width: 280px;
   overflow: hidden;
   border-radius: 2px;
@@ -1036,7 +1042,8 @@ textarea {
   transition:
     color 180ms ease,
     border-color 180ms ease,
-    background-color 180ms ease;
+    background-color 180ms ease,
+    transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
 }
 
 .notebook-tab:hover,
@@ -1046,6 +1053,10 @@ textarea {
   color: var(--white);
 }
 
+.notebook-tab[data-cursor-clicking="true"] {
+  transform: scale(0.97);
+}
+
 .notebook-tab-number {
   flex: 0 0 auto;
   color: var(--slash);
@@ -1199,14 +1210,14 @@ textarea {
 
 .notebook-cursor {
   position: absolute;
-  z-index: 1;
+  z-index: 3;
   width: 15px;
   height: 20px;
   border: 2px solid var(--white);
   background: var(--ink);
   box-shadow: 2px 2px 0 var(--slash);
   pointer-events: none;
-  transform: translate(-2px, -2px) rotate(-18deg);
+  transform: translate(-50%, -45%) rotate(-18deg);
   transition:
     width 120ms ease,
     height 120ms ease,
@@ -1296,4 +1307,8 @@ textarea {
     transition: none;
     animation: none;
   }
+
+  .notebook-tab[data-cursor-clicking="true"] {
+    transform: none;
+  }
 }