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

Former-commit-id: 3aea27f3e17984634206ca817d074b18e712933e

components/blocks/CompetenceBentoGrid.tsx

@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 import { StratumLines } from '@/components/ui/decorations/StratumLines';
 import { DrillBitSpinner } from '@/components/ui/decorations/DrillBitSpinner';
+import { DrillTeeth } from '@/components/ui/decorations/DrillTeeth';
 
 interface CompetenceBentoGridProps {
   badge?: string;
@@ -76,8 +77,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
   }
 
   return (
-    <section className="py-24 bg-neutral text-neutral-dark overflow-hidden relative">
-      <div className="container">
+    <section className="py-24 bg-neutral text-neutral-dark relative overflow-hidden">
+      <div className="container relative z-10 px-4">
         <div className="flex flex-col md:flex-row justify-between items-end mb-12">
           <div className="max-w-2xl">
             <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
@@ -176,6 +177,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
       {/* Decorative: abstract earth strata / excavation layers */}
       <StratumLines placement="bottom-left" invert />
       <StratumLines placement="bottom-right" invert />
+      {/* Organic wave divider */}
+      <DrillTeeth position="bottom" fill="var(--color-neutral)" />
     </section>
   );
 }

components/blocks/HeroSection.tsx

@@ -5,6 +5,7 @@ import { Badge, Container, Heading } from '@/components/ui';
 import { Button } from '@/components/ui/Button';
 import { DrillOrbit } from '@/components/ui/decorations/DrillOrbit';
 import { DrillBitSpinner } from '@/components/ui/decorations/DrillBitSpinner';
+import { DrillTeeth } from '@/components/ui/decorations/DrillTeeth';
 
 export interface HeroSectionProps {
   title: string;
@@ -78,6 +79,8 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
         </div>
         {/* Decorative: abstract HDD bore trajectory */}
         <DrillOrbit side="right" />
+        {/* Organic wave divider — displaced earth strata */}
+        <DrillTeeth position="bottom" fill="var(--color-primary-dark)" />
       </section>
     </Reveal>
   );

components/blocks/HeroVideo.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/Button';
 import Image from 'next/image';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useState, useEffect } from 'react';
+import { DrillTeeth } from '@/components/ui/decorations/DrillTeeth';
 
 interface HeroVideoProps {
   data?: any;
@@ -108,6 +109,8 @@ export function HeroVideo(props: HeroVideoProps) {
           </div>
         </motion.div>
       </div>
+      {/* Organic wave divider — displaced earth strata */}
+      <DrillTeeth position="bottom" fill="var(--color-neutral-dark)" className="z-[5]" />
     </div>
   );
 }

components/blocks/ReferencesSlider.tsx

@@ -7,6 +7,7 @@ import Image from 'next/image';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 import { DrillOrbit } from '@/components/ui/decorations/DrillOrbit';
 import { DrillBitSpinner } from '@/components/ui/decorations/DrillBitSpinner';
+import { DrillTeeth } from '@/components/ui/decorations/DrillTeeth';
 
 export interface Reference {
   id: string;
@@ -83,7 +84,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
   };
 
   return (
-    <section className="py-24 bg-neutral-dark text-white overflow-hidden relative select-none">
+    <section className="py-24 bg-neutral-dark text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
       
       <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-end gap-6">
@@ -159,6 +160,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
       </div>
       {/* Decorative: abstract HDD bore trajectory */}
       <DrillOrbit side="left" />
+      {/* Organic wave divider */}
+      <DrillTeeth position="bottom" fill="var(--color-neutral-dark)" />
     </section>
   );
 }

components/blocks/ServiceDetailGrid.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { motion, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
+import { DrillTeeth } from '@/components/ui/decorations/DrillTeeth';
 
 export interface ServicePanelData {
   id: string;
@@ -229,6 +230,8 @@ export function ServiceDetailGrid({
           })}
         </motion.div>
       </div>
+      {/* Organic wave divider */}
+      <DrillTeeth position="bottom" fill="#fafafa" />
     </section>
   );
 }

components/blocks/SubCompanyTiles.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 import { DrillOrbit } from '@/components/ui/decorations/DrillOrbit';
 import { DrillBitSpinner } from '@/components/ui/decorations/DrillBitSpinner';
+import { DrillTeeth } from '@/components/ui/decorations/DrillTeeth';
 
 interface SubCompanyTilesProps {
   badge?: string;
@@ -205,6 +206,8 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
       </div>
       {/* Decorative: abstract HDD bore trajectory */}
       <DrillOrbit side="right" />
+      {/* Organic wave divider */}
+      <DrillTeeth position="bottom" fill="var(--color-neutral-dark)" />
     </section>
   );
 }