Add raven animation feature with SVG assets and Three.js integration

- Introduced a new SVG asset for the raven silhouette.
- Updated CSS to position and style the raven animation layer.
- Implemented `RavenBurstCanvas` and `RavenFlock` components for rendering animated ravens using Three.js.
- Enhanced `GateTransitProvider` to manage raven animation state and integrate with existing transition logic.
- Added `ravenFx` type and default values for controlling raven animation properties.
- Adjusted transform origins and z-index for improved visual alignment during transitions.

src/vfx/RavenBurstCanvas.tsx

@@ -0,0 +1,32 @@
+import { Suspense, type MutableRefObject, type RefObject } from 'react'
+import { Canvas } from '@react-three/fiber'
+import type { RavenFx } from './ravenFx'
+import { RavenFlock } from './RavenFlock'
+
+type RavenBurstCanvasProps = {
+  fxRef: MutableRefObject<RavenFx>
+  wrapRef: RefObject<HTMLDivElement | null>
+}
+
+export function RavenBurstCanvas({ fxRef, wrapRef }: RavenBurstCanvasProps) {
+  return (
+    <div className="gate-transit__ravens" ref={wrapRef}>
+      <Canvas
+        dpr={[1, 1.25]}
+        gl={{
+          alpha: true,
+          antialias: false,
+          powerPreference: 'high-performance',
+          stencil: false,
+          depth: true,
+        }}
+        camera={{ position: [0, 0, 5.2], fov: 42, near: 0.05, far: 40 }}
+        style={{ background: 'transparent' }}
+      >
+        <Suspense fallback={null}>
+          <RavenFlock fx={fxRef} />
+        </Suspense>
+      </Canvas>
+    </div>
+  )
+}