/* Morestone homepage with Mo. Built from the Claude Design canvas "Mo 首页设计", artboard
   "A · 卡片 + 地平线" (desktop) and "手机 · 卡片 + 地平线" (phone). */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/IBMPlexSans-400-latin.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/IBMPlexSans-500-latin.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --page: #F4F3EE;
  --wall: #F1EFEA;
  --floor: #EAE8E1;
  --ink: #07111A;
  --bubble: #07111A;
  --bubble-ink: #F4F3EE;
  --bx: -22%;
}

html, body { margin: 0; height: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--page);
  touch-action: manipulation;
}

a { color: rgba(7, 17, 26, .72); }
a:hover { color: var(--ink); }
a:focus-visible, .mo-button:focus-visible { outline: 2px solid rgba(0, 119, 194, .55); outline-offset: 4px; border-radius: 6px; }

/* header */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px clamp(20px, 3.4vw, 48px);
}
.brand { display: block; line-height: 0; }
.brand img { display: block; height: 33px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); font-size: 15px; }
.site-nav a { text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); padding-bottom: 2px; }

/* phone menu: a <details> element, so it opens and closes without a script */
.menu { display: none; }
.menu summary {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 -11px 0 0; color: var(--ink); cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { display: block; }
.menu[open] .menu-icon-open, .menu:not([open]) .menu-icon-close { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 64px; padding: 4px 20px 20px; background: var(--page); }
.menu-panel a {
  display: block; padding: 16px 0; font-size: 22px; font-weight: 500; color: var(--ink);
  border-top: 1px solid rgba(7, 17, 26, .1); box-shadow: none;
}
.menu-panel a[aria-current="page"] { color: #0077C2; box-shadow: none; padding-bottom: 16px; }

/* the card, its floor and the identity under the horizon */
.card {
  position: absolute;
  left: clamp(12px, 1.6vw, 24px); right: clamp(12px, 1.6vw, 24px);
  top: 84px; bottom: clamp(12px, 1.6vw, 24px);
  border-radius: 32px; background: var(--wall);
}
.floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 37%; border-radius: 0 0 32px 32px;
  background: var(--floor); box-shadow: inset 0 1px 0 rgba(7, 17, 26, .06);
}
.identity {
  position: absolute; left: 24px; right: 24px; top: calc(63% + clamp(24px, 4.5vh, 44px));
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 22px);
  text-align: center;
}
.identity h1 {
  margin: 0; font-size: clamp(26px, 2.9vw, 42px); line-height: 1.08; font-weight: 500;
  letter-spacing: -0.025em; color: var(--ink);
}
.br-phone { display: none; }
.cta {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; box-sizing: border-box;
  padding: 0 1.3em; border-radius: 999px; border: 1px solid rgba(7, 17, 26, .18);
  font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color .2s ease;
}
.cta:hover, .cta.is-looked { border-color: rgba(7, 17, 26, .6); }
.copyright {
  position: absolute; right: clamp(24px, 4.4vw, 64px); bottom: 24px; margin: 0;
  font-size: 12px; color: rgba(7, 17, 26, .5);
}

/* Mo, standing on the horizon */
.mo {
  position: absolute; left: 50%; bottom: 37%; z-index: 4;
  width: clamp(220px, 26vw, 40vh); transform: translate(-50%, 4%);
}
.mo-shadow {
  position: absolute; left: 12%; right: 12%; bottom: 1.2%; height: 5.6%;
  border-radius: 50%; background: rgba(7, 17, 26, .15); filter: blur(5px);
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.mo-button {
  position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0;
  background: none; cursor: pointer; transform-origin: 50% 96%;
  transition: transform .24s cubic-bezier(.2, .7, .3, 1);
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.mo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mo-skew { transform-origin: 60px 96px; transition: transform .35s ease-out; }
.mo-face-move { transition: transform .14s ease-out; }
.mo-eye-move { transition: transform .08s ease-out; }

/* before the script takes over: R2 instead of Mo when the opening will play */
.mo-opening #mo-body, .mo-opening #mo-face { display: none; }
.mo-opening #mo-stone, .mo-opening #mo-m { display: inline; }
.mo-opening .mo-shadow { opacity: 0; }

/* the small bubbles out of the mouth and the speech bubble; both drift a little with the gaze */
.mo-dots {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.mo-dot { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--bubble); }
.mo-dot.near { left: 51.6%; bottom: 84%; width: 2.6%; }
.mo-dot.far { left: 53.8%; bottom: 89.2%; width: 4%; }
.mo-bubble-anchor {
  position: absolute; left: 50%; bottom: 97%; width: 0; height: 0; z-index: 3;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.mo-bubble {
  position: absolute; left: 0; bottom: 0; margin: 0; width: max-content;
  max-width: min(15em, 84vw); box-sizing: border-box; padding: .5em .85em .56em;
  border-radius: 1.05em; background: var(--bubble); color: var(--bubble-ink);
  font-size: clamp(20px, 1.94vw, 28px); line-height: 1.22; font-weight: 500;
  letter-spacing: -0.01em; text-align: center; text-wrap: balance;
  transform: translate(var(--bx), 0); transform-origin: 22% 100%;
  pointer-events: none;
}
.mo-bubble.is-long { font-size: clamp(17px, 1.45vw, 21px); max-width: min(21em, 86vw); }
.mo-word { position: relative; }
.mo-src {
  position: relative; display: block; margin-top: .45em; font-size: .6em; line-height: 1.3;
  font-weight: 400; letter-spacing: 0; color: rgba(244, 243, 238, .62);
}

.mo-idle { opacity: 0; }
.mo-in-a { animation: moInA .4s cubic-bezier(.3, 1.35, .55, 1) .12s both; }
.mo-in-b { animation: moInB .4s cubic-bezier(.3, 1.35, .55, 1) .12s both; }
.mo-w-a { animation: moWA .26s cubic-bezier(.2, .8, .2, 1) both; }
.mo-w-b { animation: moWB .26s cubic-bezier(.2, .8, .2, 1) both; }
.mo-out { animation: moOut .2s ease-in both; }
.mo-near-a { animation: moNearA .34s cubic-bezier(.3, .6, .2, 1) both; }
.mo-near-b { animation: moNearB .34s cubic-bezier(.3, .6, .2, 1) both; }
.mo-far-a { animation: moFarA .3s cubic-bezier(.3, 1.5, .55, 1) .1s both; }
.mo-far-b { animation: moFarB .3s cubic-bezier(.3, 1.5, .55, 1) .1s both; }
.mo-dot-out { animation: moDotOut .16s ease-in .08s both; }
@keyframes moInA { 0% { opacity: 0; transform: translate(var(--bx), 12px) scale(.3) rotate(-3deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate(var(--bx), 0) scale(1) rotate(0deg); } }
@keyframes moInB { 0% { opacity: 0; transform: translate(var(--bx), 12px) scale(.3) rotate(-3deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate(var(--bx), 0) scale(1) rotate(0deg); } }
@keyframes moWA { 0% { opacity: 0; top: .3em; filter: blur(3px); } 100% { opacity: 1; top: 0; filter: blur(0); } }
@keyframes moWB { 0% { opacity: 0; top: .3em; filter: blur(3px); } 100% { opacity: 1; top: 0; filter: blur(0); } }
@keyframes moOut { 0% { opacity: 1; transform: translate(var(--bx), 0) scale(1); } 100% { opacity: 0; transform: translate(var(--bx), -6px) scale(1.06); } }
@keyframes moNearA { 0% { opacity: 0; transform: translate(-112%, 1950%) scale(.4); } 15% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes moNearB { 0% { opacity: 0; transform: translate(-112%, 1950%) scale(.4); } 15% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes moFarA { 0% { opacity: 0; transform: translateY(40%) scale(0); } 100% { opacity: 1; transform: none; } }
@keyframes moFarB { 0% { opacity: 0; transform: translateY(40%) scale(0); } 100% { opacity: 1; transform: none; } }
@keyframes moDotOut { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0); } }
@keyframes moFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes moFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* phone */
@media (max-width: 640px) {
  :root { --bx: -50%; }
  .site-header { padding: 10px 20px; min-height: 64px; box-sizing: border-box; }
  .brand img { height: 24px; }
  .site-nav > a { display: none; }
  .menu { display: block; }
  .card { left: 12px; right: 12px; top: 64px; bottom: 12px; border-radius: 24px; }
  .floor { height: 40%; border-radius: 0 0 24px 24px; }
  .identity { left: 20px; right: 20px; top: calc(60% + 22px); gap: 14px; }
  .identity h1 { font-size: 26px; }
  .br-phone { display: inline; }
  .cta { padding: 0 1.2em; }
  .mo { bottom: 40%; width: min(51vw, 29vh); }
  .mo-shadow { filter: blur(4px); }
  .mo-bubble { font-size: 20px; transform-origin: 50% 100%; }
  .mo-bubble.is-long { font-size: 16px; max-width: 84vw; }
  .copyright { left: 0; right: 0; bottom: 14px; text-align: center; font-size: 10px; color: rgba(7, 17, 26, .45); }
}

@media (prefers-reduced-motion: reduce) {
  .mo-in-a, .mo-in-b, .mo-near-a, .mo-near-b, .mo-far-a, .mo-far-b { animation: moFade .2s ease-out both; }
  .mo-out, .mo-dot-out { animation: moFadeOut .15s ease-in both; }
  .mo-w-a, .mo-w-b { animation: none; }
  .mo-button, .mo-skew, .mo-shadow, .mo-dots, .mo-bubble-anchor { transition: none; }
}