Merge pull request 'style: added adaption to mobile & block animations' (#2) from style/adaptation-animation into main

Reviewed-on: #2

assets/js/main.js

@@ -0,0 +1,58 @@
+(() => {
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    const selectors = [
+        ".section__head",
+        ".info-card",
+        ".feature-card",
+        ".object-card",
+        ".service-card",
+        ".gallery__item",
+        ".review-card",
+        ".stats article",
+        ".booking__form",
+        ".contacts-card",
+        ".hours-card",
+        ".footer__col",
+        ".footer__bottom"
+    ];
+
+    const elements = Array.from(document.querySelectorAll(selectors.join(",")));
+    if (!elements.length) return;
+
+    const siblingCounters = new WeakMap();
+
+    elements.forEach((element) => {
+        element.classList.add("scroll-reveal");
+        const parent = element.parentElement;
+        let offsetIndex = 0;
+
+        if (parent) {
+            offsetIndex = siblingCounters.get(parent) ?? 0;
+            siblingCounters.set(parent, offsetIndex + 1);
+        }
+
+        element.style.setProperty("--reveal-delay", `${(offsetIndex % 4) * 80}ms`);
+    });
+
+    if (reduceMotion || !("IntersectionObserver" in window)) {
+        elements.forEach((element) => element.classList.add("is-visible"));
+        return;
+    }
+
+    const observer = new IntersectionObserver(
+        (entries, currentObserver) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting) return;
+                entry.target.classList.add("is-visible");
+                currentObserver.unobserve(entry.target);
+            });
+        },
+        {
+            threshold: 0.18,
+            rootMargin: "0px 0px -12% 0px"
+        }
+    );
+
+    elements.forEach((element) => observer.observe(element));
+})();

assets/scss/_mixins.scss

@@ -12,3 +12,9 @@
     border-radius: $radius-md;
     box-shadow: $shadow-card;
 }
+
+@mixin respond($breakpoint) {
+    @media only screen and (max-width: $breakpoint) {
+        @content;
+    }
+}

assets/scss/_vars.scss

@@ -1,6 +1,12 @@
 $container: 1400px;
 $container-padding: 24px;
 
+$bp-xxl: 1600px;
+$bp-xl: 1280px;
+$bp-lg: 1024px;
+$bp-md: 768px;
+$bp-sm: 520px;
+
 $font-main: "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
 
 $color-bg: #121212;

index.html

@@ -308,5 +308,7 @@
                 </div>
             </footer>
         </div>
+
+        <script src="./assets/js/main.js" defer></script>
     </body>
 </html>