src/shared/styles/theme.css

@@ -96,7 +96,6 @@
   --duration-spring: 220ms;
   --delay-normal: 200ms;
   --slide-section-body-in: clamp(1.25rem, 5vw, 3rem);
-  --slide-section-body-out: clamp(0.5rem, 1.5vw, 0.75rem);
 }
 
 @theme inline {
@@ -384,12 +383,13 @@
   animation: none;
 }
 
-/* Section body slide-in from right */
+/* Section body — snap OLD out and slide NEW in. Running an explicit OLD
+ * animation left a visible ghost of the previous section's content sitting
+ * behind the incoming slide; hiding it immediately keeps the transition
+ * clean and prevents the two-content overlap. */
 ::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;
+  animation: none;
+  opacity: 0;
 }
 
 ::view-transition-new(section-body) {
@@ -397,20 +397,11 @@
   animation-duration: var(--duration-spring);
   animation-timing-function: var(--ease-spring);
   animation-fill-mode: both;
+  /* Hold the start-state for this delay before the slide-in begins — gives
+   * the snap-out a beat to register visually before new content arrives. */
   animation-delay: var(--delay-normal);
 }
 
-@keyframes section-body-out {
-  from {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(calc(-1 * var(--slide-section-body-out))) scale(0.98);
-  }
-}
-
 @keyframes section-body-in {
   from {
     opacity: 0;