diff --git a/src/app/globals.css b/src/app/globals.css
index 3acbe547..6fe2150b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -380,56 +380,100 @@ summary,
);
}
.cloud-1 {
- --cloud-scale: 1.15;
- top: 7%;
- animation-duration: 95s;
- animation-delay: -30s;
+ --cloud-scale: 1.05;
+ top: 5%;
+ animation-duration: 34s;
+ animation-delay: -8s;
}
.cloud-2 {
- --cloud-scale: 0.75;
- top: 15%;
- opacity: 0.45;
- animation-duration: 130s;
- animation-delay: -85s;
+ --cloud-scale: 0.8;
+ top: 12%;
+ opacity: 0.85;
+ animation-duration: 46s;
+ animation-delay: -22s;
}
.cloud-3 {
- --cloud-scale: 0.9;
- top: 24%;
- opacity: 0.5;
- animation-duration: 160s;
- animation-delay: -60s;
+ --cloud-scale: 1.25;
+ top: 19%;
+ animation-duration: 28s;
+ animation-delay: -14s;
}
.cloud-4 {
- --cloud-scale: 0.6;
- top: 34%;
- opacity: 0.3;
- animation-duration: 110s;
- animation-delay: -105s;
+ --cloud-scale: 0.65;
+ top: 27%;
+ opacity: 0.9;
+ animation-duration: 52s;
+ animation-delay: -33s;
}
.cloud-5 {
- --cloud-scale: 1.35;
- top: 45%;
- opacity: 0.22;
- animation-duration: 190s;
- animation-delay: -140s;
+ --cloud-scale: 0.95;
+ top: 34%;
+ opacity: 0.8;
+ animation-duration: 38s;
+ 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))
- scale(var(--cloud-scale, 1));
+ transform: translateX(-260px) 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;
}
}
diff --git a/src/components/clouds-field.tsx b/src/components/clouds-field.tsx
index f10ebe32..0d351a00 100644
--- a/src/components/clouds-field.tsx
+++ b/src/components/clouds-field.tsx
@@ -10,6 +10,9 @@ export function CloudsField() {
+
+
+
);
}