/* Continuous background layer (see bg.js). The page colour stays on html (--ink);
   body and sections are transparent so this fixed canvas shows through everywhere. */
#bg-canvas{
  position:fixed;top:0;left:0;z-index:-1;
  width:100%;height:100vh;height:100lvh; /* lvh: no stretch when the mobile URL bar moves */
  pointer-events:none;display:block;
}

/* Hero: tissue canvas dissolves into the field below, no edge. */
#hero-canvas{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,.55) 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,.55) 88%,transparent 100%);
}

/* Footer: the last section sinks into --deep instead of meeting a line. */
.foot{position:relative}
.foot::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,17,32,0),rgba(10,17,32,.55));
}