@@ -105,6 +105,46 @@
   animation: doodle-float 6s ease-in-out infinite alternate;
 }
 
+/* Scroll-driven parallax for doodles: browsers that support it get depth as
+   they scroll, others simply show the doodles still. */
+@keyframes doodle-parallax {
+  from { transform: translateY(calc(var(--shift, 24) * 1px)); }
+  to { transform: translateY(calc(var(--shift, 24) * -1px)); }
+}
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .doodle-parallax {
+      animation: doodle-parallax linear both;
+      animation-timeline: view();
+    }
+  }
+}
+
+/* Hero 3D stack idle float */
+@keyframes hero-stack-float {
+  from { transform: translateY(0); }
+  to { transform: translateY(-10px); }
+}
+.hero-stack-float {
+  animation: hero-stack-float 7s ease-in-out infinite alternate;
+}
+
+/* Interactive doodles */
+@keyframes play-wiggle {
+  0%, 100% { transform: rotate(0) scale(1); }
+  25% { transform: rotate(-12deg) scale(1.18); }
+  60% { transform: rotate(9deg) scale(1.14); }
+}
+@keyframes play-burst {
+  from { transform: translate(0, 0) scale(1); opacity: 0.95; }
+  to { transform: translate(var(--bx), var(--by)) scale(0.3); opacity: 0; }
+}
+@keyframes play-caption {
+  0% { opacity: 0; transform: translateY(6px) rotate(-3deg); }
+  12%, 80% { opacity: 1; transform: translateY(0) rotate(-3deg); }
+  100% { opacity: 0; transform: translateY(-4px) rotate(-3deg); }
+}
+
 /* ASCII intro failsafe: only applies if JavaScript never starts the intro,
    so visitors without JS are never stuck behind it. */
 @keyframes ascii-intro-failsafe {