feat(site): make drifting clouds clearly visible and moving

The first cloud pass was to subtle: only five, up to 190s per crossing,
and they froze off-screen under prefers-reduced-motion. Rework:

- Eight clouds across the top 60% of the viewport with visible drift
  (28s–66s loops, staggered by negative delays so they are always mid
  scene on load).
- Higher opacity/steeper size contrast in light mode; dark mode dims
  them slightly.
- Reduced motion now freezes a static, evenly-spread cloud field across
  the width instead of pushing the clouds off-screen.

src/app/globals.css

@@ -380,56 +380,100 @@ summary,
 		);
 }
 .cloud-1 {
-	--cloud-scale: 1.15;
+	--cloud-scale: 1.05;
-	top: 7%;
+	top: 5%;
-	animation-duration: 95s;
+	animation-duration: 34s;
-	animation-delay: -30s;
+	animation-delay: -8s;
 }
 .cloud-2 {
-	--cloud-scale: 0.75;
+	--cloud-scale: 0.8;
-	top: 15%;
+	top: 12%;
-	opacity: 0.45;
+	opacity: 0.85;
-	animation-duration: 130s;
+	animation-duration: 46s;
-	animation-delay: -85s;
+	animation-delay: -22s;
 }
 .cloud-3 {
-	--cloud-scale: 0.9;
+	--cloud-scale: 1.25;
-	top: 24%;
+	top: 19%;
-	opacity: 0.5;
+	animation-duration: 28s;
-	animation-duration: 160s;
+	animation-delay: -14s;
-	animation-delay: -60s;
 }
 .cloud-4 {
-	--cloud-scale: 0.6;
+	--cloud-scale: 0.65;
-	top: 34%;
+	top: 27%;
-	opacity: 0.3;
+	opacity: 0.9;
-	animation-duration: 110s;
+	animation-duration: 52s;
-	animation-delay: -105s;
+	animation-delay: -33s;
 }
 .cloud-5 {
-	--cloud-scale: 1.35;
+	--cloud-scale: 0.95;
-	top: 45%;
+	top: 34%;
-	opacity: 0.22;
+	opacity: 0.8;
-	animation-duration: 190s;
+	animation-duration: 38s;
-	animation-delay: -140s;
+	animation-delay: -19s;
+}
+.cloud-6 {
+	--cloud-scale: 1.4;
+	top: 42%;
+	opacity: 0.55;
+	animation-duration: 60s;
+	animation-delay: -41s;
+}
+.cloud-7 {
+	--cloud-scale: 0.72;
+	top: 50%;
+	opacity: 0.75;
+	animation-duration: 43s;
+	animation-delay: -27s;
+}
+.cloud-8 {
+	--cloud-scale: 1.1;
+	top: 58%;
+	opacity: 0.5;
+	animation-duration: 66s;
+	animation-delay: -51s;
 }
 @keyframes cloud-drift {
 	0% {
-		transform: translateX(clamp(-30vw, -220px, -140px))
+		transform: translateX(-260px) scale(var(--cloud-scale, 1));
-			scale(var(--cloud-scale, 1));
 	}
 	100% {
 		transform: translateX(calc(100vw + 260px)) scale(var(--cloud-scale, 1));
 	}
 }
 html.dark .cloud {
-	opacity: 0.28;
+	opacity: 0.3;
 }
 @media (prefers-reduced-motion: reduce) {
 	.cloud {
 		animation: none;
-		transform: translateX(clamp(-30vw, -220px, -140px))
+		transform: translateX(calc(var(--cloud-frozen-x, 8vw) + 10vw))
 			scale(var(--cloud-scale, 1));
+		opacity: 0.5;
+	}
+	.cloud-1 {
+		--cloud-frozen-x: 6vw;
+	}
+	.cloud-2 {
+		--cloud-frozen-x: 32vw;
+	}
+	.cloud-3 {
+		--cloud-frozen-x: 58vw;
+	}
+	.cloud-4 {
+		--cloud-frozen-x: 12vw;
+	}
+	.cloud-5 {
+		--cloud-frozen-x: 44vw;
+	}
+	.cloud-6 {
+		--cloud-frozen-x: 73vw;
+	}
+	.cloud-7 {
+		--cloud-frozen-x: 26vw;
+	}
+	.cloud-8 {
+		--cloud-frozen-x: 66vw;
 	}
 }
 

src/components/clouds-field.tsx

@@ -10,6 +10,9 @@ export function CloudsField() {
 			<span className="cloud cloud-3" />
 			<span className="cloud cloud-4" />
 			<span className="cloud cloud-5" />
+			<span className="cloud cloud-6" />
+			<span className="cloud cloud-7" />
+			<span className="cloud cloud-8" />
 		</div>
 	);
 }