transitions-setup-initial-transition.diff

diff --git a/assets/styles/app.css b/assets/styles/app.css
index 6d01054..6de3abb 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -4,6 +4,10 @@
 
 body {
     font-family: 'Montserrat', sans-serif;
+    transition: opacity 1000ms;
+}
+body.turbo-loading {
+    opacity: .2;
 }
 /*
 [data-turbo-preview] body {
diff --git a/assets/turbo/turbo-helper.js b/assets/turbo/turbo-helper.js
index dcefc45..a7083a9 100644
--- a/assets/turbo/turbo-helper.js
+++ b/assets/turbo/turbo-helper.js
@@ -10,6 +10,22 @@ const TurboHelper = class {
         document.addEventListener('turbo:render', () => {
             this.initializeWeatherWidget();
         });
+
+        document.addEventListener('turbo:visit', () => {
+            // fade out the old body
+            document.body.classList.add('turbo-loading');
+        });
+        document.addEventListener('turbo:before-render', (event) => {
+            // when we are *about* to render, start us faded out
+            event.detail.newBody.classList.add('turbo-loading');
+        });
+        document.addEventListener('turbo:render', () => {
+            // after rendering, we first allow the turbo-loading class to set the low opacity
+            // THEN, one frame later, we remove the turbo-loading class, which allows the fade in
+            requestAnimationFrame(() => {
+               document.body.classList.remove('turbo-loading');
+            });
+        });
     }
 
     closeModal() {
diff --git a/public/index.php b/public/index.php
index 9982c21..52a2316 100644
--- a/public/index.php
+++ b/public/index.php
@@ -3,6 +3,7 @@
 use App\Kernel;
 
 require_once dirname(__DIR__).'/vendor/autoload_runtime.php';
+sleep(1);
 
 return function (array $context) {
     return new Kernel($context['APP_ENV'], (bool) $context['APP_DEBUG']);