feat: section open/close animations via ViewTransition and @starting-style

Enable experimental.viewTransition in Next.js config. Wrap active section
in ViewTransitionWrapper so the browser cross-fades between sections on
navigation. Replace animate-fadeIn keyframe with @starting-style + CSS
transition for the initial render enter animation.

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

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

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

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import type { ReactNode } from 'react';
+import { ViewTransitionWrapper } from '$shared/ui';
 
 interface SectionAccordionProps {
   /**
@@ -35,17 +36,19 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
   return (
     <section id={id} className="scroll-mt-8">
       {isActive ? (
-        <div className="mb-12">
-          <div className="mb-16">
-            <h1
-              className="font-heading font-black text-5xl leading-[1.2] mb-0"
-              style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
-            >
-              {number}. {title}
-            </h1>
+        <ViewTransitionWrapper name="section-content">
+          <div className="mb-12">
+            <div className="mb-16">
+              <h1
+                className="font-heading font-black text-5xl leading-[1.2] mb-0"
+                style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
+              >
+                {number}. {title}
+              </h1>
+            </div>
+            <div className="section-content">{children}</div>
           </div>
-          <div className="animate-fadeIn">{children}</div>
-        </div>
+        </ViewTransitionWrapper>
       ) : (
         <Link
           href={href}