Website Update

Author: Modelized

docs/assets/css/style.css

@@ -1158,7 +1158,7 @@ a {
   z-index: 3;
   height: clamp(9rem, 28%, 16rem);
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 18%, rgba(0, 0, 0, 0.42) 54%, rgba(0, 0, 0, 0.82) 82%, #000 100%);
-  opacity: clamp(0, calc(var(--home-image-base-layer-opacity) + (var(--home-image-silhouette-layer-opacity) * 0.35)), 1);
+  opacity: var(--home-image-base-layer-opacity);
   pointer-events: none;
   will-change: opacity;
 }
@@ -1334,7 +1334,7 @@ a {
 }
 
 .js .hero-image-gradient {
-  opacity: 1;
+  opacity: 0;
 }
 
 .js body.hero-ready .hero-shape-fill {
@@ -1370,6 +1370,9 @@ a {
 .js body.hero-ready .hero-home-image--base {
   animation: hero-image-base-reveal 2480ms cubic-bezier(0.18, 0.9, 0.22, 1) 120ms forwards;
 }
+.js body.hero-ready .hero-image-gradient {
+  animation: hero-image-base-reveal 2480ms cubic-bezier(0.18, 0.9, 0.22, 1) 120ms forwards;
+}
 
 @keyframes hero-mask-reveal {
   0% {

docs/assets/js/shell.js

@@ -1016,7 +1016,11 @@
        setActive(matching.length ? matching : [firstLinkForHash(hash)]);
      };
 
-     const homeSection = document.querySelector("#hero");
+    const homeSection = document.querySelector("#hero");
+    const getDocumentBottom = () => {
+      const scrollEl = document.scrollingElement || document.documentElement || document.body;
+      return Math.max(0, (scrollEl?.scrollHeight || document.documentElement.scrollHeight || 0) - window.innerHeight);
+    };
      let lockedHash = "";
      let lockTimer = 0;
 
@@ -1047,33 +1051,43 @@
        return;
      }
 
-     const syncFromViewport = () => {
-       if (lockedHash) {
-         setActiveByHash(lockedHash);
-         return;
-       }
+    const syncFromViewport = () => {
+      if (lockedHash) {
+        setActiveByHash(lockedHash);
+        return;
+      }
 
-       const focusLine = Math.max(
-         getNavOffset() + 18,
-         Math.round(window.innerHeight * 0.34)
-       );
+      const scrollTop = getScrollTop();
+      const documentBottom = getDocumentBottom();
+      const lastSection = sectionsInOrder[sectionsInOrder.length - 1] || null;
 
-       let currentSection = homeSection || sectionsInOrder[0] || null;
+      if (lastSection && scrollTop >= Math.max(0, documentBottom - 8)) {
+        const lastHash = lastSection.id ? `#${lastSection.id}` : "";
+        setActiveByHash(lastHash);
+        return;
+      }
 
-       sectionsInOrder.forEach((section) => {
-         const rect = section.getBoundingClientRect();
-         if (rect.top <= focusLine) {
-           currentSection = section;
-         }
-       });
+      const focusLine = Math.max(
+        getNavOffset() + 18,
+        Math.round(window.innerHeight * 0.34)
+      );
 
-       if (!currentSection) {
-         return;
-       }
+      let currentSection = homeSection || sectionsInOrder[0] || null;
 
-       const currentHash = currentSection.id ? `#${currentSection.id}` : "";
-       setActiveByHash(currentHash);
-     };
+      sectionsInOrder.forEach((section) => {
+        const rect = section.getBoundingClientRect();
+        if (rect.top <= focusLine) {
+          currentSection = section;
+        }
+      });
+
+      if (!currentSection) {
+        return;
+      }
+
+      const currentHash = currentSection.id ? `#${currentSection.id}` : "";
+      setActiveByHash(currentHash);
+    };
 
      const observer = new IntersectionObserver(
        () => {
@@ -1297,39 +1311,39 @@
        root.style.setProperty("--home-next-layer-shift", "0px");
      };
 
-     const sync = () => {
-       rafId = 0;
-
-       const scrollTop = getScrollTop();
-       const progress = clamp(scrollTop / transitionDistance, 0, 1);
-       const uiOpacity = 1 - range(progress, 0.06, 0.56, linear);
-       const imageScale = lerp(1, 1.125, range(progress, 0, 0.72, easeOutCubic));
-       const baseFade = 1 - range(progress, 0.08, 0.52, linear);
-       const baseBrightness = lerp(1, 0.68, range(progress, 0.1, 0.48, easeInOutCubic));
-       const baseContrast = lerp(1, 0.92, range(progress, 0.12, 0.48, easeInOutCubic));
-       const silhouetteAppear = range(progress, 0.2, 0.28, easeInOutCubic);
-       const silhouetteFade = 1 - range(progress, 0.28, 0.48, easeInOutCubic);
-       const silhouetteOpacity = 0.74 * silhouetteAppear * silhouetteFade;
-       const atmosphereProgress = range(progress, 0.48, 0.88, easeInOutCubic);
-       const nextLayerMotionProgress = range(progress, 0.48, 0.86, easeInOutCubic);
-       const nextLayerOpacityProgress = range(progress, 0.48, 0.72, easeInOutCubic);
-       const backdropSuppression = progress < 0.88 ? "1" : "0";
-
-       root.style.setProperty("--home-ui-opacity", Math.max(0, uiOpacity).toFixed(4));
-       root.style.setProperty("--home-image-scroll-scale", imageScale.toFixed(4));
-       root.style.setProperty("--home-image-base-layer-opacity", Math.max(0, baseFade).toFixed(4));
-       root.style.setProperty("--home-image-base-brightness", baseBrightness.toFixed(4));
-       root.style.setProperty("--home-image-base-contrast", baseContrast.toFixed(4));
-       root.style.setProperty("--home-image-silhouette-layer-opacity", Math.max(0, silhouetteOpacity).toFixed(4));
-       setAtmosphere(atmosphereProgress);
-       setLowerLayer(nextLayerOpacityProgress);
-
-       if (backdropSuppression !== lastBackdropSuppression) {
-         body.dataset.homeBackdropSuppressed = backdropSuppression;
-         lastBackdropSuppression = backdropSuppression;
-         window.dispatchEvent(new Event("home-transition-sync"));
-       }
-     };
+    const sync = () => {
+      rafId = 0;
+
+      const scrollTop = getScrollTop();
+      const progress = clamp(scrollTop / transitionDistance, 0, 1);
+      const uiOpacity = 1 - range(progress, 0.06, 0.56, linear);
+      const imageScale = lerp(1, 1.125, range(progress, 0, 0.72, easeOutCubic));
+      const baseFade = 1 - range(progress, 0.08, 0.52, linear);
+      const baseBrightness = lerp(1, 0.68, range(progress, 0.1, 0.48, easeInOutCubic));
+      const baseContrast = lerp(1, 0.92, range(progress, 0.12, 0.48, easeInOutCubic));
+      const silhouetteAppear = range(progress, 0.2, 0.28, easeInOutCubic);
+      const silhouetteFade = 1 - range(progress, 0.28, 0.48, easeInOutCubic);
+      const silhouetteOpacity = 0.74 * silhouetteAppear * silhouetteFade;
+      const atmosphereProgress = range(progress, 0.48, 0.88, easeInOutCubic);
+      const nextLayerMotionProgress = range(progress, 0.48, 0.86, easeInOutCubic);
+      const nextLayerOpacityProgress = range(progress, 0.48, 0.72, easeInOutCubic);
+      const backdropSuppression = progress < 0.88 ? "1" : "0";
+
+      root.style.setProperty("--home-ui-opacity", Math.max(0, uiOpacity).toFixed(4));
+      root.style.setProperty("--home-image-scroll-scale", imageScale.toFixed(4));
+      root.style.setProperty("--home-image-base-layer-opacity", Math.max(0, baseFade).toFixed(4));
+      root.style.setProperty("--home-image-base-brightness", baseBrightness.toFixed(4));
+      root.style.setProperty("--home-image-base-contrast", baseContrast.toFixed(4));
+      root.style.setProperty("--home-image-silhouette-layer-opacity", Math.max(0, silhouetteOpacity).toFixed(4));
+      setAtmosphere(atmosphereProgress);
+      setLowerLayer(nextLayerOpacityProgress);
+
+      if (backdropSuppression !== lastBackdropSuppression) {
+        body.dataset.homeBackdropSuppressed = backdropSuppression;
+        lastBackdropSuppression = backdropSuppression;
+        window.dispatchEvent(new Event("home-transition-sync"));
+      }
+    };
 
      const requestSync = () => {
        if (rafId) {