From a259974503146e163e788fb1dc11290200d6437b Mon Sep 17 00:00:00 2001
From: ViktoriaFedyunina <vika-0607@yandex.ru>
Date: Wed, 5 Jun 2024 13:38:49 +0300
Subject: [PATCH] =?UTF-8?q?1.14.=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D0=BC=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D1=8E=20=D0=BF=D0=BE=D1=8F=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D1=88=D0=B0=D0=BF=D0=BA=D0=B8=20=D0=B8=20=D1=84=D1=83=D1=82?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/js/script.js                  |  4 ++++
 source/scss/blocks/intro.scss        |  1 +
 source/scss/blocks/page-header.scss  | 36 +++++++++++++++++++++++-----
 source/scss/blocks/screen.scss       | 11 +++++++++
 source/scss/blocks/social-block.scss |  9 +++++++
 5 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/source/js/script.js b/source/js/script.js
index 2c2b13f..83edb1b 100644
--- a/source/js/script.js
+++ b/source/js/script.js
@@ -21,3 +21,7 @@ social();
 
 const fullPageScroll = new FullPageScroll();
 fullPageScroll.init();
+
+window.addEventListener('load', function () {
+    document.body.classList.add('page-loaded');
+});
\ No newline at end of file
diff --git a/source/scss/blocks/intro.scss b/source/scss/blocks/intro.scss
index f7d4e8b..d959caf 100644
--- a/source/scss/blocks/intro.scss
+++ b/source/scss/blocks/intro.scss
@@ -171,6 +171,7 @@
       opacity: 1;
       transform: translateY(0);
       transition: opacity 0.7s, transform 0.7s;
+      transition-delay: 1s;
     }
   }
 }
\ No newline at end of file
diff --git a/source/scss/blocks/page-header.scss b/source/scss/blocks/page-header.scss
index 16d5740..8520c7a 100644
--- a/source/scss/blocks/page-header.scss
+++ b/source/scss/blocks/page-header.scss
@@ -35,6 +35,8 @@
   padding: 1rem 0;
   width: 10rem;
   color: $c-light;
+  opacity: 0;
+  transform: translateX(-1rem);
 
   @media (min-width: $stop-scaling) {
     top: -5px;
@@ -130,6 +132,7 @@
 .page-header__nav {
   display: flex;
   align-items: center;
+  opacity: 0;
 
   @media (max-width: $tablet) and (orientation: portrait) {
     position: fixed;
@@ -267,12 +270,6 @@
       }
     }
 
-    &.active {
-      &::after {
-        transform: scaleX(100%);
-      }
-    }
-
     &:hover,
     &:focus {
       color: $c-purple;
@@ -305,3 +302,30 @@
     width: 100%;
   }
 }
+
+.page-loaded {
+  .page-header__logo {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 0.5s cubic-bezier(0, 0, 0.04, 1), transform 0.5s cubic-bezier(0, 0, 0.04, 1);
+  }
+
+  .page-header__nav {
+    opacity: 1;
+    transition: opacity 0.5s cubic-bezier(0, 0, 0.04, 1);
+    transition-delay: 0.3s;
+  }
+
+  .page-header__menu {
+    a {
+      &.active {
+        &::after {
+          transform: scaleX(100%);
+          transition: transform 0.5s cubic-bezier(0, 0, 0.04, 1);
+          transition-delay: 0.3s;
+          transform-origin: left;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/source/scss/blocks/screen.scss b/source/scss/blocks/screen.scss
index afdec29..3333622 100644
--- a/source/scss/blocks/screen.scss
+++ b/source/scss/blocks/screen.scss
@@ -47,6 +47,10 @@
   background-color: $c-light;
   z-index: 1;
 
+  @media (min-width: $tablet) {
+    transform: translateY(2.8rem);
+  }
+
   @media (max-width: $tablet) and (orientation: portrait) {
     width: 3.5rem;
     height: 3.5rem;
@@ -70,6 +74,13 @@
   }
 }
 
+.page-loaded {
+  .screen__footer {
+    transform: translateY(0);
+    transition: transform 0.3s cubic-bezier(0, 0, 0.04, 1);
+  }
+}
+
 .screen__footer-wrapper {
   @include container;
 
diff --git a/source/scss/blocks/social-block.scss b/source/scss/blocks/social-block.scss
index a92b097..89d15da 100644
--- a/source/scss/blocks/social-block.scss
+++ b/source/scss/blocks/social-block.scss
@@ -37,6 +37,7 @@
   height: 4rem;
   color: $c-dark;
   border-radius: 50%;
+  transform: scale(0);
 
   @media (max-width: $tablet) and (orientation: portrait) {
     display: none;
@@ -101,6 +102,14 @@
   }
 }
 
+.page-loaded {
+  .social-block__toggler {
+    transform: scale(1);
+    transition: transform 0.5s cubic-bezier(0, 0, 0.26, 1.65);
+    transition-delay: 0.5s;
+  }
+}
+
 .social-block__list {
   @include list-reset;
   position: absolute;