diff --git a/classes/index.html b/classes/index.html index fb1aa96..af36a6e 100644 --- a/classes/index.html +++ b/classes/index.html @@ -13,7 +13,7 @@ - + @@ -22,17 +22,17 @@
+ style="--sway:10deg;animation-duration:8s;animation-delay:0s"> + style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> + style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> + style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> + style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> + style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
@@ -375,7 +375,7 @@ - + \ No newline at end of file diff --git a/connect/index.html b/connect/index.html index a5eea4a..a673bb3 100644 --- a/connect/index.html +++ b/connect/index.html @@ -13,7 +13,7 @@ - + @@ -22,17 +22,17 @@
+ style="--sway:10deg;animation-duration:8s;animation-delay:0s"> + style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> + style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> + style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> + style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> + style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
@@ -193,7 +193,7 @@ - + \ No newline at end of file diff --git a/css/style.css b/css/style.css index ce84c39..b900367 100644 --- a/css/style.css +++ b/css/style.css @@ -1479,24 +1479,25 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; } opacity: 0.22; filter: saturate(0.75) brightness(0.95) hue-rotate(-6deg); mix-blend-mode: lighten; - transform: var(--flip, none); + --flip: ; /* empty default so keyframes resolve to rotate(...) not "none rotate(...)" */ animation-name: sfB-palm-sway; + animation-duration: 6s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; will-change: transform; } -.sfB-palm.corner-tl { top: -8%; left: -10vw; transform-origin: 0% 0%; } -.sfB-palm.corner-tr { top: -8%; right: -10vw; transform-origin: 100% 0%; } -.sfB-palm.corner-bl { bottom: -8%; left: -10vw; transform-origin: 0% 100%; } -.sfB-palm.corner-br { bottom: -8%; right: -10vw; transform-origin: 100% 100%; } -.sfB-palm.corner-ml { top: 32%; left: -10vw; width: clamp(120px, 49vw, 760px); height: clamp(120px, 49vw, 760px); opacity: 0.28; transform-origin: 0% 50%; } -.sfB-palm.corner-mr { top: 22%; right: -10vw; width: clamp(110px, 44vw, 680px); height: clamp(110px, 44vw, 680px); opacity: 0.26; transform-origin: 100% 50%; } +.sfB-palm.corner-tl { top: -8%; left: -10vw; transform-origin: 0% 0%; animation-duration: 7s; } +.sfB-palm.corner-tr { top: -8%; right: -10vw; transform-origin: 100% 0%; animation-duration: 5s; } +.sfB-palm.corner-bl { bottom: -8%; left: -10vw; transform-origin: 0% 100%; animation-duration: 8s; } +.sfB-palm.corner-br { bottom: -8%; right: -10vw; transform-origin: 100% 100%; animation-duration: 6.5s;} +.sfB-palm.corner-ml { top: 32%; left: -10vw; width: clamp(120px, 49vw, 760px); height: clamp(120px, 49vw, 760px); opacity: 0.28; transform-origin: 0% 50%; animation-duration: 9s; } +.sfB-palm.corner-mr { top: 22%; right: -10vw; width: clamp(110px, 44vw, 680px); height: clamp(110px, 44vw, 680px); opacity: 0.26; transform-origin: 100% 50%; animation-duration: 7.5s;} @keyframes sfB-palm-sway { - from { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * -0.5)); } - to { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * 0.5)); } + from { transform: var(--flip, none) rotate(calc(var(--sway, 14deg) * -0.25)); } + to { transform: var(--flip, none) rotate(calc(var(--sway, 14deg) * 0.25)); } } @media (prefers-reduced-motion: reduce) { diff --git a/festivals/index.html b/festivals/index.html index e8ec1bf..cd84280 100644 --- a/festivals/index.html +++ b/festivals/index.html @@ -13,7 +13,7 @@ - + @@ -22,17 +22,17 @@
+ style="--sway:10deg;animation-duration:8s;animation-delay:0s"> + style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> + style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> + style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> + style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> + style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
@@ -244,7 +244,7 @@ - + \ No newline at end of file diff --git a/index.html b/index.html index 3580dd5..b569d11 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - + @@ -23,17 +23,17 @@
+ style="--sway:10deg;animation-duration:8s;animation-delay:0s"> + style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> + style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> + style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> + style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> + style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
@@ -273,7 +273,7 @@ - + \ No newline at end of file diff --git a/schedule/index.html b/schedule/index.html index 21c9f26..4a0a342 100644 --- a/schedule/index.html +++ b/schedule/index.html @@ -13,7 +13,7 @@ - + @@ -22,17 +22,17 @@
+ style="--sway:10deg;animation-duration:8s;animation-delay:0s"> + style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> + style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> + style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> + style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> + style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
@@ -119,7 +119,7 @@ - + + \ No newline at end of file