/* The splash while a page loads (config preloader; layout.php, theme.js, app.js). It covers the page only with
   JavaScript on, lifts when app.js adds .nm-loaded, and lifts at 4s by itself if no script ever does. */
.nm-preloader { display: none; }
html:not(.no-js) .nm-preloader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--ground, #F3EDE0); color: var(--ink);
  transition: opacity .35s ease, visibility 0s linear .35s;
  animation: nm-preloader-lift 0s linear 4s forwards;
}
html.nm-loaded .nm-preloader { opacity: 0; visibility: hidden; pointer-events: none; }
.nm-preloader-mark { margin: 0; font: 900 clamp(32px, 7vw, 56px)/1 var(--display); letter-spacing: -.03em; }
.nm-preloader-mark span { color: var(--red); display: inline-block; }
.nm-preloader-bar {
  position: relative; width: 160px; height: 6px; overflow: hidden;
  border: var(--b) solid var(--line); border-radius: 999px; background: var(--card);
}
.nm-preloader-bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--red); }
@keyframes nm-preloader-lift { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: no-preference) {
  .nm-preloader-mark span { animation: nm-preloader-dot .9s cubic-bezier(.3, 1.6, .5, 1) infinite alternate; }
  .nm-preloader-bar::after { animation: nm-preloader-run 1.1s ease-in-out infinite; }
  @keyframes nm-preloader-dot { to { transform: translateY(-.25em); } }
  @keyframes nm-preloader-run { from { translate: -110% 0; } to { translate: 260% 0; } }
}