/* TWO MINDS — shared loading-screen look: a trembling logo icon, a counting
   percentage, a blue-to-red progress bar, on a solid dark field, with a glitchy
   flicker on the way out. Self-contained (hardcoded colors, not the main site's
   --bg/--ink/etc custom properties) so it drops into any page — the main website
   (static/css/site-chrome.css imports this file rather than redefining it),
   the admin panel, and the demo experience — without needing their design tokens.

   Markup (see website/partials/loader.php for the reference version):
     <div id="tm-loader">
       <div class="tm-loader-inner">
         <div class="tm-loader-icon"></div>
         <div class="tm-loader-pct" id="tm-loader-pct">0.0000</div>
         <div class="tm-loader-bar"><div class="tm-loader-bar-fill" id="tm-loader-bar-fill"></div></div>
       </div>
     </div>
   Driven by window.tmRunLoader(opts) — static/js/tm-loader.js. */
#tm-loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050506;
}
#tm-loader.tm-glitch-out { animation: tm-loader-exit 0.4s steps(1, end) forwards; pointer-events: none; }
@keyframes tm-loader-exit {
  0% { opacity: 1; transform: translate(0, 0); }
  10% { opacity: 0.15; transform: translate(-5px, 2px); }
  20% { opacity: 1; transform: translate(4px, -3px); }
  30% { opacity: 0.1; transform: translate(-3px, 0); }
  40% { opacity: 0.9; transform: translate(2px, 2px); }
  50% { opacity: 0; transform: translate(-4px, -1px); }
  60% { opacity: 0.7; transform: translate(0, 0); }
  70% { opacity: 0; }
  85% { opacity: 0.3; }
  100% { opacity: 0; visibility: hidden; }
}
.tm-loader-inner { position: relative; width: 220px; height: 220px; animation: tm-loader-tremble 0.15s steps(1) infinite; }
@keyframes tm-loader-tremble {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1px, 1px); }
  30% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, -1px); }
  70% { transform: translate(1px, 1px); }
  90% { transform: translate(-1px, 0); }
}
.tm-loader-icon {
  position: absolute; inset: 0; margin: auto;
  width: 150px; height: 150px;
  background: #fff;
  -webkit-mask-image: url('/static/img/logo/logo_white.png');
  mask-image: url('/static/img/logo/logo_white.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: 0.9;
}
.tm-loader-pct {
  position: absolute;
  top: 14px; right: -8px;
  font-family: var(--tm-font-mono-fit, monospace);
  font-size: 15px;
  letter-spacing: 0.03em;
  color: rgba(247, 242, 232, 0.55);
  font-variant-numeric: tabular-nums;
}
.tm-loader-bar {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 150px; height: 1px;
  background: rgba(247, 242, 232, 0.15);
}
.tm-loader-bar-fill { height: 100%; width: 0%; background: linear-gradient(to right, #4d72ff, #c44c67); background-size: 150px 100%; }