/* Reference metal weave: gentle swells inside the Skrollr-controlled surface. */
body.theme-final { isolation:isolate; }
html.skrollr-desktop { scroll-behavior:auto; }
.live-metal-mesh {
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  contain:strict; background:var(--final-paper,#f8f7ef);
}
.metal-mesh-layer {
  position:absolute; inset:-90px -45px;
  opacity:.32; transform:translate3d(-10px,40px,0px);
  backface-visibility:hidden;
}
.metal-mesh-layer::before {
  content:''; position:absolute; inset:-38px;
  /* Screen warms the dark weave to theme colors, including on local file pages. */
  background-image:linear-gradient(115deg,#d3bb86,#dfd4bc 55%,#d1d8d2),url('../pattern.jpg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-blend-mode:screen;
  transform-origin:50% 55%;
  animation:mesh-sea-wave 16s ease-in-out infinite paused;
}
body.mesh-motion-active .metal-mesh-layer { will-change:transform; }
body.mesh-motion-active .metal-mesh-layer::before {
  animation-play-state:running; will-change:transform;
}
@keyframes mesh-sea-wave {
  0%,100% { transform:translate3d(-12px,8px,0) skewX(-1deg) scale(1.03); }
  25% { transform:translate3d(0,-4px,0) skewX(0) scale(1.045); }
  50% { transform:translate3d(12px,-8px,0) skewX(1deg) scale(1.055); }
  75% { transform:translate3d(0,4px,0) skewX(0) scale(1.045); }
}
@media(prefers-reduced-motion:reduce) {
  .metal-mesh-layer { transform:none!important; will-change:auto!important; }
  .metal-mesh-layer::before { animation:none!important; transform:none!important; will-change:auto!important; }
}