/**
 * Fountain fill - the section's gradient layer.
 *
 * Two layers live inside .impulse-fill: the CSS one that PHP paints, and the
 * canvas the shader paints. The canvas is hidden until the renderer has
 * actually registered it and put .has-fill-gl on the wrapper, so a browser
 * with no WebGL, or one whose context creation failed, keeps the CSS fill and
 * never shows an empty box. That handshake is the whole reason the class is
 * added by the renderer rather than emitted by PHP.
 */

.impulse-fill-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
}

.impulse-fill.has-fill-gl > .impulse-fill-canvas {
    display: block;
}

/* The canvas is the fill once it is up, so the CSS layer stops painting
   rather than sitting under it at some blend of the two. display:none, not
   opacity, because the layer's opacity is authored inline and would win. */
.impulse-fill.has-fill-gl > .impulse-fill-layer {
    display: none;
}