src/entities/Section/ui/SectionAccordion/SectionAccordion.test.tsx

@@ -55,10 +55,5 @@ describe('SectionAccordion', () => {
       render(<SectionAccordion {...activeProps} />);
       expect(screen.queryByRole('link')).not.toBeInTheDocument();
     });
-
-    it('content wrapper has section-content class', () => {
-      const { container } = render(<SectionAccordion {...activeProps} />);
-      expect(container.querySelector('.section-content')).toBeInTheDocument();
-    });
   });
 });

src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx

@@ -39,13 +39,13 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
     <section id={id} className="scroll-mt-8">
       {isActive ? (
         <div className="mb-6 sm:mb-12">
-          <ViewTransitionWrapper name="section-content">
+          <ViewTransitionWrapper name="section-title">
-            <div className="mb-6 sm:mb-16">
+            <div className="mb-6 sm:mb-12">
               <h1 className="font-heading font-black text-xl sm:text-section-title leading-[1.2] mb-0">{heading}</h1>
             </div>
           </ViewTransitionWrapper>
           <ViewTransitionWrapper name="section-body">
-            <div className="section-content">{children}</div>
+            <div>{children}</div>
           </ViewTransitionWrapper>
         </div>
       ) : (

src/shared/styles/theme.css

@@ -341,14 +341,14 @@
 }
 
 /* Cross-section view transition (navigation between sections) */
-::view-transition-old(section-content) {
+::view-transition-old(section-title) {
   animation-name: section-fade-out;
   animation-duration: var(--duration-normal);
   animation-timing-function: var(--ease-default);
   animation-fill-mode: both;
 }
 
-::view-transition-new(section-content) {
+::view-transition-new(section-title) {
   animation-name: section-fade-in;
   animation-duration: var(--duration-spring);
   animation-timing-function: var(--ease-spring);
@@ -377,6 +377,13 @@
   }
 }
 
+/* Disable group geometry interpolation — OLD and NEW live at different scroll
+ * positions, so morphing the container drags the slide-in across the viewport.
+ * Let old/new each animate at their own positions instead. */
+::view-transition-group(section-body) {
+  animation: none;
+}
+
 /* Section body slide-in from right */
 ::view-transition-old(section-body) {
   animation-name: section-body-out;