/* ==========================================================================
   mx-ui.css — 萌新 · 浅薄荷青 / 磨砂玻璃 / 纵向分屏
   仅入口页使用 .mx-*；内容页使用同一套薄荷主题变量
   ========================================================================== */

body.xy-home {
  overflow: hidden;
  background: #f3fbf8;
}
body.xy-home .main {
  height: 100svh;
  padding: 0;
  overflow: hidden;
}

/* ---------- 分屏滚动 ---------- */
.mx-scroll {
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #b9dcd3 transparent;
}
.mx-scroll::-webkit-scrollbar { width: 7px; }
.mx-scroll::-webkit-scrollbar-thumb { background: #b9dcd3; border-radius: 8px; }

.mx-panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: clamp(66px, 8vh, 104px) 0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-bottom: 1px solid rgba(80, 130, 116, .14);
  background:
    radial-gradient(760px 480px at 86% 16%, rgba(143, 213, 196, .28), transparent 66%),
    linear-gradient(180deg, #f6fcfa, #eaf7f3);
}
.mx-panel:nth-child(3) {
  background:
    radial-gradient(700px 460px at 12% 20%, rgba(171, 216, 203, .32), transparent 66%),
    linear-gradient(180deg, #eef9f5, #e4f4ee);
}
.mx-panel:nth-child(4) {
  background:
    radial-gradient(760px 500px at 82% 18%, rgba(214, 194, 154, .26), transparent 66%),
    linear-gradient(180deg, #f3faf7, #e8f5ef);
}
.mx-wrap {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.mx-start { padding-top: 0; padding-bottom: 0; }
.mx-start .mx-wrap { z-index: 3; }

/* ---------- 品牌 ---------- */
.mx-brand {
  position: absolute;
  top: 26px;
  left: max(24px, calc((100vw - 1180px) / 2));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mx-seal {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #a33a2b;
  color: #fdf7ea;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(163, 58, 43, .55);
}
.mx-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
  color: #2f4a41;
  font-size: 16px;
  font-weight: 700;
}
.mx-brand-text em {
  color: #78998d;
  font-family: var(--mono);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: .18em;
}

/* ---------- 启动页 ---------- */
.mx-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  align-items: center;
  gap: 36px;
  min-height: 100svh;
  padding: 104px 0 92px;
}
.mx-kicker {
  margin: 0 0 14px;
  color: #4f8a7b;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}
.mx-title {
  margin: 0;
  color: #213b34;
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.mx-title em {
  display: inline-block;
  background: linear-gradient(100deg, #3d6f62, #6aa997 50%, #b08b4f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
.mx-lead {
  max-width: 520px;
  margin: 22px 0 0;
  color: #46665c;
  font-size: 15.5px;
  line-height: 1.85;
}
.mx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mx-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #5b9283, #3f6f62);
  box-shadow: 0 14px 30px -16px rgba(63, 111, 98, .65);
}
.mx-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(63, 111, 98, .7); text-decoration: none; }
.mx-btn.ghost {
  color: #3d6f62;
  background: rgba(255, 255, 255, .55);
  border-color: rgba(96, 148, 133, .32);
  backdrop-filter: blur(12px) saturate(.8);
}
.mx-link {
  color: #5a746b;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 6px 2px;
}
.mx-link:hover { color: #3d6f62; border-bottom-color: #b9dcd3; text-decoration: none; }
.mx-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  color: #7b978d;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  white-space: nowrap;
}
.mx-scroll-hint i {
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, #6aa997, transparent);
  animation: mx-hint 1.8s ease-in-out infinite;
}
@keyframes mx-hint {
  0%, 100% { transform: scaleY(.45); opacity: .45; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* ---------- 3D 卡片堆 ---------- */
.mx-card-stack {
  position: relative;
  height: 430px;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.mx-float-card {
  position: absolute;
  width: 220px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 18px;
  background: rgba(255, 255, 255, .52);
  backdrop-filter: blur(18px) saturate(.78);
  -webkit-backdrop-filter: blur(18px) saturate(.78);
  box-shadow: 0 28px 50px -30px rgba(42, 92, 78, .55);
  color: #2f4a41;
  transform-style: preserve-3d;
  animation: mx-float 7s ease-in-out infinite;
}
.mx-float-card span {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(106, 169, 151, .14);
  color: #3d6f62;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
}
.mx-float-card b {
  display: block;
  margin: 12px 0 4px;
  font-size: 26px;
  letter-spacing: -.04em;
}
.mx-float-card small { color: #6f8a81; font-size: 12.5px; }
.mx-float-card.fc1 { top: 38px; left: 18%; transform: rotate(-7deg) rotateY(8deg); }
.mx-float-card.fc2 { top: 158px; left: 44%; transform: rotate(4deg) rotateY(-7deg); animation-delay: -2.2s; }
.mx-float-card.fc3 { top: 278px; left: 26%; transform: rotate(-2deg) rotateY(5deg); animation-delay: -4.1s; }
@keyframes mx-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

/* ---------- 首页 / 路线 / 文化 ---------- */
.mx-h2 {
  margin: 0 0 10px;
  color: #213b34;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -.04em;
}
.mx-sub {
  max-width: 620px;
  margin: 0 0 26px;
  color: #5d7a70;
  font-size: 14.5px;
  line-height: 1.8;
}
.mx-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0 0 30px;
  padding-top: 18px;
  border-top: 1px dashed rgba(80, 130, 116, .3);
}
.mx-stats div { display: flex; align-items: baseline; gap: 8px; }
.mx-stats b { color: #213b34; font-size: 28px; line-height: 1; letter-spacing: -.03em; }
.mx-stats span { color: #6f8a81; font-size: 12.5px; }

.mx-grid { display: grid; gap: 14px; }
.mx-grid.mx-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-grid.mx-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-card {
  position: relative;
  padding: 20px 20px 18px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 18px;
  background: rgba(255, 255, 255, .56);
  backdrop-filter: blur(16px) saturate(.8);
  -webkit-backdrop-filter: blur(16px) saturate(.8);
  box-shadow: 0 20px 42px -30px rgba(42, 92, 78, .55);
  color: #2f4a41;
  transform-style: preserve-3d;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
  filter: saturate(.9);
}
.mx-card:hover {
  transform: translateY(-5px) rotateX(1.5deg) rotateY(-1.5deg);
  box-shadow: 0 26px 50px -28px rgba(42, 92, 78, .6);
  background: rgba(255, 255, 255, .66);
}
.mx-card h3 { margin: 6px 0 6px; font-size: 16.5px; letter-spacing: -.02em; }
.mx-card p { margin: 0; color: #668077; font-size: 13px; line-height: 1.72; }
.mx-card .mx-ico {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(106, 169, 151, .14);
  color: #3d6f62;
  font-size: 16px;
}
.mx-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.mx-path-card {
  display: block;
  padding: 22px 20px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 18px;
  background: rgba(255, 255, 255, .56);
  backdrop-filter: blur(16px) saturate(.8);
  -webkit-backdrop-filter: blur(16px) saturate(.8);
  box-shadow: 0 20px 42px -30px rgba(42, 92, 78, .55);
  color: #2f4a41;
  text-decoration: none;
  transition: transform .28s ease, box-shadow .28s ease;
}
.mx-path-card:hover { transform: translateY(-5px); text-decoration: none; box-shadow: 0 26px 50px -28px rgba(42, 92, 78, .6); }
.mx-path-card > span {
  color: #8fb5a8;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
}
.mx-path-card h3 { margin: 10px 0 4px; font-size: 22px; letter-spacing: -.03em; }
.mx-path-card p { margin: 0; color: #668077; font-size: 12.5px; }
.mx-culture { text-align: left; }
.mx-c-seal {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: rgba(163, 58, 43, .9);
  color: #fdf7ea;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 17px;
}
.mx-culture h3 { margin-top: 12px; }
.mx-end { margin-top: 30px; display: flex; justify-content: flex-start; }

/* 滚动进入动画 */
.mx-panel .mx-wrap { opacity: 1; transform: none; }
.mx-panel.in .mx-wrap { animation: mx-rise .8s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes mx-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 内容页磨砂玻璃统一 ---------- */
body:not(.xy-home) .tut-card,
body:not(.xy-home) .feature,
body:not(.xy-home) .panel,
body:not(.xy-home) .contact-card,
body:not(.xy-home) .auth-card {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(.82);
  -webkit-backdrop-filter: blur(16px) saturate(.82);
  box-shadow: 0 18px 38px -28px rgba(35, 86, 72, .45);
}
[data-theme="dark"] body:not(.xy-home) .tut-card,
[data-theme="dark"] body:not(.xy-home) .feature,
[data-theme="dark"] body:not(.xy-home) .panel,
[data-theme="dark"] body:not(.xy-home) .contact-card,
[data-theme="dark"] body:not(.xy-home) .auth-card {
  background: rgba(33, 68, 58, .68);
  border-color: rgba(147, 220, 200, .24);
  box-shadow: 0 22px 46px -30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.topbar {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(18px) saturate(.85);
  -webkit-backdrop-filter: blur(18px) saturate(.85);
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .mx-wrap { width: calc(100% - 32px); }
  .mx-brand { top: 18px; left: 18px; }
  .mx-start-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 92px 0 74px;
    min-height: auto;
  }
  .mx-title { font-size: clamp(36px, 9vw, 56px); }
  .mx-lead { font-size: 14.5px; }
  .mx-card-stack { display: none; }
  .mx-panel { min-height: 100svh; padding: 76px 0 66px; }
  .mx-grid.mx-3, .mx-grid.mx-4, .mx-path { grid-template-columns: 1fr; }
  .mx-stats { gap: 18px; }
  .mx-scroll-hint { display: none; }
  .mx-end { justify-content: stretch; }
  .mx-end .mx-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-scroll { scroll-behavior: auto; }
  .mx-float-card, .mx-scroll-hint i { animation: none; }
  .mx-panel.in .mx-wrap { animation: none; }
}

/* ---------- 首页视觉升级：编辑感 / 暖色 / 克制动画 ---------- */
body.xy-home {
  --bg: #f6f1e6;
  --bg-alt: #efe7d7;
  --surface: #fcf8ef;
  --surface-2: #f0e8d8;
  --border: #ddcdb4;
  --border-strong: #c8b394;
  --text: #263d35;
  --text-2: #4f6259;
  --muted: #8a7f6e;
  --green: #4f7d6e;
  --green-dark: #3d6659;
  --green-soft: #e8f1eb;
  --green-line: #cfe1d8;
}
body.xy-home .mx-start {
  background:
    radial-gradient(900px 600px at 82% 16%, rgba(240, 166, 118, .28), transparent 62%),
    radial-gradient(760px 520px at 8% 76%, rgba(126, 178, 200, .24), transparent 66%),
    radial-gradient(560px 420px at 62% 86%, rgba(201, 166, 107, .16), transparent 62%),
    linear-gradient(180deg, #fcf8ef, #f0e7d6);
}
.mx-start .xy-canvas { z-index: 1; }
.mx-start .cn-decor { z-index: 2; }
.mx-start .mx-wrap { z-index: 3; }
.mx-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mx-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .5;
  animation: mx-aurora 14s ease-in-out infinite alternate;
}
.mx-aurora i:nth-child(1) {
  width: 420px; height: 320px; left: 52%; top: 4%;
  background: rgba(239, 166, 118, .42);
}
.mx-aurora i:nth-child(2) {
  width: 360px; height: 300px; left: 2%; top: 52%;
  background: rgba(126, 178, 200, .32);
  animation-delay: -5s;
}
.mx-aurora i:nth-child(3) {
  width: 300px; height: 240px; left: 38%; bottom: -8%;
  background: rgba(214, 183, 125, .26);
  animation-delay: -9s;
}
@keyframes mx-aurora {
  from { transform: translate3d(-18px, 8px, 0) scale(1); }
  to { transform: translate3d(20px, -14px, 0) scale(1.08); }
}
body.xy-home .mx-title {
  color: #263d35;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-weight: 600;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.14;
  letter-spacing: -.02em;
}
body.xy-home .mx-title em {
  background: linear-gradient(100deg, #a85434, #c98a4a 46%, #4f7d6e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.xy-home .mx-kicker { color: #a85f43; }
body.xy-home .mx-lead { color: #5c6b62; }
body.xy-home .mx-btn.primary {
  background: linear-gradient(135deg, #c96f4a, #a85434);
  box-shadow: 0 16px 34px -18px rgba(168, 84, 52, .62);
}
body.xy-home .mx-btn.primary:hover { box-shadow: 0 20px 40px -18px rgba(168, 84, 52, .7); }
body.xy-home .mx-link { color: #6d6458; }
body.xy-home .mx-link:hover { color: #a85434; border-bottom-color: #d9b9a4; }
body.xy-home .mx-brand-text { color: #2f4a41; }
body.xy-home .mx-scroll-hint { color: #8a7f6e; }

.mx-visual {
  position: relative;
  height: 470px;
  perspective: 1100px;
}
.mx-orb {
  position: absolute;
  top: 12px;
  right: -10px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 248, 230, .96), rgba(240, 166, 118, .52) 38%, rgba(126, 178, 200, .24) 62%, transparent 72%);
  filter: blur(2px);
  animation: mx-orb 12s ease-in-out infinite alternate;
}
@keyframes mx-orb {
  from { transform: translate3d(-8px, 0, 0) scale(1); }
  to { transform: translate3d(10px, -10px, 0) scale(1.04); }
}
.mx-ring {
  position: absolute;
  top: 76px;
  right: 52px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(168, 95, 67, .28);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.mx-glass-panel {
  position: absolute;
  top: 88px;
  right: 36px;
  width: 300px;
  padding: 26px 26px 22px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 22px;
  background: rgba(255, 252, 244, .58);
  box-shadow: 0 30px 64px -36px rgba(70, 80, 65, .58);
  backdrop-filter: blur(18px) saturate(.8);
  -webkit-backdrop-filter: blur(18px) saturate(.8);
  transform: rotate(-3deg);
  transform-style: preserve-3d;
}
.mx-panel-kicker {
  color: #a85f43;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
}
.mx-panel-poem {
  margin: 16px 0 18px;
  color: #2f4a41;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 29px;
  line-height: 1.55;
  letter-spacing: .08em;
}
.mx-panel-meta {
  display: flex;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(120, 100, 70, .28);
  color: #7b8a80;
  font-size: 11.5px;
}
.mx-panel-seal {
  position: absolute;
  right: 22px;
  bottom: 20px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #a33a2b;
  color: #fdf7ea;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 13px;
  font-style: normal;
}

@media (max-width: 900px) {
  .mx-visual { display: none; }
  body.xy-home .mx-title { font-size: clamp(34px, 9vw, 52px); }
}