/* Tally loader (tally-loader.js): the real Tally art (480 px, shown at 152 px). Motion: a gentle bob with a soft shadow
   that shrinks and fades as Tally rises. Reduced motion: Tally stands still. Tokens from panelab.css. */
.tally-loader { display: grid; justify-items: center; align-content: center; gap: 18px; min-height: min(56vh, 460px); padding: 32px 16px; text-align: center; }
.tally-loader[hidden] { display: none; }
.tally-loader__bot { display: grid; justify-items: center; gap: 2px; }
.tally-loader__art { display: block; width: 152px; height: auto; animation: tally-bob 2s ease-in-out infinite; }
.tally-loader__shadow { display: block; width: 84px; height: 10px; border-radius: 50%; background: var(--ink, #141414); opacity: .14; animation: tally-shadow 2s ease-in-out infinite; }
.tally-loader__text { margin: 0; font: 600 var(--t-small, 16px)/1.4 var(--body, system-ui, sans-serif); color: var(--ink-2, #3f3f3c); }

@keyframes tally-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tally-shadow { 0%, 100% { transform: scaleX(1); opacity: .16; } 50% { transform: scaleX(.72); opacity: .07; } }

@media (prefers-reduced-motion: reduce) {
  .tally-loader__art, .tally-loader__shadow { animation: none; }
}

/* Page veil (core/veil.js, owner 2026-10-26): the same Tally, fixed over the whole page, for the hops of the comic ->
   sign up -> /account/ -> comic round trip. The page under it stays laid out (visibility, not display), so the reader
   can scroll to the choice while it is up. Turned on in a page (the gate tap, the signup press): the canvas at once,
   Tally and the line fade in after 150 ms, the loader's delay. A hop (--hop) shows them in its first paint, no fade,
   so each page of the trip looks like the last. Its own font stack: the comic page has no --body token.
   Reduced motion: no bob and no fade, Tally just appears. */
html[data-veil] body { visibility: hidden; }
.tally-veil { position: fixed; inset: 0; z-index: 2147483000; min-height: 0; margin: 0; background: var(--canvas, #f0f0ee); visibility: visible; }
.tally-veil .tally-loader__text { font-family: Lexend, system-ui, sans-serif; }
.tally-veil .tally-loader__bot, .tally-veil .tally-loader__text { animation: tally-veil-in .2s ease-out .15s both; }
.tally-veil--hop .tally-loader__bot, .tally-veil--hop .tally-loader__text { animation: none; }
@keyframes tally-veil-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tally-veil .tally-loader__bot, .tally-veil .tally-loader__text { animation-duration: 1ms; }
}