/*
 * The Momo logo system on the legacy /app (brand/logo): the retro MOMO wordmark in the header and the
 * title-card plate (ink rim, hard shadow, 8° lean) on the primary buttons. Loaded after the atelier skin; the app's own chunk CSS
 * loads later still, hence `html body` (one more point than the skin's `html`).
 */
/* Header: the wordmark instead of the word "Momo". */
html body .momo-app-back span { font-size: 0; line-height: 0; }
html body .momo-app-back span::before {
  content: ""; display: inline-block; width: 104px; height: 23px; vertical-align: middle;
  background: url(/home-assets/logo/momo-wordmark-plain.svg) left center / contain no-repeat;
}

/* Primary actions and the wallet button: the title-card plate. */
html body .momo-app-primary-button,
html body .momo-app-wallet-button:not(.is-wrong-chain) {
  border: 2px solid #3d2f35; border-radius: 8px; background: #ffcad4; color: #3d2f35;
  box-shadow: 3px 3px 0 #3d2f35; transform: skewX(-8deg);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif; font-weight: 900; letter-spacing: 0.06em;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html body .momo-app-primary-button:not(:disabled):hover,
html body .momo-app-wallet-button:not(.is-wrong-chain):hover { background: #ffc0cf; transform: skewX(-8deg) translate(-1px, -1px); box-shadow: 4px 4px 0 #3d2f35; }
html body .momo-app-primary-button:not(:disabled):active,
html body .momo-app-wallet-button:not(.is-wrong-chain):active { transform: skewX(-8deg) translate(2px, 2px); box-shadow: 1px 1px 0 #3d2f35; }
html body .momo-app-primary-button:disabled { box-shadow: none; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { html body .momo-app-primary-button, html body .momo-app-wallet-button { transition: none; } }

/* Labels under the nav: katakana, as on the homepage (the skin had kanji). */
html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(1) > span::after { content: "スワップ" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(2) > span::after { content: "トレード" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(3) > span::after { content: "アクティベート" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(4) > span::after { content: "リワード" / ""; }
html body .momo-app-shell .momo-app-more > button > span::after { content: "モア" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button[data-momo-shortcut="raffle"] > span::after { content: "ラッフル" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button[data-momo-shortcut="analytics"] > span::after { content: "アナリティクス" / ""; }
html body .momo-app-shell .momo-app-nav .momo-app-more-menu > button:nth-of-type(1)::after { content: "ラッフル" / ""; }
html body .momo-app-shell .momo-app-nav .momo-app-more-menu > button:nth-of-type(2)::after { content: "アナリティクス" / ""; }
html body .momo-app-shell .momo-app-nav .momo-app-more-menu > button:nth-of-type(3)::after { content: "ドキュメント" / ""; }

/* Loading: the wordmark fills with colour left to right, on the paper ground. It shows before the
   script runs (#root is still empty) and while the app chunk loads (its "Opening MOMO…" screen). */
html body #root:empty,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child) {
  position: relative; min-height: 100vh; min-height: 100svh; background: #fff8f4;
}
html body #root > main.min-h-screen.place-items-center:has(> p:only-child) > p {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html body #root:empty::before, html body #root:empty::after,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::before,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(320px, 68vw); aspect-ratio: 679 / 210;
  transform: translate(-50%, -50%); background: url(/assets/momo-wordmark-20260930.svg) center / contain no-repeat;
}
html body #root:empty::before,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::before { opacity: 0.16; filter: grayscale(1); }
html body #root:empty::after,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::after { animation: momo-fill 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes momo-fill {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  70% { clip-path: inset(0 0 0 0); opacity: 1; }
  88% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body #root:empty::after,
  html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::after { animation: none; clip-path: none; }
}