From 886cf4b5c44faf3c4a9523732e9397b602f3f2e6 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 21 May 2026 16:36:00 +0300
Subject: [PATCH] feat: add spring slide animation for section content

---
 src/shared/styles/theme.css | 40 +++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index b091140..eec0d96 100644
--- a/src/shared/styles/theme.css
+++ b/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);
+  }
+}