/* Loaded as a plain <link> before anything else, so the first paint is already dark and the
   loader is visible immediately (no white flash between pages). Kept tiny on purpose. */
@font-face {
  font-family: "Anton";
  src: url("/fonts/anton.woff2") format("woff2");
  font-display: swap;
}
/* Only <html> gets a background: the page art is painted on <html> too (styles.css), so the
   dark overlay (body::before, z-index -1) stays on top of it. A body background would cover it. */
html { background: #070503; }
body { color: #eef3e4; margin: 0; }
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 8px;
  background: radial-gradient(circle at center, #1a1406 0%, #070503 70%);
  transition: opacity 0.35s ease, visibility 0.35s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader img { width: 180px; height: auto; animation: loader-hover 0.9s ease-in-out infinite alternate; }
.loader img:not([src]) { visibility: hidden; }
.loader span {
  font-family: "Anton", Impact, sans-serif; font-size: 22px; letter-spacing: 2px; text-transform: uppercase;
  color: #e1f05a; text-shadow: 2px 2px 0 #000; animation: loader-blink 1s steps(2) infinite;
}
@keyframes loader-hover { to { transform: translateY(-14px) rotate(3deg); } }
@keyframes loader-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .loader img, .loader span { animation: none; } }