/* =============================================================================
   合流 MergePad · type-display.css — the DISPLAY TYPE SYSTEM (typography as art)
   Loaded after every page stylesheet so these classes win ties. Owner: hero/type agent.
   Face: 得意黑 Smiley Sans (OFL-1.1), subset to the headline characters of zh.js + en.js
   by scripts/subset-fonts.sh → assets/fonts/smiley-display.woff2. Re-run the script
   whenever headline copy changes (characters missing from the subset fall back to Geist /
   the CJK system face, which still looks fine but loses the display character).

   CLASSES (combine freely)
   ─ Display faces ───────────────────────────────────────────────────────────────
   .display            display face (得意黑 → Geist 800), tight tracking, balanced lines.
     size modifiers    .display.xl  clamp(56px → 120px)  hero headline
                       .display.l   clamp(40px → 84px)   page / big section headline
                       .display.m   clamp(30px → 56px)   section title
                       .display.s   clamp(22px → 34px)   card / sub-section title
   .display-grad       ice-blue → white → amber gradient fill (background-clip:text) + soft glow.
                       variants: .display-grad.cool (ice → white only), .display-grad.warm (white → amber)
   .display-outline    outlined stroke text for a CONTRAST word (transparent fill, ice stroke, glow).
                       .display-outline.amber — amber stroke.
   .hl                 key-word highlight: gradient marker underline that draws in (with .reveal/.is-in
                       on it or on an ancestor; static when no JS).
   .sheen              a light sweep across the text on load (after reveal) and again on hover.
                       Works on .display-grad text and on solid text.
   ─ Labels & titles ─────────────────────────────────────────────────────────────
   .kicker             small mono caps label with a glowing lead line (upgrade of base.css .kicker;
                       .kicker.plain drops the line, .kicker.amber tints it amber).
   .title-u            section title with an animated gradient underline (draws in on .is-in).
   .sec-head           wrapper: .kicker + .display.m.title-u + .lede stacked with the right rhythm.
   .lede               refined lead paragraph (17–20px, soft ice-grey, <b>/<strong> lit white).
   ─ Numbers ─────────────────────────────────────────────────────────────────────
   .num-display        big display number: Geist 700, tabular figures, gradient fill, glow.
                       child .u = small unit (BNB, %, min), child .num-cap = caption under it.
                       sizes: default clamp(34px → 56px); .num-display.xl clamp(48 → 88px)
   ─ Motion ──────────────────────────────────────────────────────────────────────
   .reveal             fades + rises + un-blurs in when it enters the viewport. js/ui/type-fx.js
                       observes EVERY .reveal automatically (also ones added later) and adds .is-in.
                       Stagger children: put .reveal on the children and --i:0,1,2… (inline style)
                       or use .reveal-group on a parent (its direct children stagger by nth-child).
   [data-split]        per-character reveal: type-fx splits the text into .ch spans (--i index,
                       --p position 0..1). Re-splits after a language change. Use with .display-grad
                       for a per-character gradient that stays crisp while the characters animate.
   JS API (optional)   window.MPType.split(el) · MPType.observe(root) · MPType.reveal(el)
   Reduced motion      everything renders in its final, static state; no sweeps, no reveals.
   ============================================================================= */

@font-face {
  font-family: "Smiley Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/smiley-display.woff2") format("woff2");
}

:root {
  --ice: #9FDBFF;
  --ice-hi: #DDF4FF;
  --ice-lo: #5FB6F0;
  --teal: #46E0D2;
  --amber: #F5A524;
  --amber-hi: #FFC766;
  --pearl: #FFFFFF;
  --ff-display: "Smiley Sans", "Geist", var(--cjk), system-ui, sans-serif;
  --grad-display: linear-gradient(100deg, var(--ice) 0%, var(--ice-hi) 30%, var(--pearl) 52%, #FFE7BC 72%, var(--amber) 100%);
  --grad-cool: linear-gradient(100deg, var(--ice-lo) 0%, var(--ice) 35%, var(--pearl) 100%);
  --grad-warm: linear-gradient(100deg, var(--pearl) 0%, #FFE7BC 45%, var(--amber) 100%);
  --grad-line: linear-gradient(90deg, var(--teal), var(--ice) 45%, var(--amber));
  --glow-ice: 0 0 28px rgb(120 205 255 / .34);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --sheen-img: linear-gradient(104deg, transparent 0 38%, rgb(255 255 255 / .95) 48%, rgb(255 255 255 / .2) 54%, transparent 62% 100%);
}

/* ─── .display ──────────────────────────────────────────────────────────────── */
.display {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-synthesis: none;
  color: var(--fg-1);
  margin: 0;
}
.lang-en .display { letter-spacing: -0.028em; line-height: .98; }
.display.xl { font-size: clamp(56px, 8.4vw, 120px); line-height: 1.0; }
.display.l  { font-size: clamp(40px, 5.8vw, 84px); }
.display.m  { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.06; }
.display.s  { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -0.005em; }
.lang-en .display.xl { font-size: clamp(50px, 7.6vw, 112px); }
.display .line { display: block; }

/* ─── gradient fill ─────────────────────────────────────────────────────────── */
.display-grad, .sheen:not(.display-grad) {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-repeat: no-repeat;
  background-image: var(--sheen-img), var(--fill, var(--grad-display));
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  padding-block: .06em;          /* keeps descenders and the glow inside the clip box */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.display-grad { --fill: var(--grad-display); filter: drop-shadow(0 0 22px rgb(120 205 255 / .28)) drop-shadow(0 2px 1px rgb(0 0 0 / .35)); }
.display-grad.cool { --fill: var(--grad-cool); }
.display-grad.warm { --fill: var(--grad-warm); filter: drop-shadow(0 0 22px rgb(245 165 36 / .26)); }
.sheen:not(.display-grad) { --fill: linear-gradient(var(--sheen-base, var(--fg-1)), var(--sheen-base, var(--fg-1))); }

/* split text: every character carries its own slice of the gradient (vertical light + a hue that
   moves from ice to amber across the line via --p), so animated characters never lose their fill. */
.display-grad.is-split { background: none; filter: drop-shadow(0 0 22px rgb(120 205 255 / .26)) drop-shadow(0 2px 1px rgb(0 0 0 / .3)); }
.display-grad.is-split .ch {
  --c: color-mix(in oklab, var(--ice) calc((1 - var(--p, 0)) * 100%), var(--amber));
  --c2: color-mix(in oklab, var(--ice-hi) calc((1 - var(--p, 0)) * 100%), #FFE3B0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-repeat: no-repeat;
  background-image: var(--sheen-img), linear-gradient(176deg, var(--pearl) 8%, var(--c2) 42%, var(--c) 100%);
  background-size: 700% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  padding-block: .08em;
}
.display-grad.cool.is-split .ch { --c: color-mix(in oklab, var(--ice-lo) calc((1 - var(--p, 0)) * 100%), var(--ice)); --c2: var(--ice-hi); }
.display-grad.warm.is-split .ch { --c: color-mix(in oklab, #FFE7BC calc((1 - var(--p, 0)) * 100%), var(--amber)); --c2: #FFF3DD; }

/* ─── outlined contrast word ───────────────────────────────────────────────── */
.display-outline {
  color: transparent;
  -webkit-text-fill-color: rgb(159 219 255 / .04);
  -webkit-text-stroke: max(1.2px, .018em) var(--ice);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 14px rgb(120 205 255 / .45));
}
.display-outline .ch { -webkit-text-fill-color: rgb(159 219 255 / .04); -webkit-text-stroke: inherit; background: none; }
.display-outline.amber { -webkit-text-stroke-color: var(--amber-hi); filter: drop-shadow(0 0 14px rgb(245 165 36 / .45)); }

/* ─── key-word marker ──────────────────────────────────────────────────────── */
.hl { position: relative; white-space: nowrap; isolation: isolate; }
.hl::after {
  content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .02em; height: .16em;
  border-radius: .08em; background: var(--grad-line); opacity: .9;
  box-shadow: 0 0 18px rgb(70 224 210 / .35);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out-expo) .35s;
}
.fx .reveal:not(.is-in) .hl::after, .fx .hl.reveal:not(.is-in)::after { transform: scaleX(0); }

/* ─── sheen sweep ──────────────────────────────────────────────────────────── */
@keyframes mp-sheen { from { background-position: 150% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes mp-sheen-ch { from { background-position: 120% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
.sheen { animation: mp-sheen 1.9s var(--ease-out-expo) var(--sheen-delay, .9s) 1 both; }
.sheen:hover { animation: mp-sheen 1.3s var(--ease-out-expo) 0s 1 both; }
.sheen.is-split { animation: none; }
.sheen.is-split .ch { animation: mp-sheen-ch 1.6s var(--ease-out-expo) calc(var(--sheen-delay, 1.1s) + var(--i, 0) * 45ms) 1 both; }
.sheen.is-split:hover .ch { animation: mp-sheen-ch 1.1s var(--ease-out-expo) calc(var(--i, 0) * 28ms) 1 both; }
.fx .sheen.reveal:not(.is-in), .fx .reveal:not(.is-in) .sheen,
.fx .sheen.reveal:not(.is-in) .ch, .fx .reveal:not(.is-in) .sheen .ch { animation-play-state: paused; }

/* ─── kicker ───────────────────────────────────────────────────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 16px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ice);
  background: linear-gradient(90deg, var(--ice-hi), var(--ice) 60%, var(--teal));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  border: 0; padding: 0; border-radius: 0;
}
.lang-en .kicker { letter-spacing: .16em; }
/* zh: CJK is never tracked; Latin names in a zh kicker keep their own case (MergepadPay, BNB Chain) */
:lang(zh-CN) .kicker { letter-spacing: .06em; text-transform: none; }
.kicker::before {
  content: ""; flex: none; width: 22px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--teal) 40%, var(--ice-hi));
  box-shadow: 0 0 10px rgb(70 224 210 / .8);
}
.kicker.amber { background-image: linear-gradient(90deg, #FFE7BC, var(--amber)); }
.kicker.amber::before { background: linear-gradient(90deg, transparent, var(--amber)); box-shadow: 0 0 10px rgb(245 165 36 / .8); }
.kicker.plain::before { display: none; }

/* ─── section title underline + head block ────────────────────────────────── */
.title-u { position: relative; padding-bottom: .34em; }
.title-u::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: min(2.6em, 140px); height: 3px; border-radius: 3px;
  background: var(--grad-line); box-shadow: 0 0 16px rgb(70 224 210 / .5);
  transform-origin: 0 50%; transition: transform 1.2s var(--ease-out-expo) .25s;
}
.fx .title-u.reveal:not(.is-in)::after, .fx .reveal:not(.is-in) .title-u::after { transform: scaleX(0); }
.sec-head { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(24px, 4vw, 44px); }
.sec-head .display { margin: 0; }
.sec-head .lede { margin-top: 4px; }

.lede {
  font-size: clamp(16px, 1.35vw, 19.5px); line-height: 1.62; font-weight: 400; letter-spacing: .005em;
  color: #A9BDCB; max-width: 38em; text-wrap: pretty; margin: 0;
}
.lede b, .lede strong { color: var(--fg-1); font-weight: 600; background: linear-gradient(transparent 72%, rgb(70 224 210 / .28) 72% 92%, transparent 92%); }
.lede em { font-style: normal; color: var(--amber-hi); }

/* ─── display numbers ─────────────────────────────────────────────────────── */
.num-display {
  display: inline-flex; align-items: baseline; gap: .12em;
  font-family: "Geist", var(--font-sans); font-weight: 700;
  font-size: clamp(34px, 3.8vw, 56px); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
  background-image: linear-gradient(180deg, var(--pearl) 10%, var(--ice-hi) 45%, var(--ice) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 18px rgb(120 205 255 / .3));
  padding-block: .05em;
}
.num-display.warm { background-image: linear-gradient(180deg, #FFF6E6 10%, #FFD591 50%, var(--amber) 100%); filter: drop-shadow(0 0 18px rgb(245 165 36 / .3)); }
.num-display.xl { font-size: clamp(48px, 6vw, 88px); }
.num-display .u {
  font-size: .36em; font-weight: 600; letter-spacing: .02em; line-height: 1;
  background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: .82;
}
.num-cap { display: block; margin-top: 8px; font-size: 12.5px; line-height: 18px; color: #8FA5B6; letter-spacing: .02em; }

/* ─── reveal ───────────────────────────────────────────────────────────────── */
.fx .reveal {
  transition: opacity .9s var(--ease-out-expo), transform 1.1s var(--ease-out-expo), filter .9s var(--ease-out-expo);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 90ms);
}
.fx .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(8px); }
.fx .reveal-group > * { transition: opacity .9s var(--ease-out-expo), transform 1.1s var(--ease-out-expo); }
.fx .reveal-group:not(.is-in) > * { opacity: 0; transform: translate3d(0, 22px, 0); }
.fx .reveal-group > :nth-child(2) { transition-delay: 90ms; }
.fx .reveal-group > :nth-child(3) { transition-delay: 180ms; }
.fx .reveal-group > :nth-child(4) { transition-delay: 270ms; }
.fx .reveal-group > :nth-child(5) { transition-delay: 360ms; }
.fx .reveal-group > :nth-child(6) { transition-delay: 450ms; }
.fx .reveal-group > :nth-child(n+7) { transition-delay: 540ms; }

/* per-character */
.ch { display: inline-block; white-space: pre; }
.fx [data-split] .ch {
  transition: opacity .8s var(--ease-out-expo), transform 1.2s var(--ease-out-expo), filter .8s var(--ease-out-expo);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 42ms);
}
.fx [data-split].reveal:not(.is-in) .ch, .fx .reveal:not(.is-in) [data-split] .ch {
  opacity: 0; transform: translate3d(0, .42em, 0) rotate(4deg) scale(.96); filter: blur(10px);
}
/* a split .reveal itself stays still; its characters do the moving */
.fx [data-split].reveal:not(.is-in) { opacity: 1; transform: none; filter: none; }
.fx .display-grad[data-split].reveal:not(.is-in) { filter: drop-shadow(0 0 22px rgb(120 205 255 / .26)); }

@media (prefers-reduced-motion: reduce) {
  .sheen, .sheen .ch, .sheen:hover, .sheen.is-split:hover .ch { animation: none !important; }
  .fx .reveal, .fx .reveal-group > *, .fx [data-split] .ch, .hl::after, .title-u::after { transition: none !important; }
  .fx .reveal:not(.is-in), .fx .reveal-group:not(.is-in) > *,
  .fx [data-split].reveal:not(.is-in) .ch, .fx .reveal:not(.is-in) [data-split] .ch { opacity: 1 !important; transform: none !important; filter: none !important; }
  .fx .reveal:not(.is-in) .hl::after, .fx .hl.reveal:not(.is-in)::after,
  .fx .title-u.reveal:not(.is-in)::after, .fx .reveal:not(.is-in) .title-u::after { transform: none !important; }
}