/* ═══════════════════════════════════════════════
   T-CONTACT v7.0 · MOKELING 联系我们
   v7.0 — §02/§03 统一卡片式视觉
   ═══════════════════════════════════════════════ */

:root {
  --ct-bg:             #FAFAFA;
  --ct-card:           #FFFFFF;
  --ct-text-primary:   #1D1D1F;
  --ct-text-secondary: #86868B;
  --ct-text-tertiary:  #C7C7CC;
  --ct-dot-inactive:   #D1D1D6;
  --ct-border:         #E5E5EA;
  --ct-blue:           #0071e3;
  --ct-purple:         #5856D6;
  --ct-success:        #30D158;
  --ct-qr-bg:          #F2F2F7;
  --ct-ease-brand:     cubic-bezier(0.16, 1, 0.3, 1);
  /* hero 标题上浮固定位置（考虑站点 navbar 48px） */
  --ct-pin-top:        168px;
}

/* ══════════════ BODY 背景强制 ══════════════ */
/* Bricks 可能覆盖 body 背景为纯白，这里强制 #FAFAFA */
body { background: #FAFAFA !important; }

/* hero 阶段隐藏站点 footer，防止跳顶 */
body.mkl-hero-active footer#brx-footer,
body.mkl-hero-active .brxe-footer,
body.mkl-hero-active footer.brx-footer { display: none !important; }

/* ══════════════ CANVAS ══════════════ */

#mkl-ripple-canvas {
  position: fixed; top: 0; left: 0; display: block; z-index: 1;
  transition: opacity 0.4s ease;
}

/* ══════════════ HERO UI ══════════════ */

.mkl-hero-ui {
  position: fixed; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease;
}
.mkl-hero-ui.visible { opacity: 1; }
.mkl-hero-ui-tl {
  top: 24px; left: 32px;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ct-text-tertiary);
}
.mkl-hero-ui-tr {
  top: 24px; right: 32px;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ct-text-tertiary);
}
.mkl-hero-ui-dots {
  top: 50%; right: 32px; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
}
.mkl-hero-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ct-dot-inactive);
  transition: background 0.3s ease, transform 0.3s ease;
}
.mkl-hero-dot.active { background: var(--ct-text-primary); transform: scale(1.5); }

/* ══════════════ HERO TEXT ══════════════ */

.mkl-hero-text-cn {
  position: fixed; z-index: 6;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center;
  will-change: top, transform, opacity;
  transition:
    opacity 0.5s ease,
    top 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 固定态：上浮到 pin-top */
.mkl-hero-text-cn.pinned {
  top: var(--ct-pin-top);
  transform: translate(-50%, 0);
}
.mkl-hero-title-cn {
  font-size: 56px; font-weight: 500; letter-spacing: -0.025em;
  color: var(--ct-text-primary);
  transition: font-size 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 固定态字号缩小 */
.mkl-hero-text-cn.pinned .mkl-hero-title-cn {
  font-size: 42px;
}
.mkl-hero-word { opacity: 0; transform: translateY(12px); display: inline-block; }
@keyframes mklWordIn {
  0%   { opacity: 0; transform: translateY(12px); }
  70%  { opacity: 1; transform: translateY(-1px); }
  100% { opacity: 1; transform: translateY(0); }
}
.mkl-hero-word.animate { animation: mklWordIn 0.6s ease-out forwards; }
.mkl-hero-subtitle {
  margin-top: 16px; font-size: 16px; font-weight: 400;
  color: var(--ct-text-secondary); opacity: 0;
  transition:
    opacity 0.5s ease,
    margin-top 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mkl-hero-subtitle.visible { opacity: 1; }
/* 固定态副文案微缩 */
.mkl-hero-text-cn.pinned .mkl-hero-subtitle {
  font-size: 14px; margin-top: 10px;
}

/* Chevrons */
.mkl-hero-chevrons {
  position: fixed; z-index: 4;
  bottom: 48px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  opacity: 0; transition: opacity 0.3s ease;
}
.mkl-hero-chevrons.visible { opacity: 1; }
.mkl-chevron-line {
  width: 16px; height: 16px; stroke: var(--ct-text-tertiary); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@keyframes mklChevronBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
.mkl-hero-chevrons.visible svg { animation: mklChevronBounce 1.6s ease-in-out infinite; }
.mkl-hero-chevrons.visible svg:nth-child(2) { animation-delay: 0.12s; }

/* ══════════════ FUNCTIONAL ══════════════ */

#mkl-functional {
  position: relative; z-index: 3;
  padding-top: 380px;
  /* 初始隐藏，JS transition 后 display: block */
  display: none;
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.7s var(--ct-ease-brand), transform 0.7s var(--ct-ease-brand);
}
#mkl-functional.visible { opacity: 1; transform: translateY(0); }

/* ── 区块系统 ── */
.mkl-ct-section {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px;
}

/* 区块头部 */
.mkl-ct-header {
  position: relative;
  margin-bottom: 64px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ct-ease-brand), transform 0.6s var(--ct-ease-brand);
}
.mkl-ct-header.in-view { opacity: 1; transform: translateY(0); }

/* 区块图标 */
.mkl-ct-icon {
  display: block;
  width: 30px; height: 30px;
  margin-bottom: 16px;
  color: var(--ct-text-tertiary);
  flex-shrink: 0;
}
.mkl-ct-icon svg {
  width: 100%; height: 100%;
  display: block;
}
/* 图标+标题横排（§01/§02/§03） */
.mkl-ct-header--inline {
  display: flex; align-items: center; gap: 14px;
}
.mkl-ct-header--inline .mkl-ct-icon {
  width: 31px; height: 31px;
  margin-bottom: 0;
}
/* 居中大图标（Closing） */
.mkl-ct-icon--lg {
  width: 68px; height: 68px;
}

.mkl-ct-title {
  font-size: 32px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ct-text-primary);
}

/* ═══════════════════════════════════════
   §01 — Portal 卡片
   ═══════════════════════════════════════ */

.mkl-portal-grid { display: flex; gap: 24px; }
.mkl-portal-card {
  flex: 1; position: relative; overflow: hidden;
  height: 360px; background: #FFFFFF; border-radius: 20px;
  padding: 56px; cursor: pointer;
  border-bottom: 2.5px solid transparent;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  opacity: 0; transform: translateY(30px);
}
.mkl-portal-card.in-view {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.65s var(--ct-ease-brand), transform 0.65s var(--ct-ease-brand),
              border-color 0.35s var(--ct-ease-brand), box-shadow 0.4s ease;
}
/* 第二张卡片延迟 120ms 入场 */
.mkl-portal-card:nth-child(2).in-view {
  transition-delay: 0.12s, 0.12s, 0s, 0s;
}
.mkl-portal-card.in-view:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.07);
}
.mkl-portal-card.blue.in-view:hover    { border-bottom-color: var(--ct-blue); }
.mkl-portal-card.purple.in-view:hover  { border-bottom-color: var(--ct-purple); }

/* 追光层 */
.mkl-portal-card-glow {
  position: absolute; inset: 0; border-radius: 20px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
}
.mkl-portal-card:hover .mkl-portal-card-glow { opacity: 1; }

.mkl-portal-card-title {
  font-size: 28px; font-weight: 600; letter-spacing: -0.015em;
}
.mkl-portal-card-desc {
  margin-top: 28px; display: flex; flex-direction: column; gap: 6px;
}
.mkl-portal-card-item {
  font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ct-text-secondary);
  transition: color 0.3s ease, transform 0.35s var(--ct-ease-brand);
  transform: translateX(0);
}
.mkl-portal-card.in-view:hover .mkl-portal-card-item:nth-child(1) { transform: translateX(2px); }
.mkl-portal-card.in-view:hover .mkl-portal-card-item:nth-child(2) { transform: translateX(4px); }
.mkl-portal-card.in-view:hover .mkl-portal-card-item:nth-child(3) { transform: translateX(6px); }
.mkl-portal-card.in-view:hover .mkl-portal-card-item { color: #6e6e73; }

.mkl-portal-card-arrow {
  position: absolute; right: 56px; bottom: 48px;
  color: var(--ct-text-tertiary);
  transition: transform 0.3s var(--ct-ease-brand), color 0.3s ease;
  z-index: 1;
}
.mkl-portal-card:hover .mkl-portal-card-arrow { transform: translateX(8px); }
.mkl-portal-card.blue:hover .mkl-portal-card-arrow   { color: var(--ct-blue); }
.mkl-portal-card.purple:hover .mkl-portal-card-arrow { color: var(--ct-purple); }

/* ═══════════════════════════════════════
   §02 — 联系方式（卡片式）
   ═══════════════════════════════════════ */

.mkl-ct-section--02 { margin-top: 240px; }

.mkl-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ── 通用 contact card（§02 + §03 共用） ── */
.mkl-contact-card {
  position: relative; overflow: hidden;
  background: #FFFFFF;
  border-radius: 20px;
  /* 内边距：与 portal card 的 56px 保持相近节奏 */
  padding: 48px;
  border-bottom: 2.5px solid transparent;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  /* 入场动画（observer 触发 .in-view） */
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.65s var(--ct-ease-brand),
              transform 0.65s var(--ct-ease-brand),
              border-color 0.35s var(--ct-ease-brand),
              box-shadow 0.4s ease;
}
.mkl-contact-card.in-view { opacity: 1; transform: translateY(0); }
/* 第二张卡片入场延迟 */
.mkl-contact-card:nth-child(2).in-view {
  transition-delay: 0.1s, 0.1s, 0s, 0s;
}
.mkl-contact-card.in-view:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.07);
  border-bottom-color: var(--ct-blue);
}

/* 追光层 */
.mkl-contact-card-glow {
  position: absolute; inset: 0; border-radius: 20px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
}
.mkl-contact-card:hover .mkl-contact-card-glow { opacity: 1; }

/* ── §02 联系方式 卡片内部 ── */
.mkl-contact-card-label {
  font-size: 11px;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ct-text-tertiary);
  margin-bottom: 20px;
}
.mkl-contact-card-value {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mkl-contact-card-email {
  font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ct-text-primary);
  text-decoration: none;
  position: relative; display: inline-block;
}
.mkl-contact-card-email::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1.5px; background: var(--ct-blue);
  transition: width 0.35s var(--ct-ease-brand);
}
.mkl-contact-card-email:hover::after { width: 100%; }
.mkl-contact-card-email:hover { color: var(--ct-blue); transition: color 0.3s ease; }

.mkl-copy-btn {
  padding: 5px 14px; border: 1px solid var(--ct-border); border-radius: 6px;
  background: transparent; cursor: pointer; font-size: 12px; color: var(--ct-text-secondary);
  font-family: inherit; transition: border-color 0.3s ease, color 0.3s ease;
  white-space: nowrap; flex-shrink: 0;
}
.mkl-copy-btn:hover { border-color: var(--ct-blue); color: var(--ct-blue); }
.mkl-copy-btn.copied { border-color: var(--ct-success); color: var(--ct-success); }

/* ═══════════════════════════════════════
   §03 — 店铺直达（卡片式）
   ═══════════════════════════════════════ */

.mkl-ct-section--03 { margin-top: 120px; }

/* 店铺卡片内部：左右布局 */
.mkl-shop-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mkl-shop-card-left { flex: 1; }

.mkl-shop-card-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ct-text-primary);
}
.mkl-shop-card-hint {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--ct-qr-bg);
  color: var(--ct-text-secondary);
  letter-spacing: 0.02em;
}

/* 二维码图片 */
.mkl-shop-card-qr { flex-shrink: 0; margin-left: 32px; }
.mkl-shop-card-qr img {
  /* 二维码显示尺寸 */
  width: 96px; height: 96px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--ct-qr-bg);
  padding: 6px;
  transition: transform 0.3s var(--ct-ease-brand), box-shadow 0.3s ease;
}
.mkl-contact-card:hover .mkl-shop-card-qr img {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* ── 分隔线 ── */
.mkl-ct-divider-wrap { display: flex; justify-content: center; margin-top: 200px; }
.mkl-ct-divider {
  width: 32px; height: 1px; background: var(--ct-border);
  opacity: 0; transition: opacity 0.6s ease, width 0.8s var(--ct-ease-brand);
}
.mkl-ct-divider.in-view { opacity: 1; width: 64px; }

/* ═══════════════════════════════════════
   Closing
   ═══════════════════════════════════════ */

.mkl-ct-section--closing { margin-top: 200px; text-align: center; }
.mkl-ct-section--closing .mkl-ct-icon { margin-left: auto; margin-right: auto; }

.mkl-closing-body {
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s var(--ct-ease-brand), transform 0.7s var(--ct-ease-brand);
}
.mkl-closing-body.in-view { opacity: 1; transform: translateY(0); }
.mkl-closing-text {
  font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.5;
}
.mkl-closing-sub {
  margin-top: 12px; font-size: 15px; color: var(--ct-text-secondary);
}
.mkl-closing-cta {
  display: inline-block; margin-top: 40px;
  padding: 14px 40px;
  background: var(--ct-blue); color: #fff;
  font-size: 15px; font-weight: 500; font-family: inherit;
  border: none; border-radius: 980px; cursor: pointer; text-decoration: none;
  position: relative;
  transition: transform 0.2s ease;
}
.mkl-closing-cta:hover { transform: scale(1.03); }
.mkl-closing-cta::after {
  content: ''; position: absolute; inset: -4px; border-radius: 980px;
  box-shadow: 0 0 20px rgba(0,113,227,0.3);
  opacity: 0; animation: mklCtaGlow 2.4s ease-in-out infinite;
}
@keyframes mklCtaGlow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Footer */
.mkl-ct-section--footer { margin-top: 140px; padding-bottom: 100px; }
.mkl-ct-page-footer {
  text-align: center;
  opacity: 0; transition: opacity 0.6s ease;
}
.mkl-ct-page-footer.in-view { opacity: 1; }
.mkl-ct-footer-city { font-size: 13px; color: var(--ct-text-tertiary); }
.mkl-ct-footer-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ct-blue); margin-top: 24px;
  opacity: 0; transform: scale(0.5);
}
.mkl-ct-page-footer.in-view .mkl-ct-footer-dot {
  animation: mklDotPulse 1.2s var(--ct-ease-brand) 0.3s forwards;
}
@keyframes mklDotPulse {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 0.9; transform: scale(1.8); }
  100% { opacity: 0.6; transform: scale(1); }
}