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() { + + + ); }