add button

index.html

@@ -140,25 +140,22 @@
 
     #scrollToTopBtn {
     position: fixed;
-      bottom: 20px;
-      right: 20px;
-      z-index: 999;
-      background-color: rgba(255, 255, 255, 0.1);
-      border: 1px solid #888;
-      color: #eee;
-      font-size: 1.5em;
-      padding: 0.2em 0.6em;
-      border-radius: 0.4em;
+    bottom: 15px;
+    right: 15px;
+    z-index: 9999;
+    background-color: #010;
+    color: #000;
+    font-size: 1.25em;
+    padding: 0.4em 0.8em;
+    border: none;
+    border-radius: 0.5em;
     cursor: pointer;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
     transition: opacity 0.3s ease;
-      opacity: 0;
-      pointer-events: none;
 }
 
-    #scrollToTopBtn.show {
-      opacity: 1;
-      pointer-events: auto;
-    }
 
 </style>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
@@ -395,16 +392,6 @@ const videoObserver = new IntersectionObserver((entries, observer) => {
     h1.style.letterSpacing = "";
     h1.style.transition = "letter-spacing 1s ease";
   });
-window.addEventListener("scroll", () => {
-    const maxSpacing = 1.2;
-    const maxScroll = 600;
-    const scrollY = window.scrollY;
-    const spacing = Math.min(scrollY / maxScroll * maxSpacing, maxSpacing);
-    if (!h1.matches(':hover')) {
-      h1.style.letterSpacing = spacing + "em";
-    }
-  });
-
 
   window.addEventListener("scroll", () => {
     const baseMaxSpacing = 0.0012; // коэффициент
@@ -439,5 +426,20 @@ window.addEventListener("scroll", () => {
 
 <button id="scrollToTopBtn" title="Back to top">&#8679;</button>
 
+<script>
+  window.addEventListener("DOMContentLoaded", () => {
+    const btn = document.getElementById("scrollToTopBtn");
+    if (!btn) return;
+
+    btn.addEventListener("click", () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    });
+  });
+</script>
+
+
 </body>
 </html>