/**
 * =============================================================================
 * CONTACT MODAL
 * =============================================================================
 * 联系二维码弹窗 (浅色玻璃卡片)
 *
 * 特性:
 * - 按 localStorage 计数轮换联系人 (每 50 次切换,逻辑见 js/contact-modal.js)
 * - 点击遮罩/关闭按钮/ESC 键关闭
 * - 无障碍支持 (ARIA 属性、焦点管理)
 *
 * 打开流程:JS 去掉 hidden 属性 → 下一帧加 .is-open → 透明度与位移过渡
 */

/* 弹窗打开时锁定页面滚动 */
body.modal-open {
  overflow: hidden;
}

/* 关闭状态完全移出布局 */
.contact-modal[hidden] {
  display: none;
}

/* 全屏容器,卡片居中 */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 100; /* 高于导航栏 (50) */
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease; /* 时长与 JS 中的关闭延时 180ms 对应 */
}

.contact-modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* 半透明墨绿遮罩 + 背景模糊 (点击可关闭) */
.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 37, 34, 0.35);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* 玻璃卡片 */
.contact-modal-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: min(90vh, 860px);
  overflow: auto; /* 小屏幕高度不够时卡片内部可滚动 */
  padding: 36px 32px 26px;
  border: 1px solid var(--glass-border);
  border-radius: 32px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  box-shadow: inset 0 1px 0 #fff, 0 40px 90px -30px rgba(15, 37, 34, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transform: translateY(16px) scale(0.97); /* 初始略低、略小,打开时弹入 */
  transition: transform 0.35s var(--ease-out);
}

.contact-modal.is-open .contact-modal-card {
  transform: none;
}

.contact-modal-card h2 {
  font-size: 30px;
  line-height: 1.2;
}

.contact-modal-description {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

/* 二维码图片:按比例缩放,不超过视口高度的 56% */
.contact-modal-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 56vh;
  margin: 24px auto 0;
  border-radius: 18px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 16px 36px -16px rgba(15, 37, 34, 0.35);
}

/* 联系人信息 */
.contact-modal-meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

/* 右上角关闭按钮 (悬停时 × 旋转 90°) */
.contact-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 37, 34, 0.06);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.4s var(--ease-out);
}

.contact-modal-close:hover {
  background: rgba(15, 37, 34, 0.12);
  transform: rotate(90deg);
}

/* ===== 手机 (< 650px):缩小边距、圆角和标题 ===== */
@media (max-width: 650px) {
  .contact-modal {
    padding: 16px;
  }

  .contact-modal-card {
    padding: 30px 20px 20px;
    border-radius: 24px;
  }

  .contact-modal-card h2 {
    font-size: 26px;
  }
}