/* ============================================================
   过往 · 名片页
   想改文案/配色，优先动下面 :root 里的变量即可
   ============================================================ */
:root {
  /* 页面 */
  --bg: #f1f1f4;              /* 页面灰底（图片里的浅灰） */
  --bg-glow-1: rgba(255, 214, 170, .55);
  --bg-glow-2: rgba(160, 190, 255, .40);

  /* 卡片 */
  --surface: #ffffff;
  --surface-2: #fafafb;
  --border: #ececf0;
  --radius-card: 20px;
  --radius-shot: 14px;
  --shadow-card: 0 6px 24px rgba(20, 20, 30, .06), 0 1px 2px rgba(20, 20, 30, .04);

  /* 文字 */
  --text: #16161a;
  --text-2: #3d3d45;
  --text-3: #8b8b96;          /* 小标题灰 */
  --text-4: #a9a9b3;          /* 提示文字灰 */

  /* 主题色（强调 / 图标） */
  --brand: #d9694f;
  --brand-soft: #f3e0da;

  /* 灯箱水印（缩略图已改成卡片式，不带水印；放大后才盖一层，防止原图被直接搬走） */
  --wm-text: "过 往 科 技";
  --wm-color: rgba(255, 255, 255, .42);
  --wm-angle: -28deg;
  --wm-size: 30px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* 手机滑动优化：惯性滚动 + 阻止横向橡皮筋 + 点按不高亮 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

/* 顶部滑动进度条：细，不抢视线 */
.scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 2.5px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #e08a6e, var(--brand));
  will-change: transform;
  pointer-events: none;
}

/* 背景两团柔光 */
.bg-deco { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); }
.glow--a { top: -18vmax; right: -14vmax; background: var(--bg-glow-1); }
.glow--b { bottom: -22vmax; left: -16vmax; background: var(--bg-glow-2); }

/* ---------- 布局：居中单列（对齐参考图的窄栏） ---------- */
.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  animation: rise .5s cubic-bezier(.22, .8, .28, 1) both;
  animation-delay: var(--card-delay, 0ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 0;
}

.card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-2);
}

.card__hint {
  font-size: 11.5px;
  color: var(--text-4);
  white-space: nowrap;
}

.card__body { padding: 12px; }

/* ---------- ① 横幅 ---------- */
.card--banner { padding: 9px; }

.banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 200px;
  isolation: isolate;
}

.banner__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;   /* 竖屏窄卡时优先保住人物上半身 */
  z-index: 0;
}

/* 底部渐变压暗，保证标题在明亮插画上也清楚 */
.banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 74%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(10, 9, 12, .82) 0%,
      rgba(10, 9, 12, .52) 34%,
      rgba(10, 9, 12, .18) 66%,
      rgba(10, 9, 12, 0) 100%);
}

/* 人物面部构图：竖屏/窄卡裁切时优先保住脸，而不是从中间裁 */
.banner__art--face { object-position: 50% 30%; }

.banner__badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.banner__text {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.banner__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

/* 标题逐字拆开：两字名也撑得住横幅左侧（三字名同样适用） */
.banner__title > span { display: inline-block; }
.banner__title > span + span { margin-left: .34em; }

.banner__sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

/* ---------- ② 图集（卡片式） ---------- */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 每张照片 = 一张小卡片：上面图片、下面图注 */
.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-shot);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(20, 20, 30, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 主图整行 */
.shot--wide { grid-column: 1 / -1; }

.shot:hover {
  transform: translateY(-2px);
  border-color: #dedee5;
  box-shadow: 0 8px 20px rgba(20, 20, 30, .12);
}
.shot:active { transform: scale(.99); }
.shot:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* 图片区：小图统一 1:1 居中裁切，主图 4:3 */
.shot__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ececf0;
}

.shot--wide .shot__media { aspect-ratio: 4 / 3; }

/* 图片填满图片区 */
.shot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.02);
  transition: transform .35s ease;
}

.shot:hover .shot__img { transform: scale(1.045); }

/* 图注区 */
.shot__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 9px 8px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.shot__cat {
  flex: none;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.6;
  font-weight: 600;
  color: #a8442c;
  background: var(--brand-soft);
}

.shot__title {
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 放大后的水印（缩略图是干净卡片，不带水印） ---------- */
.shot__wm,
.shot__wm--big {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  transform: rotate(var(--wm-angle));
}

/* 三层错位摆放，斜着铺满整张图 */
.shot__wm::before,
.shot__wm::after,
.shot__wm--big::before {
  content: var(--wm-text);
  position: absolute;
  left: 50%;
  font-size: var(--wm-size);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--wm-color);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.shot__wm::before { top: 22%; transform: translate(-50%, -50%) translateX(-14%); }
.shot__wm::after  { top: 78%; transform: translate(-50%, -50%) translateX(14%); }
.shot__wm--big::before { top: 50%; transform: translate(-50%, -50%); }

.shot__wm--big {
  --wm-size: 40px;
  --wm-color: rgba(255, 255, 255, .46);
}

/* 悬浮「放大」提示 */
.shot__zoom {
  position: absolute;
  z-index: 4;
  right: 7px;
  bottom: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: #fff;
  background: rgba(12, 12, 15, .5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

.shot:hover .shot__zoom,
.shot:focus-visible .shot__zoom { opacity: 1; transform: none; }

/* ---------- ③ 服务列表（纯文字，无图标） ---------- */
.services { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.service {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .2s ease, background .2s ease;
}

.service:hover { border-color: #e0e0e7; background: #fff; }

.service__main { min-width: 0; }

.service__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--text);
}

.service__desc {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

/* ---------- ④ 二维码 ---------- */
.qr {
  border: 1px dashed #d8d8de;
  border-radius: 16px;
  background: var(--surface-2);
  padding: 12px;
  display: grid;
  gap: 12px;
  justify-items: center;
}

/* 真实微信名片图（竖图），限制高度避免整块过长；点按可放大 */
.qr__btn {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}

.qr__card {
  width: auto;
  max-width: 100%;
  max-height: 380px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(20, 20, 30, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.qr__btn:hover .qr__card { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 20, 30, .14); }
.qr__btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.qr__hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  white-space: nowrap;
  color: #fff;
  background: rgba(12, 12, 15, .46);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* 二维码信息条：整条就是一个复制按钮 */
.qr__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: -2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.qr__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #f2f2f5;
  border: 1px solid var(--border);
}

.qr__lines { flex: 1; min-width: 0; display: block; }

.qr__name {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr__tip {
  display: block;
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 2px 0;
}

.tag {
  padding: 3px 9px;
  font-size: 11.5px;
  color: var(--text-3);
  background: #f4f4f7;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ---------- ⑤ 联系方式（点击复制） ---------- */
.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.copy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.copy-btn:hover { background: #fff; border-color: #e0e0e7; }
.copy-btn:active { transform: scale(.99); }
.copy-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.copy-btn__text { display: flex; align-items: baseline; gap: 9px; min-width: 0; }

.copy-btn__label {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--text-4);
}

.copy-btn__value {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧「复制」胶囊 */
.copy-btn__act {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  transition: background .2s ease, color .2s ease;
}

.copy-btn:hover .copy-btn__act { background: #eed6ce; }

/* 复制瞬间的反馈：按钮变绿，胶囊显示「已复制」 */
.copy-btn.is-copied { border-color: #b9e2c6; background: #f2fbf5; }
.copy-btn.is-copied .copy-btn__act { color: #1f9d55; background: #dcf5e5; }
.copy-btn.is-copied .copy-btn__act::after { content: "已复制"; }
.copy-btn.is-copied .copy-btn__act { font-size: 0; }
.copy-btn.is-copied .copy-btn__act::after { font-size: 11.5px; }

.contacts__tip {
  margin: 10px 2px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-4);
}

/* ---------- 复制提示条 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: min(88vw, 380px);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: #fff;
  background: rgba(16, 16, 20, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* 窄屏（iPhone SE 之类）：号码不换行、不挤出去 */
@media (max-width: 360px) {
  .copy-btn__label { display: none; }
  .copy-btn__value { font-size: 14px; letter-spacing: .3px; }
}

/* ---------- 页脚 ---------- */
.foot {
  text-align: center;
  padding: 6px 0 0;
  font-size: 11.5px;
  color: var(--text-4);
}
.foot p { margin: 0; }
.foot__sub { margin: 4px 0 0 !important; opacity: .85; }

/* ---------- 灯箱 ---------- */
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 14, .68);
  backdrop-filter: blur(6px);
  animation: fade .22s ease both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__panel {
  position: relative;
  width: min(520px, 100%);
  margin: 0;
  background: var(--surface);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: pop .28s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.lightbox__close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(12, 12, 15, .45);
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(12, 12, 15, .7); }

.lightbox__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #ededf1;
}

/* 竖图（例如微信二维码）：按原始比例自适应高度，而不是硬套 4:3 被裁掉 */
.lightbox__stage--fit { aspect-ratio: auto; }
.lightbox__stage--fit .lightbox__art { position: relative; inset: auto; }
.lightbox__stage--fit .shot__wm { position: absolute; }

.lightbox__art { position: absolute; inset: 0; overflow: hidden; background: #12141a; }
.lightbox__art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 放大图完整显示，不裁切原照片 */
}
.lightbox__stage--fit .lightbox__art > img { height: auto; max-height: 70vh; }
.lightbox__art > .shot__wm { position: absolute; inset: 0; }

/* 放大后的水印：缩略图是干净的卡片，放大这一层才盖上去 */
.lightbox__art > .shot__wm::before { font-size: 46px; }

.lightbox__cap { padding: 10px 8px 6px; }
.lightbox__title { margin: 0; font-size: 14px; font-weight: 600; }
.lightbox__desc { margin: 3px 0 0; font-size: 12px; color: var(--text-3); }

/* 灯箱打开时锁滚动 */
body.is-locked { overflow: hidden; }

/* ---------- 大屏：卡片略宽一点 ---------- */
@media (min-width: 560px) {
  .wrap { max-width: 460px; padding-top: 34px; }
  .banner { min-height: 214px; }
  .banner__title { font-size: 34px; }
}

/* ---------- 滑动进入动画（IntersectionObserver 驱动） ---------- */
/* 只在 JS 正常运行时才隐藏卡片，避免脚本失效导致白屏 */
.js-ready .card { animation: none; }

.js-ready .js-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .28, 1);
  will-change: opacity, transform;
}

.js-ready .js-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 手机端专项优化 ---------- */
/* 触控目标不小于 44px（iOS 人机指南） */
.copy-btn,
.shot,
.qr__btn,
.lightbox__close {
  min-height: 44px;
}

/* 手机上竖向布局更省空间、更好滑 */
@media (max-width: 480px) {
  .wrap {
    padding-left: 12px;
    padding-right: 12px;
    gap: 12px;
  }
  .banner { min-height: 172px; }
  .banner__title { font-size: 27px; }
  .banner__sub { font-size: 12px; }
  .card__head { padding: 13px 14px 0; }
  .card__body { padding: 11px; }
  .gallery { gap: 9px; }
  .shot__title { font-size: 11px; }
  .shot__foot { padding: 6px 8px 7px; min-height: 32px; }
  .copy-btn__value { font-size: 14.5px; }
  .qr__card { max-height: 340px; }
}

/* 更小的屏（iPhone SE 一代这类）：进一步压紧 */
@media (max-width: 360px) {
  .banner { min-height: 158px; }
  .banner__title { font-size: 25px; }
  .card__title { font-size: 13px; }
  .card__hint { font-size: 11px; }
}

/* 横屏手机：图集改三列，减少上下滚动 */
@media (max-height: 480px) and (orientation: landscape) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .shot--wide { grid-column: 1 / -1; }
  .banner { min-height: 150px; }
}

/* ---------- 无障碍：尊重减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .js-reveal { opacity: 1 !important; transform: none !important; }
  .scroll-bar { display: none; }
}