Better shapes animations

assets/css/site.css

@@ -783,6 +783,7 @@ body#default
         #square,
         #triangle {
             position: absolute;
+            transition: transform 2000ms ease-in-out;
         }
 
         #semicircle {
@@ -792,6 +793,14 @@ body#default
             border-radius: 10dvw 10dvw 0 0;
             left: 52dvw;
             width: 20dvw;
+
+            &:hover {
+                transform: rotate(6deg) translateY(0.25dvh);
+
+                + #square {
+                    transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw);
+                }
+            }
         }
 
         #square {
@@ -799,6 +808,10 @@ body#default
             height: 12dvw;
             width: 12dvw;
             bottom: 0;
+
+            &:has(+ #circle:hover) {
+                transform: translateX(-0.125dvw);
+            }
         }
 
         #circle {
@@ -808,6 +821,10 @@ body#default
             bottom: 5dvh;
             left: 4dvw;
             width: 20dvw;
+
+            &:hover {
+                transform: translateX(1rem);
+            }
         }
 
         #rectangle {
@@ -816,6 +833,11 @@ body#default
             width: 36dvw;
             left: 2dvw;
             bottom: 0;
+            transform-origin: 38%;
+
+            &:hover {
+                transform: rotate(-6deg) translateY(-0.125dvh);
+            }
         }
 
         #triangle {