Create reveal animation for About page Purpose section

Using Motion One inView for detecting and toggling class 🤌

src/style/pages/_about.scss

@@ -3,18 +3,16 @@
     ** Purpose
     */
     &__purpose {
-        position: relative;
         text-align: center;
 
         .container-wide {
+            position: relative;
             display: flex;
             align-items: center;
-            overflow: hidden;
             justify-content: center;
             min-height: calc(100vh - var(--sides));
             color: #fff;
             padding: 0 8%;
-            border-radius: 16px;
 
             @include bp (sm) {
                 padding: 0 18%;
@@ -23,11 +21,13 @@
 
         // Text
         .text {
+            opacity: 0.2;
             max-width: 1024px;
+            transition: opacity 3s var(--ease-quart);
 
             :global(strong) {
-                color: $color-secondary-light;
                 font-weight: inherit;
+                transition: color 3s var(--ease-quart);
             }
         }
 
@@ -41,14 +41,31 @@
             height: 100%;
             opacity: 0;
             background-color: $color-primary-tertiary20;
-            transition: opacity 1.2s var(--ease-quart);
+            border-radius: 8px;
+            transform: scale(1.15) translateZ(0);
+            transition-property: opacity, transform;
+            transition-duration: 3s;
+            transition-timing-function: var(--ease-quart);
+            transition-delay: 0.25s;
+
+            @include bp (sm) {
+                border-radius: 16px;
+            }
         }
 
 
         // Visible state
         &:global(.is-visible) {
+            .text {
+                opacity: 1;
+
+                :global(strong) {
+                    color: $color-secondary-light;
+                }
+            }
             .background {
                 opacity: 1;
+                transform: scale(1) translateZ(0);
             }
         }
     }