/* Background effects: parallax shape layers + wave accents */
.fx-layer{position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:-1;will-change:background-position}
#fx-shapes-grey{background-image:url(/assets/img/bg-shapes-grey.webp);background-size:1100px auto;background-repeat:repeat;opacity:.5}
#fx-shapes-color{background-image:url(/assets/img/bg-shapes-color.webp);background-size:900px auto;background-repeat:repeat;opacity:.42}
#fx-wave{top:auto;height:60vh;background-image:url(/assets/img/bg-wave.webp);background-size:cover;background-repeat:no-repeat;background-position:center bottom;opacity:.95;will-change:transform;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 55%);mask-image:linear-gradient(to bottom,transparent 0,#000 55%)}
html{background-color:#f8f9ff}
body.bg-surface,main.bg-surface{background-color:transparent}
/* let the layers show through the light sections */
main section.bg-surface{background-color:rgba(248,249,255,.6)}
main section.bg-surface-container-low{background-color:rgba(239,244,255,.6)}
main section.bg-surface-container-high{background-color:rgba(220,233,255,.72)}
/* wave texture in the footer */
footer{position:relative;overflow:hidden}
footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:url(/assets/img/bg-wave.webp) center bottom/cover no-repeat;filter:invert(1);opacity:.12;pointer-events:none}
footer>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.fx-layer{will-change:auto}}