/* ============================================================
   MiGo Survey · 全局
   配色：76955E asparagus | AFB884 sage | DCCDA8 cream
        E2C15D gold | E7B511 saffron
   ============================================================ */

:root {
  --c-asparagus: #76955E;
  --c-sage: #AFB884;
  --c-cream: #DCCDA8;
  --c-gold: #E2C15D;
  --c-saffron: #E7B511;
  --c-ink: #2A3220;
  --c-ink-soft: #4A5240;
  --c-glass-bg: rgba(255, 255, 255, 0.18);
  --c-glass-border: rgba(255, 255, 255, 0.35);
  --c-glass-bg-strong: rgba(255, 255, 255, 0.62);
  --shadow-card: 0 12px 40px rgba(40, 50, 30, 0.18);
  --radius-card: 22px;
  --radius-pill: 999px;
  --font-cn: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Helvetica, "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-cn);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overscroll-behavior: none; }

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

.stage { position: fixed; inset: 0; }
[hidden] { display: none !important; }

/* ---- 阶段间横向推进过渡（survey 从右滑入）---- */
.stage--hero {
  z-index: 1;
  transition: transform 520ms cubic-bezier(.4, .0, .2, 1),
              opacity 320ms ease;
  will-change: transform, opacity;
}
.stage--hero.stage--leaving {
  transform: translateX(-12%);
  opacity: 0.35;
}
.stage--survey {
  z-index: 2;
  transform: translateX(100%);
  transition: transform 520ms cubic-bezier(.4, .0, .2, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
}
.stage--survey.stage--entered {
  transform: translateX(0);
}
.stage--survey { touch-action: pan-y; overscroll-behavior: none; }


/* ---- 全局 toast ---- */
.site-toast {
  position: fixed;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(40, 40, 40, 0.92);
  color: white;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  max-width: 86vw;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.site-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.role-btn.is-loading { opacity: 0.55; cursor: wait; }


/* ============================================================
   阶段 1：Hero
   ============================================================ */

.hero-swiper { width: 100%; height: 100%; }
.hero-swiper, .hero-swiper .swiper-wrapper { background: #000; }

.hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  /* fallback——磨砂背景图未加载完成时的兜底色 */
  background: var(--c-cream);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 磨砂玻璃背景层：与主图同源，cover + 重磨砂 + 微饱和提色，营造与图色调
   一致的高级感底色。比单纯色块/渐变更"专业"，所有 slide 统一应用。
   inset:-8% 留出余量避免 blur 边缘暴露；transform: translateZ(0) 走 GPU
   合成，避免低端机 reflow 抖动；fade 切换时与主图同步淡入淡出。 */
.hero-bg-blur {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(48px) saturate(1.18) brightness(0.96);
  transform: translateZ(0);
  will-change: filter;
  z-index: 0;
}

/* 内框比例对齐源图。P1/P2/P3/P5 主图实测 ≈ 19.5:9，对应 9/19.5；P4 是 3:4
   例外，规则在下方 .hero-slide--p4 .hero-frame 重写。frame 尺寸 = 视口能
   容纳的最大对应矩形；图片 contain 渲染绝不裁剪。 */
.hero-frame {
  position: relative;
  z-index: 1;     /* 压在 .hero-bg-blur 之上 */
  aspect-ratio: 9 / 19.5;
  width: min(100%, calc(100vh * 9 / 19.5));
  height: min(100%, calc(100vw * 19.5 / 9));
  overflow: hidden;
}

/* P4 (3:4) 专属：frame 改 3:4，让主图横向充满 slide 宽，左右贴边；上下留白
   依旧由磨砂背景层 hero-bg-blur 填。 */
.hero-slide--p4 .hero-frame {
  aspect-ratio: 3 / 4;
  width: min(100%, calc(100vh * 3 / 4));
  height: min(100%, calc(100vw * 4 / 3));
}

.hero-image {
  position: absolute;
  inset: 0;
  /* contain 永不裁切；frame 比例与图片比例对齐时图片完整充满 frame */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: opacity 800ms ease, transform 1200ms ease;
}

/* 历史类名保留为 no-op（HTML 中已不再引用，可后续清理） */
.hero-image--contain {
  background-size: contain;
  background-position: center;
}

.hero-slide--p5 .role-buttons {
  position: absolute;
  /* 按钮在 frame 内（9:19.5，与 P5 图等比），百分比直接相对图片区，
     不随视口拉伸而错位 */
  left: 6%;
  right: 6%;
  bottom: 14%;
  height: 24%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4%;
  z-index: 5;
}
.role-btn {
  border-radius: 18px;
  background: transparent;
  transition: transform 120ms ease, box-shadow 200ms ease;
  position: relative;
}
.role-btn:active {
  transform: scale(0.96);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2) inset;
}
.role-btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  transition: background 200ms ease;
  pointer-events: none;
}
.role-btn:active::after {
  background: rgba(255, 255, 255, 0.18);
}

.swiper-slide-active .hero-image {
  transform: scale(1.0);
}

.hero-pagination {
  position: absolute;
  bottom: 18px !important;
  left: 0; right: 0;
  z-index: 6;
  display: flex; justify-content: center; gap: 8px;
}
.hero-pagination .swiper-pagination-bullet {
  width: 7px; height: 7px;
  background: rgba(255,255,255,0.45);
  opacity: 1;
  margin: 0 !important;
  transition: width 220ms ease, background 220ms ease;
}
.hero-pagination .swiper-pagination-bullet-active {
  width: 22px; border-radius: 4px;
  background: rgba(255,255,255,0.95);
}

.hero-privacy {
  position: absolute;
  /* 留出 site-footer 的高度，避免两段小字叠在一起 */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
  left: 0; right: 0;
  padding: 0 18px 4px;
  text-align: center;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  z-index: 4;
  pointer-events: none;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}


/* ---- 全局页脚（版权 / 概念预览声明，所有阶段可见）---- */
.site-footer {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 200;
  padding: 4px 12px calc(env(safe-area-inset-bottom, 0px) + 4px);
  text-align: center;
  pointer-events: none;
  font-family: var(--font-cn);
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 0.2px;
  /* 半透明深底，文字反白；hero 大图 + survey 浅色背景下都可读 */
  background: linear-gradient(to top, rgba(20, 24, 16, 0.32), rgba(20, 24, 16, 0));
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.site-footer-line { display: block; }
.site-footer-line--brand { letter-spacing: 0.4px; }
.site-footer-line--notice {
  opacity: 0.85;
  font-size: 8.5px;
  margin-top: 1px;
}


/* ============================================================
   阶段 2：问卷
   ============================================================ */

.stage--survey {
  background: var(--c-cream);
}

/* P1 模糊背景 */
.survey-bg {
  position: absolute;
  inset: 0;
  background: url(../assets/P1.png) center / cover no-repeat;
  filter: blur(28px) saturate(1.05) brightness(0.85);
  transform: scale(1.15);
  z-index: 0;
}
.survey-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(118, 149, 94, 0.30) 0%,
    rgba(220, 205, 168, 0.50) 60%,
    rgba(220, 205, 168, 0.65) 100%
  );
}

.survey-header {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 12px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.survey-header-inner { padding-bottom: 6px; }
.survey-title {
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.25;
}
.survey-title .title-main {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--c-ink);
}
.survey-title .title-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--c-asparagus);
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(118, 149, 94, 0.16);
}
.survey-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--c-ink-soft);
  letter-spacing: 0.2px;
}
.survey-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-top: 8px;
}
.survey-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--c-asparagus), var(--c-saffron));
  border-radius: inherit;
  transition: width 350ms cubic-bezier(.5,0,.2,1);
}

.survey-main {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.survey-view {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow: hidden;
}
.survey-view--questions {
  padding: 0;
  align-items: stretch;
}

/* 毛玻璃卡 */
.glass-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  border-radius: var(--radius-card);
  padding: 22px 20px 24px;
  background: var(--c-glass-bg-strong);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--c-glass-border);
  box-shadow: var(--shadow-card);
  color: var(--c-ink);
}

/* ---- intro 卡 ---- */
.intro-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(118, 149, 94, 0.18);
  color: var(--c-asparagus);
  margin-bottom: 16px;
  font-weight: 600;
}
.intro-text {
  font-size: 15.5px;
  line-height: 1.95;          /* 行距更舒缓 */
  letter-spacing: 0.3px;
  color: var(--c-ink);
  margin: 0 0 24px;
  white-space: pre-wrap;       /* 保留 \n 与全角空格缩进 */
}
.intro-cta {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--c-asparagus);
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(118, 149, 94, 0.4);
  transition: transform 100ms ease;
}
.intro-cta:active { transform: scale(0.97); }

/* ---- 单题 deck ---- */
.q-deck-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.q-deck {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 380ms cubic-bezier(.4, .0, .2, 1);
  will-change: transform;
}
/* 单题滚动容器：
 * 关键设计：
 *   container = flex column + overflow-y:auto
 *   card 上下用 margin:auto
 * 这是修复 flex 居中 + 滚动冲突的标准写法：
 *   - 卡片 ≤ 容器：margin auto 取正值 → 上下居中
 *   - 卡片 > 容器：margin auto 被夹到 0 → 卡片从顶部排起，顶部完整可见，底部可滚到
 * 因此不会出现"卡片顶部被 survey-header 视觉遮挡 / 底部被 q-nav 视觉遮挡"的问题——
 * .q-slide 的高度由父级 flex(.survey-main) 严格夹在 header 与 nav 之间，
 * 所有内容都在这个独立空间里上下滚动。
 */
.q-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.q-slide > .glass-card {
  width: 100%;
  max-width: 460px;
  margin: auto;                /* 短卡居中 / 长卡顶部排起 + 整体可滚 */
  flex-shrink: 0;              /* 别被 flex 压缩，否则 align-items 居中失效 */
}

/* 问题卡 */
.q-card .q-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--c-ink-soft);
  letter-spacing: 0.4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.q-card .q-meta .q-num {
  font-weight: 700;
  color: var(--c-asparagus);
  letter-spacing: 0.2px;
}
.q-card .q-meta .q-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(118, 149, 94, 0.16);
  color: var(--c-asparagus);
}
.q-card .q-meta .q-tag.q-tag--required {
  background: rgba(231, 181, 17, 0.20);
  color: #8a6900;
}
.q-card .q-text {
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 10px;
}
.q-card .q-tip {
  margin: 0 0 14px;
  padding: 10px 12px;
  /* 字体与 textarea placeholder 统一（同一个 sans 栈、normal 体、同等 size） */
  font-family: var(--font-cn);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(42, 50, 32, 0.55);          /* 占位符同款的低饱和灰 */
  /* 便利贴背景保留 */
  background: rgba(231, 181, 17, 0.10);
  border-left: 3px solid var(--c-gold);
  border-radius: 6px;
  letter-spacing: 0.2px;
}
.q-card .q-options {
  display: flex; flex-direction: column;
  gap: 9px;
}
.q-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  font-size: 14.5px;
  line-height: 1.45;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(118, 149, 94, 0.20);
  color: var(--c-ink);
  transition: background 160ms ease, border-color 160ms ease, transform 90ms ease, box-shadow 160ms ease;
  position: relative;
}
.q-option:hover { background: rgba(255, 255, 255, 0.78); }
.q-option:active { transform: scale(0.985); }
.q-option.is-selected {
  background: rgba(118, 149, 94, 0.92);
  border-color: var(--c-asparagus);
  color: white;
  box-shadow: 0 4px 14px rgba(118, 149, 94, 0.35);
  font-weight: 600;
}
.q-option .q-option-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(118, 149, 94, 0.45);
  border-radius: 5px;
  margin-right: 10px;
  vertical-align: middle;
  background: rgba(255,255,255,0.7);
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: all 160ms ease;
}
.q-option--single .q-option-check { border-radius: 50%; }
.q-option.is-selected .q-option-check {
  background: white;
  border-color: white;
  color: var(--c-asparagus);
}
.q-option-text {
  display: inline;
  vertical-align: middle;
}

.q-card .q-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(118, 149, 94, 0.22);
  background: rgba(255, 255, 255, 0.78);
  font-family: inherit;
  font-size: 15px;
  color: var(--c-ink);
  resize: none;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.q-card .q-textarea:focus {
  border-color: var(--c-asparagus);
  background: white;
}

.q-error {
  margin-top: 10px;
  font-size: 12.5px;
  color: #b03e3e;
  min-height: 1em;
}

/* ---- 底部导航栏 ---- */
.q-nav {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  /* 底部 padding 加 32px 留出 site-footer 高度，按钮不与版权小字重叠 */
  padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 44px);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.q-nav-btn {
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: transform 100ms ease, opacity 200ms ease, background 200ms ease;
}
.q-nav-btn:active { transform: scale(0.97); }
.q-nav-btn--prev {
  background: rgba(118, 149, 94, 0.14);
  color: var(--c-asparagus);
}
.q-nav-btn--prev:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.q-nav-btn--next {
  background: var(--c-asparagus);
  color: white;
  box-shadow: 0 6px 16px rgba(118, 149, 94, 0.32);
}
.q-nav-btn--next.q-nav-btn--submit {
  background: linear-gradient(135deg, var(--c-asparagus), var(--c-gold));
  box-shadow: 0 8px 22px rgba(118, 149, 94, 0.35);
}
.q-nav-btn--next:disabled {
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
  cursor: not-allowed;
}

/* ---- done 卡 ---- */
.glass-card--done {
  text-align: center;
}
.done-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 14px;
}
.done-title {
  font-size: 22px;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--c-asparagus);
}
.done-text {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-ink-soft);
  white-space: pre-wrap;
}
.done-sub {
  font-size: 13px;
  color: var(--c-asparagus);
  font-weight: 600;
  letter-spacing: 0.6px;
}

/* 完成页底部联系方式卡 */
.done-contact {
  margin-top: 22px;
  padding: 14px 16px 12px;
  border-top: 1px solid rgba(118, 149, 94, 0.18);
  text-align: left;
}
.done-contact-intro {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-ink-soft);
  letter-spacing: 0.1px;
}
.done-contact-line {
  margin: 6px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-ink);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-all;
}
.done-contact-emoji {
  font-size: 16px;
  flex-shrink: 0;
}


/* ============================================================
   桌面适配：保持 9:16 居中
   ============================================================ */
@media (min-width: 720px) {
  body { background: #1d2218; }
  #hero, #survey {
    width: min(100vw, calc(100dvh * 9 / 16));
    margin: 0 auto;
    box-shadow: 0 0 80px rgba(0,0,0,0.4);
  }
  .stage--survey { left: 50%; transform: translateX(calc(-50% + 100vw)); }
  .stage--survey.stage--entered { transform: translateX(-50%); }
  .stage--hero { left: 50%; transform: translateX(-50%); }
  .stage--hero.stage--leaving { transform: translateX(calc(-50% - 12vw)); opacity: 0.35; }
}