fix: DrillOrbit fades in/out at path edges, DrillBitSpinner uses radial mask instead of hard clip

Former-commit-id: 3aea27f3e17984634206ca817d074b18e712933e

components/ui/decorations/DrillTeeth.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+/**
+ * DrillTeeth
+ *
+ * Abstract, minimalist section divider inspired by HDD bore paths.
+ * Not literal teeth — instead, a subtle organic wave that hints at
+ * earth strata displaced by subsurface drilling.
+ *
+ * Two gentle asymmetric curves create a refined, modern transition
+ * between sections. Think Stripe/Linear, not construction site.
+ *
+ * Usage: Place inside a section with `relative overflow-hidden`.
+ * The SVG renders outside the box via translate, creating overlap.
+ */
+
+interface DrillTeethProps {
+  /** Which edge of the parent section */
+  position?: 'top' | 'bottom';
+  /** Fill color — should match the CURRENT section's background */
+  fill?: string;
+  className?: string;
+}
+
+export function DrillTeeth({
+  position = 'bottom',
+  fill = 'currentColor',
+  className = '',
+}: DrillTeethProps) {
+  const isTop = position === 'top';
+
+  return (
+    <div
+      className={`absolute left-0 right-0 w-full pointer-events-none z-20 ${
+        isTop ? 'top-0 -translate-y-[99%]' : 'bottom-0 translate-y-[99%]'
+      } ${className}`}
+      aria-hidden="true"
+      style={{ lineHeight: 0 }}
+    >
+      <svg
+        viewBox="0 0 1440 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="none"
+        className="w-full h-[clamp(16px,3vw,48px)] block"
+        style={isTop ? { transform: 'scaleY(-1)' } : undefined}
+      >
+        {/* Primary curve — gentle asymmetric wave */}
+        <path
+          d="M0,48 L0,28 C120,36 240,6 480,12 C720,18 840,42 1080,24 C1200,16 1320,32 1440,28 L1440,48 Z"
+          fill={fill}
+        />
+        {/* Secondary subtle offset — adds depth like a geological layer */}
+        <path
+          d="M0,48 L0,36 C180,42 360,16 600,22 C840,28 960,44 1200,32 C1320,26 1400,38 1440,36 L1440,48 Z"
+          fill={fill}
+          opacity="0.6"
+        />
+      </svg>
+    </div>
+  );
+}