src/shared/styles/theme.css

@@ -84,6 +84,7 @@
   /* === GRID === */
   --grid-gap: var(--space-3);
   --section-content-width: 72rem;
+
   /* === ANIMATION === */
   --ease-default: ease;
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -93,6 +94,7 @@
   --duration-normal: 150ms;
   --duration-slow: 350ms;
   --duration-spring: 220ms;
+  --delay-normal: 200ms;
 }
 
 @theme inline {
@@ -371,3 +373,41 @@
     transform: translateY(0);
   }
 }
+
+/* Section body slide-in from right */
+::view-transition-old(section-body) {
+  animation-name: section-body-out;
+  animation-duration: var(--duration-normal);
+  animation-timing-function: var(--ease-default);
+  animation-fill-mode: both;
+}
+
+::view-transition-new(section-body) {
+  animation-name: section-body-in;
+  animation-duration: var(--duration-spring);
+  animation-timing-function: var(--ease-spring);
+  animation-fill-mode: both;
+  animation-delay: var(--delay-normal);
+}
+
+@keyframes section-body-out {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-12px) scale(0.98);
+  }
+}
+
+@keyframes section-body-in {
+  from {
+    opacity: 0;
+    transform: translateX(48px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}