/* Copyright (c) 2026 matoio.com. All rights reserved. */
/*
 * matoio.com homepage drafts: the mato series tokens every draft shares (brand colours,
 * wordmark colour rule, fonts, the language switch). Each draft brings its own layout,
 * palette, and motion on top.
 *
 * Wordmark rule: light background → mato #EB4534, crown #009A7B, name #161C39;
 * dark background → name white, the other two unchanged. Set `.on-dark` on a wrapper.
 */

@font-face { font-family: "Sora Variable"; font-display: swap; font-weight: 100 800; src: url(fonts/sora-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Sora Variable"; font-display: swap; font-weight: 100 800; src: url(fonts/sora-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: "Outfit Variable"; font-display: swap; font-weight: 100 900; src: url(fonts/outfit-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Outfit Variable"; font-display: swap; font-weight: 100 900; src: url(fonts/outfit-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: "JetBrains Mono Variable"; font-display: swap; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"); }
/* The mato typeface: Latin letters, digits, a few signs. Never synthesize bold. */
@font-face { font-family: "matoio"; font-display: swap; font-weight: 400; src: url(fonts/matoio-Regular.woff2) format("woff2"); }

:root {
  --mo-tomato: #eb4534;
  --mo-leaf: #009a7b;
  --mo-navy: #161c39;
  --mo-font-cjk: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mo-font-display: "Sora Variable", var(--mo-font-cjk);
  --mo-font-ui: "Outfit Variable", var(--mo-font-cjk);
  --mo-font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
  --mo-font-mato: "matoio", "Sora Variable", sans-serif;
  --mo-gutter: clamp(16px, 4vw, 56px);
  --mo-maxw: 1360px;
  --mo-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--mo-font-ui); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0.01em; }

.wordmark { overflow: visible; height: 100%; width: auto; }
.wordmark .tone-mato { fill: var(--mo-tomato); }
.wordmark .tone-crown { fill: var(--mo-leaf); }
.wordmark .tone-name { fill: var(--mo-navy); transition: fill 300ms; }
.on-dark .wordmark .tone-name { fill: #fff; }
[data-mark] { display: inline-block; line-height: 0; }

/* Capsule buttons, series style. */
.mo-btn { display: inline-flex; align-items: center; gap: 0.5em; height: 48px; padding: 0 24px; border-radius: 999px; border: 0; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform 300ms var(--mo-ease), background 200ms, color 200ms; white-space: nowrap; }
.mo-btn:hover { transform: translateY(-2px); }
.mo-btn:focus-visible, .mo-lang:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mo-btn .arrow { transition: transform 300ms var(--mo-ease); }
.mo-btn:hover .arrow { transform: translateX(4px); }

/* Language switch: shows the language you switch to. */
.mo-lang { height: 36px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; font: 600 13px/1 var(--mo-font-ui); letter-spacing: 0.04em; cursor: pointer; opacity: 0.85; }
.mo-lang:hover { opacity: 1; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Reveal on scroll (set by kit/site.js). */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--mo-ease), transform 900ms var(--mo-ease); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}