/* Base: reset, type, layout helpers, buttons, top bar, reveal and language transitions. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--page-ink);
  font: 400 16px/1.75 var(--sans); letter-spacing: .01em;
  transition: background-color 1.2s ease, color 1.2s ease;
  overflow-x: hidden;
}
html[lang="en"] body { font-size: 16.5px; letter-spacing: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: var(--wrap); margin-inline: auto; }
html[lang="zh"] .en-only, html[lang="en"] .zh-only { display: none; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--page-ink); color: var(--page); text-decoration: none; transition: top .25s var(--out); }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55em; padding: .86em 1.4em; border-radius: 999px;
  font-size: .94rem; font-weight: 500; letter-spacing: .01em; line-height: 1; text-decoration: none; cursor: pointer; border: 0;
  transition: transform .45s var(--out), box-shadow .45s var(--out), color .35s ease, background-color 1.2s ease, translate .5s var(--out);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .45s var(--out); }
.btn::before {                                     /* a wash of colour wells up from where the pointer came in */
  content: ""; position: absolute; left: var(--mx); top: var(--my); z-index: -1; width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, currentColor 16%, transparent);
  transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--out);
}
.btn:hover::before { transform: translate(-50%, -50%) scale(1); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
/* primary: deep ink with the arrow in its own accent circle; secondary: frosted glass */
.btn-primary { background: var(--page-ink); color: var(--page); padding: .42em .42em .42em 1.4em; gap: .9em; box-shadow: 0 14px 28px -16px rgba(8, 16, 36, .55); }
.btn-primary:hover { box-shadow: 0 20px 36px -16px rgba(8, 16, 36, .6); }
.btn-ico { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; flex: none; background: var(--page-accent); color: var(--page-on-accent); transition: transform .55s var(--out), background-color 1.2s ease; }
.btn-ico svg { width: 1.05em; height: 1.05em; }
.btn-primary:hover .btn-ico { transform: rotate(-45deg) scale(1.06); }
.btn-primary:hover svg:last-child { transform: none; }
.btn-primary::before { background: color-mix(in srgb, var(--page) 10%, transparent); }
.btn-ghost {
  background: color-mix(in srgb, var(--page-card) 80%, transparent); color: var(--page-ink); box-shadow: inset 0 0 0 1px var(--page-line), 0 6px 18px -14px rgba(8, 16, 36, .4);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--page-ink) 30%, transparent), 0 10px 24px -14px rgba(8, 16, 36, .45); }
.btn-sm { padding: .62em 1.05em; font-size: .86rem; }

/* proof tags: compact, quiet until hovered */
.btn-proof {
  display: inline-flex; align-items: center; gap: .45em; margin-top: 14px; padding: .48em .55em .48em .6em;
  border: 0; border-radius: 10px; background: color-mix(in srgb, var(--page-ink) 5.5%, transparent); cursor: pointer;
  font-size: .8rem; font-weight: 500; color: var(--page-ink);
  transition: color .3s ease, transform .4s var(--out), background-color .3s ease;
}
.btn-proof svg { width: 1.1em; height: 1.1em; color: var(--page-accent); }
.btn-proof:hover { background: color-mix(in srgb, var(--page-accent) 11%, transparent); color: var(--page-accent); transform: translateY(-1px); }
.btn-proof:active { transform: scale(.96); }
.btn-proof-count { min-width: 1.7em; padding: .1em .45em; border-radius: 6px; background: var(--page-card); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: center; transition: background-color .3s ease, color .3s ease; }
.btn-proof:hover .btn-proof-count { background: var(--page-accent); color: var(--page-on-accent); }

/* filters: a segmented control with a sliding thumb */
.ev-filters { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; margin-bottom: 28px; border-radius: 999px; background: color-mix(in srgb, var(--page-ink) 6%, transparent); }
.seg-thumb { position: absolute; left: 0; top: 4px; height: calc(100% - 8px); width: var(--w, 0px); border-radius: 999px; background: var(--page-ink); transform: translateX(var(--x, 0px)); box-shadow: 0 6px 14px -8px rgba(8, 16, 36, .6); transition: transform .5s var(--out), width .5s var(--out), background-color 1.2s ease; }
.chip {
  position: relative; z-index: 1; padding: .55em 1.1em; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  font-size: .86rem; font-weight: 500; color: var(--page-soft); transition: color .35s ease;
}
.chip:hover { color: var(--page-ink); }
.chip.is-on { color: var(--page); }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px;
  padding: 18px var(--gutter); color: var(--ink);
  transition: background-color .5s ease, color .8s ease, padding .5s var(--out), box-shadow .5s ease, backdrop-filter .5s ease, transform .5s var(--out);
}
.topbar.scrolled {
  padding-block: 11px; color: var(--page-ink);
  background: color-mix(in srgb, var(--page) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--page-line);
}
.brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand-name { font-family: var(--serif); font-weight: 900; font-size: 1.2rem; letter-spacing: .12em; }
html[lang="en"] .brand-name { font-family: var(--caps); font-weight: 600; font-size: 1.05rem; letter-spacing: .3em; }
.brand small { font-family: var(--caps); font-size: .68rem; letter-spacing: .32em; opacity: .7; }
.nav { margin-left: auto; display: flex; gap: 4px; }
.nav-link {
  position: relative; padding: 6px 10px; border-radius: 999px; font-size: .9rem; text-decoration: none; opacity: .82;
  transition: opacity .3s ease, background-color .3s ease;
}
.nav-num { display: none; }
.nav-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--out); }
.nav-link:hover, .nav-link.is-active { opacity: 1; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.topbar-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  position: relative; display: flex; width: 86px; height: 34px; padding: 3px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, var(--sky-top) 18%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .82rem; font-weight: 600; transition: border-color .4s ease, transform .35s var(--out);
}
.lang-switch:hover { transform: translateY(-1px); border-color: currentColor; }
.lang-switch b { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; transition: color .5s ease; }
.lang-switch::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--accent); transition: transform .7s var(--out), background-color .8s ease;
}
.topbar.scrolled .lang-switch::before { background: var(--page-accent); }
.lang-switch[data-lang="en"]::before { transform: translateX(100%); }
.lang-switch[data-lang="zh"] b:first-of-type, .lang-switch[data-lang="en"] b:last-of-type { color: var(--on-accent); }
.topbar.scrolled .lang-switch[data-lang="zh"] b:first-of-type, .topbar.scrolled .lang-switch[data-lang="en"] b:last-of-type { color: var(--page-on-accent); }
.menu-btn { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .45s var(--out); }
.menu-btn span:first-child { top: 15px; }
.menu-btn span:last-child { top: 23px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 6px; padding: 80px var(--gutter);
    background: var(--page); color: var(--page-ink);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .45s ease, transform .55s var(--out), visibility 0s .55s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s var(--out); }
  .nav-link { font-family: var(--serif); font-size: 1.6rem; padding: 10px 0; opacity: 1; }
  .nav-link::after { left: 0; right: auto; width: 2.4em; }
  .nav-num { display: inline-block; width: 2.4em; font-family: var(--caps); font-size: .8rem; color: var(--page-soft); }
  .topbar:has(.nav.open) { color: var(--page-ink); }
}

/* ------------------------------------------------------------------ reveal, tilt, language, toast */
.reveal { opacity: 0; translate: 0 22px; transition: opacity .9s ease var(--d, 0ms), translate 1.1s var(--out) var(--d, 0ms), transform .55s var(--out), box-shadow .55s var(--out), border-color .4s ease, background-color 1.2s ease; }
.reveal.in { opacity: 1; translate: 0 0; }
/* cards lean toward the pointer (desktop) or with the phone's tilt; translate stays free for the reveal */
.tilt { transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tilt.hovering { transition-duration: .9s, 1.1s, .35s, .55s, .4s, 1.2s; }           /* follow the pointer closely, keep the reveal timing */
.gyro-on .tilt { transition-duration: .9s, 1.1s, 0s, .55s, .4s, 1.2s; }             /* tilt values are already smoothed */
/* a soft sheen of light that slides across a card as it leans */
.card.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(520px circle at var(--shx, 50%) var(--shy, 0%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 52%);
  mix-blend-mode: soft-light; opacity: var(--sh, 0); transition: opacity .6s ease;
}
html[data-dark="1"] .card.tilt::after { background: radial-gradient(520px circle at var(--shx, 50%) var(--shy, 0%), rgba(226, 191, 122, .13), transparent 55%); mix-blend-mode: normal; }
[data-magnet] { transition: translate .5s var(--out); }
.progress { position: fixed; inset: 0 0 auto; z-index: 70; height: 2px; background: var(--page-accent); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }
.lang-fade { transition: opacity .42s ease, filter .42s ease, transform .5s var(--out); }
body.lang-out .lang-fade { opacity: 0; filter: blur(5px); transform: translateY(-6px); }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 80; padding: 12px 20px; border-radius: 999px;
  background: var(--page-ink); color: var(--page); font-size: .9rem; box-shadow: var(--shadow);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .35s ease, transform .5s var(--out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.noscript { padding: 120px 24px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; translate: none; }
  .tilt { transform: none; }
}