Movement begins with intention and ends with clarity.

// Mechanisme: hero-shader-fullscreen-gallery
// WebGL2 fullscreen quad + refined gradient flow (cream → sand → ink)
const canvas = document.querySelector('#shader-canvas-gallery');
const gl = canvas.getContext('webgl2', { antialias: false, alpha: false });
// fragment: domain-warped fbm sampled into 3-stop gradient palette

<!-- Skeleton: hero-shader-fullscreen-gallery -->
<section class="shader-hero-wrap">
  <canvas id="shader-canvas-gallery"></canvas>
  <div class="shader-hero-content">
    <p class="eyebrow">Shader / Gallery</p>
    <h1>Movement begins with intention.</h1>
  </div>
</section>

/* Styling: hero-shader-fullscreen-gallery */
.shader-hero-wrap{position:relative;width:100vw;height:100vh;overflow:hidden;background:#ECE7DC}
.shader-hero-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shader-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(2rem,5vw,5rem);pointer-events:none;z-index:2}