⚠️ Fix most animations/transitions performance issues

- Basically add `will-change` to CSS elements to enable GPU animations, less choppy, more sassy
- Use requestAnimationFrame over setTimeout
- Avoid repaints AMAP

src/style/pages/_homepage.scss

@@ -92,6 +92,10 @@
             margin-bottom: 200px;
             font-size: rem(248px);
         }
+
+        span {
+            will-change: transform;
+        }
     }
 
     // Massive title

src/style/pages/_page.scss

@@ -1,6 +1,11 @@
 .page {
     overflow-x: hidden;
 
+    // Page part
+    &__part {
+        will-change: transform, opacity;
+    }
+
     // Top part
     &__top {
         margin-top: 96px;
@@ -64,7 +69,9 @@
             margin-bottom: 40px;
         }
         dt {
-            margin-bottom: 8px;
+            @include breakpoint (sm) {
+                margin-bottom: 8px;
+            }
         }
     }
 

src/style/pages/_place.scss

@@ -78,6 +78,7 @@
         padding-top: pxVW(200);
         padding-bottom: 72px;
         background-color: $color-tertiary;
+        will-change: transform, opacity;
 
         @include breakpoint (m) {
             padding-bottom: 96px;
@@ -170,6 +171,7 @@
         background-position: 0 0;
         background-repeat: no-repeat;
         background-size: 100% auto;
+        will-change: transform, opacity;
 
         @include breakpoint (sm) {
             background-image: var(--url-desktop);

src/style/pages/_viewer.scss

@@ -3,6 +3,7 @@
     position: relative;
     height: 100vh;
     min-height: 560px;
+    padding-top: 16px;
 
     @include breakpoint (sm) {
         width: 100%;
@@ -10,6 +11,7 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        padding-top: 24px;
     }
 
 
@@ -18,7 +20,6 @@
     */
     &__top {
         z-index: 10;
-        margin-top: 16px;
         padding-left: 24px;
         padding-right: 16px;
         display: flex;
@@ -29,7 +30,7 @@
         @include breakpoint (sm) {
             // position: static;
             justify-content: center;
-            margin: 24px 0;
+            margin-bottom: 24px;
         }
 
         // Tip message