/* Liquid: real-time WebGL slime (slime-gl.js, liquid.js). Without WebGL, or if the browser
   takes the context away, the page keeps the flat Wet Paint bar, drip edge and button. */

.liquid-bar, .liquid-edge, .liquid-cta { position: absolute; display: block; }
/* A lost context can leave a canvas painted white over the flat version */
.slime-lost .liquid-bar, .slime-lost .liquid-edge, .slime-lost .liquid-cta { display: none; }

/* Bar: the canvas starts 24px inside the bar, where its flat slime matches the bar exactly */
.liquid-bar { left: 0; top: calc(100% - 24px); width: 100%; height: 220px; z-index: 1; }
.slime-liquid .mark, .slime-liquid nav { position: relative; z-index: 2; }

/* Release band edge; the flat drip is the fallback */
.liquid-edge { left: 0; top: calc(100% - 24px); width: 100%; height: 300px; }
.gl-slime .slime-liquid .drip { display: none; }

/* Pre-save: the canvas draws the button body; the label sits on top. The whole thing sits
   above the cover, so a hanging or falling drip runs over the art instead of behind it. */
.slime-liquid .cta-wrap { z-index: 2; }
.liquid-cta { left: -48px; top: -40px; width: calc(100% + 96px); height: calc(100% + 190px); z-index: 0; }
.gl-slime .slime-liquid .cta-wrap .btn {
  position: relative; z-index: 1; background: transparent;
  /* A dark halo keeps the label readable wherever a highlight runs under it */
  text-shadow: 0 0 2px var(--on-slime), 0 0 10px var(--on-slime);
  /* The ring follows the blob's rounded outline and clears its swell and lumps */
  border-radius: 22px; outline-offset: 14px;
  /* At least the tar's curved rim (TAR_RIM in liquid.js), so the label, even wrapped, sits on
     the flat middle where no highlight forms */
  padding-block: 18px;
}