/* One loading state for every section: the Moneyness mark, hopping, with its
   shadow, above the sentence the section already prints. CSS only, so the
   sections keep their own "Reading the record…" copy and nothing here can break
   a data path. A section that is not waiting does not render these classes. */
.pm-wait, .pf-wait, .ivc-note, .mn-ch-empty.wait {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 56px 0; text-align: center; color: var(--ink2, #6b5a47);
  font-size: 12px; letter-spacing: .04em;
}
.pm-wait::before, .pf-wait::before, .ivc-note::before, .mn-ch-empty.wait::before {
  content: ""; width: 44px; height: 44px; border-radius: 12px;
  background: url(logo-mark.png) center / cover no-repeat;
  transform-origin: 50% 100%; animation: mm-hop 1s cubic-bezier(.3, .6, .4, 1) infinite;
}
/* oai-b.css pins .pm-wait with :root:root specificity; match it. */
:root:root body #premium-root .pm-wait { flex-direction: column; gap: 12px; font-size: 12px; color: var(--ink2, #6b5a47); }

@keyframes mm-hop {
  0%, 100% { transform: translateY(0) scale(1.06, .94); }
  45% { transform: translateY(-14px) scale(.97, 1.04); }
}

/* Moving between sections: the new view eases in instead of snapping. */
.view:not([hidden]) { animation: mm-view-in .24s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mm-view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-wait::before, .pf-wait::before, .ivc-note::before, .mn-ch-empty.wait::before { animation: none; }
  .view:not([hidden]) { animation: none; }
}

/* Landing on /match: logo-hop splash until Match owns the screen (match.js sets body[data-mm="1"]). */
#boot-match{display:none}
html.boot-match body:not([data-mm="1"]) #boot-match{display:flex;position:fixed;inset:84px 0 0;z-index:5;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg,#fffaf3);font:400 12px/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2,#6b5a47)}
#boot-match img{border-radius:12px;transform-origin:50% 100%;animation:mm-hop 1s cubic-bezier(.3,.6,.4,1) infinite}
html.boot-match body:not([data-mm="1"]) .view[data-view="overview"]{display:none}
@media (prefers-reduced-motion:reduce){#boot-match img{animation:none}}