/* Only the milk is painted; the page remains visible through the canvas. */
.milk-loader { display: none; }
html.milk-loading:root {
    overflow: hidden;
    scrollbar-gutter: auto;
    animation: milk-loader-scroll-safety 5.5s step-end forwards;
}
html.milk-loading .milk-loader {
    position: fixed;
    inset: 0;
    width: 100vw;
    z-index: 2147483000;
    display: block;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
    animation: milk-loader-safety 5.5s step-end forwards;
}
.milk-loader-liquid { display: block; width: 100%; height: 100%; background: transparent; }
/* This milk veil is active in the head, before a new page can paint. */
html.milk-covered::before {
    content: '';
    position: fixed;
    inset: 0;
    width: 100vw;
    z-index: 2147482999;
    background: #f9fbfc;
    pointer-events: none;
    animation: milk-loader-safety 5.5s step-end forwards;
}
html.milk-pending body { visibility: hidden; animation: milk-page-safety 5.5s step-end forwards; }
html.milk-pending .milk-loader { visibility: visible; }
html.milk-no-graphics.milk-loader-revealing .milk-loader { opacity: 0; transition: opacity 520ms ease-out; }
@keyframes milk-loader-safety { to { visibility: hidden; } }
@keyframes milk-loader-scroll-safety { to { overflow: auto; } }
@keyframes milk-page-safety { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
    html.milk-loading:root { overflow: auto; }
    html.milk-loading .milk-loader { display: none; }
    html.milk-covered::before { display: none; }
    html.milk-pending body { visibility: visible; }
}
@media print {
    html.milk-loading:root { overflow: visible; }
    html.milk-loading .milk-loader { display: none !important; }
    html.milk-covered::before { display: none !important; }
    html.milk-pending body { visibility: visible; }
}