Website Update

Author: Modelized

docs/assets/css/style.css

@@ -1051,6 +1051,8 @@ a {
   left: 50%;
   top: 44.6%;
   z-index: 1;
+  display: grid;
+  place-items: center;
   width: min(var(--hero-image-size), var(--hero-image-max-inline));
   transform: translate(-50%, -50%);
   overflow: visible;
@@ -1059,12 +1061,40 @@ a {
 }
 
 .hero-home-image {
+  grid-area: 1 / 1;
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 1 / 1;
   object-fit: contain;
-  will-change: filter;
+  will-change: filter, opacity;
+}
+
+.hero-home-image--base {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-home-image--reveal {
+  position: relative;
+  z-index: 2;
+  background-image: url("../img/hero-home.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  -webkit-mask-image: url("../img/hero-home.jpg");
+  mask-image: url("../img/hero-home.jpg");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-mode: luminance;
+  mask-mode: luminance;
+  opacity: 0;
+  mix-blend-mode: screen;
+  pointer-events: none;
 }
 
 .hero-kicker {
@@ -1149,6 +1179,8 @@ a {
 }
 
 .hero-shape-fill {
+  position: relative;
+  z-index: 2;
   color: var(--accent-script-color);
   -webkit-text-fill-color: var(--accent-script-color);
   background: none;
@@ -1157,19 +1189,35 @@ a {
 }
 
 .hero-unseen-fill {
+  position: relative;
+  z-index: 2;
   background-image: linear-gradient(90deg, var(--hero-fill-color) 0%, var(--hero-fill-color) 38%, rgba(255, 255, 255, 0.995) 50%, var(--hero-fill-color) 62%, var(--hero-fill-color) 100%);
 }
 
 .hero-unseen-outline {
+  position: relative;
+  z-index: 1;
   color: transparent;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 1.35px var(--hero-outline-color);
 }
 
 .hero-shape-glow,
 .hero-unseen-glow {
-  color: rgba(255, 248, 240, 0.96);
-  filter: blur(12px);
+  position: relative;
+  z-index: 3;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(90deg, rgba(255, 243, 230, 0) 0%, rgba(255, 243, 230, 0.12) 22%, rgba(255, 255, 255, 0.94) 50%, rgba(255, 243, 230, 0.18) 78%, rgba(255, 243, 230, 0) 100%);
+  background-size: 220% 100%;
+  background-position: 110% 50%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  filter: blur(12px) brightness(1.14);
+  mix-blend-mode: screen;
+  text-shadow:
+    0 0 14px rgba(255, 247, 238, 0.8),
+    0 0 30px rgba(255, 222, 189, 0.42);
   opacity: 0;
 }
 
@@ -1190,16 +1238,20 @@ a {
 }
 
 .js .hero-image-wrap {
-  opacity: 0;
   transform: translate(-50%, calc(-50% + 1.2rem)) scale(1.055);
 }
 
 .js .hero-image-wrap::after {
   opacity: 0;
 }
 
-.js .hero-home-image {
-  filter: brightness(1.85) contrast(1.48) saturate(0.94);
+.js .hero-home-image--base {
+  opacity: 0;
+}
+
+.js .hero-home-image--reveal {
+  opacity: 0;
+  filter: brightness(3.8) contrast(1.92) saturate(0.78);
 }
 
 .js body.hero-ready .hero-shape-fill {
@@ -1211,6 +1263,7 @@ a {
 .js body.hero-ready .hero-shape-glow {
   animation:
     hero-mask-reveal-script 860ms cubic-bezier(0.18, 0.92, 0.24, 1) 90ms forwards,
+    hero-sheen-pass 980ms cubic-bezier(0.22, 0.88, 0.24, 1) 90ms forwards,
     hero-glow-pass 980ms cubic-bezier(0.22, 0.88, 0.24, 1) 90ms forwards;
 }
 
@@ -1223,6 +1276,7 @@ a {
 .js body.hero-ready .hero-unseen-glow {
   animation:
     hero-mask-reveal 980ms cubic-bezier(0.18, 0.92, 0.24, 1) 970ms forwards,
+    hero-sheen-pass 1120ms cubic-bezier(0.22, 0.88, 0.24, 1) 970ms forwards,
     hero-glow-pass 1120ms cubic-bezier(0.22, 0.88, 0.24, 1) 970ms forwards;
 }
 
@@ -1234,8 +1288,12 @@ a {
   animation: hero-image-gradient-settle 2480ms cubic-bezier(0.18, 0.9, 0.22, 1) 120ms forwards;
 }
 
-.js body.hero-ready .hero-home-image {
-  animation: hero-image-luma-settle 2480ms cubic-bezier(0.18, 0.9, 0.22, 1) 120ms forwards;
+.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-home-image--reveal {
+  animation: hero-image-luma-emerge 2480ms cubic-bezier(0.18, 0.9, 0.22, 1) 120ms forwards;
 }
 
 @keyframes hero-mask-reveal {
@@ -1282,54 +1340,77 @@ a {
 
 @keyframes hero-glow-pass {
   0% {
-    clip-path: inset(0 100% 0 0);
     opacity: 0;
-    filter: blur(14px);
+    filter: blur(18px) brightness(1.16);
   }
 
-  22% {
-    opacity: 0.34;
+  18% {
+    opacity: 0.82;
   }
 
-  76% {
-    opacity: 0.18;
-    filter: blur(8px);
+  62% {
+    opacity: 0.34;
+    filter: blur(10px) brightness(1.08);
   }
 
   100% {
-    clip-path: inset(0 0 0 0);
     opacity: 0;
-    filter: blur(0);
+    filter: blur(0) brightness(1);
   }
 }
 
 @keyframes hero-image-entrance {
   0% {
-    opacity: 0;
     transform: translate(-50%, calc(-50% + 1.2rem)) scale(1.055);
   }
 
-  42% {
-    opacity: 0.82;
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes hero-image-base-reveal {
+  0% {
+    opacity: 0;
+  }
+
+  18% {
+    opacity: 0.18;
+  }
+
+  54% {
+    opacity: 0.62;
   }
 
   100% {
     opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
   }
 }
 
-@keyframes hero-image-luma-settle {
+@keyframes hero-image-luma-emerge {
   0% {
-    filter: brightness(1.85) contrast(1.48) saturate(0.94);
+    opacity: 0.16;
+    filter: brightness(1.62) saturate(0.82);
   }
 
-  40% {
-    filter: brightness(1.4) contrast(1.22) saturate(0.97);
+  18% {
+    opacity: 0.92;
+    filter: brightness(1.46) saturate(0.86);
+  }
+
+  48% {
+    opacity: 0.56;
+    filter: brightness(1.24) saturate(0.92);
+  }
+
+  76% {
+    opacity: 0.18;
+    filter: brightness(1.08) saturate(0.98);
   }
 
   100% {
-    filter: brightness(1) contrast(1) saturate(1);
+    opacity: 0;
+    filter: brightness(1) saturate(1);
   }
 }
 
@@ -2294,7 +2375,7 @@ a {
     --hero-content-bottom-gap: 2.12rem;
     --hero-extra-tail: clamp(1.45rem, 5.4vw, 2.1rem);
     --hero-image-size: clamp(29rem, calc(var(--hero-stage-reference) * 0.96), 52rem);
-    --hero-image-max-inline: 110%;
+    --hero-image-max-inline: 110vw;
     --hero-tagline-base-size: clamp(2.25rem, min(calc(var(--hero-stage-reference) * 0.1), 11.2cqi), 3.35rem);
   }
 
@@ -2551,14 +2632,21 @@ a {
   }
 
   .hero-image-wrap,
-  .hero-home-image {
+  .hero-home-image--base {
     opacity: 1 !important;
     filter: none !important;
     animation: none !important;
     transition: none !important;
     transform: translate(-50%, -50%) scale(1) !important;
   }
 
+  .hero-home-image--reveal {
+    opacity: 0 !important;
+    filter: none !important;
+    animation: none !important;
+    transition: none !important;
+  }
+
   .hero-image-wrap::after {
     opacity: 1 !important;
     animation: none !important;

docs/index.html

@@ -45,7 +45,8 @@
       <div class="container hero-layout">
         <div class="hero-stage">
           <div class="hero-image-wrap" aria-hidden="true">
-            <img class="hero-home-image" src="assets/img/hero-home.jpg" alt="" fetchpriority="high" decoding="async">
+            <img class="hero-home-image hero-home-image--base" src="assets/img/hero-home.jpg" alt="" fetchpriority="high" decoding="async">
+            <div class="hero-home-image hero-home-image--reveal"></div>
           </div>
 
           <div class="hero-kicker">