/* ============================================================
   2810unsheathe.com — 首页专属样式（苹果官网风格全屏滚动）
   桌面版 v1.1.1
   ============================================================ */

/* 1) 全屏媒体展示卡片 ----------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.hero-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.hero-slide img,
.hero-slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 铺满且不出现黑边，按需裁切居中 */
  object-position: center;
}

/* 视频声音开关（按钮只生成在视频卡片上 → 恒显示；v1.1.1：不再依赖 has-video 类切换）
   v1.1.2：top 需避开顶部 44px 固定菜单栏（原 18px 被其毛玻璃盖住 → “不可见”）
   v1.1.3：大小为原来的 2 倍（36→72px）并向左下移动；z-index 提到 30，
   确保永远处于整卡跳转层（z10）之上 → 可点 */
.hero-sound {
  position: absolute;
  top: 72px;
  right: 32px;               /* 向左下移动（原 58px/18px） */
  z-index: 30;
  display: flex;             /* v1.1.1：修复“不显示”bug */
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.2s ease;
}

.hero-sound svg { width: 30px; height: 30px; }
.hero-sound:hover { background: rgba(20, 20, 22, 0.72); }

/* v1.1.3：左右边缘提示区——容器不再拦截指针（原整条盖住喇叭/跳转层导致“点不动”）；
   箭头由 JS 在鼠标靠近边缘时点亮（.edge-hot）后才可点 */
.hero-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;      /* v1.1.3：不接收指针事件 */
}

.hero-edge.left { left: 0; }
.hero-edge.right { right: 0; }

.hero-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(22, 22, 23, 0.34);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;         /* v1.1.3：默认不可点，点亮后才可点 */
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.2s ease;
}

.hero-arrow.edge-hot,
.hero-arrow:focus-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.hero-arrow.edge-hot:hover { background: rgba(22, 22, 23, 0.62); }

/* v1.1.1：媒体卡文字（随卡片移动；卡片原点为左下角）
   按 Media_display_cards/cardXX.md（2026-09-06 更新版）：
   card02/03 → 文本置于右下角：区域 (2/3W～W)，y=1/4H，正文 30px
   card04 → 标题/正文 x 轴居中，y=1/3H，正文 30px，约 30 字/行
   （桌面定位为估算排布：块底距卡底 34px，文字带小圈阴影） */
.hero-caption {
  position: absolute;
  bottom: 34px;
  z-index: 1;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.cap-right {
  left: auto;
  right: 0;                             /* 贴右下角，宽度 ≤ 卡宽 1/3 → 文本起点 ≈ 2/3W */
  bottom: 15%;                          /* v1.1.2：card02/03 文字上移（介于 1.1.1 贴底与 1.1.0 的 28% 之间） */
  width: min(640px, 33.3333vw);
  text-align: left;
}

.cap-mid {
  left: 50%;
  right: auto;
  transform: translateX(-50%);          /* x 轴居中 */
  width: min(900px, 86vw);
  text-align: center;
}

.caption-title {
  font-size: 40px;            /* v1.1.8：文本1 96→40px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* v1.1.4：文本1与文本2之间的主色水平衬线
   v1.1.5：长度 = 文本2宽度（与正文块同宽 100%）；粗细 3→6px（2 倍）；
   位置上移并居中于两文本之间（mt9 + 高6 + mb3 = 原 18px 间距，两文本位置不变） */
.caption-rule {
  width: 100%;
  height: 6px;
  background-color: #81d8d0;   /* 网站主色 */
  margin: 9px 0 3px;
}

.cap-right .caption-rule { margin-left: 0; }
.cap-mid .caption-rule { margin-left: auto; margin-right: auto; }  /* 居中衬线 */

.caption-para {
  margin-top: 0;              /* 间距已由 .caption-rule 承担（净间距仍 18px） */
  font-size: 26px;            /* v1.1.8：文本2 30→26px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* v1.1.1：整卡跳转层（位于媒体与文字之上、喇叭按钮之下）
   v1.1.3：z-index 2 → 10（仍低于喇叭按钮的 30） */
.hero-go {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: pointer;
}

/* 喇叭按钮 z-index 30（见上方 .hero-sound 定义），恒在跳转层之上 */

/* 2) 小卡片展示区（1.0.4：两张卡片总宽与网页同宽，仅留左/中/右三条同宽空隙） */

.promo-section {
  width: 100%;
  padding: 64px 12px 0;      /* 左右各一条 12px 空隙 */
}

.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 永远一排两个 */
  gap: 12px;                        /* 中间一条 12px 空隙（与左右等宽） */
}

.promo-card {
  position: relative;
  display: block;
  height: 560px;                    /* 竖直方向长度固定 */
  border-radius: 0;                 /* 1.0.5：直角矩形（原圆角矩形） */
  overflow: hidden;
  background: #f5f5f7;
}

.promo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* 铺满整卡，无黑边 */
  object-position: center;
  transition: transform 0.4s ease, filter 0.4s ease;
}

/* 悬停：图片毛玻璃 + 居中文本（离开 0.5s 后消失） */
.promo-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.35s ease 0.5s;   /* 离开时延迟 0.5s 淡出 */
}

.promo-label {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.promo-card:hover .promo-img {
  transform: scale(1.07);
  filter: blur(28px) brightness(0.86);
}

.promo-card:hover .promo-veil {
  opacity: 1;
  transition-delay: 0s;            /* 进入时立即出现 */
}

.promo-card:hover .promo-label {
  opacity: 1;
  transform: translateY(0);
}

/* 3) 页底署名 */
.byline {
  text-align: center;
  padding: 80px 0 46px;
  color: #86868b;
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* 4) 回到顶部按钮（滚动到底部后出现在右下角） */
.backtop {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(22, 22, 23, 0.88);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.backtop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.backtop:hover { background: #06c; }

/* 1.0.5：移除自定义回弹动画（与浏览器原生回弹叠加导致“弹两次”），
   顶部/底部回弹交由浏览器原生效果。 */

/* 1.0.6：移动端基础适配 */
@media (max-width: 767px) {
  .promo-grid { grid-template-columns: 1fr; }   /* 手机上小卡片单列（苹果官网做法） */
  /* v1.1.0：手机上的媒体卡文字自动缩小铺宽 */
  .hero-caption {
    left: 7% !important;
    right: auto !important;
    bottom: 14%;
    width: 86%;
    transform: none !important;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  .caption-title { font-size: 30px; }   /* v1.1.8：手机端文本1 30px（随新基准） */
  .caption-rule { width: 100%; height: 4px; margin: 4px 0 2px; }   /* v1.1.5：与正文同宽、2 倍粗，净间距 10px 不变 */
  .caption-para { font-size: 19px; margin-top: 0; }   /* v1.1.8：手机端文本2 19px */
  /* v1.1.3：手机端喇叭按钮适当缩小并留出菜单栏空间 */
  .hero-sound { top: 62px; right: 18px; width: 60px; height: 60px; }
  .hero-sound svg { width: 24px; height: 24px; }
}

/* 手机浏览器地址栏伸缩：优先使用动态视口高度（有 100vh 兜底） */
@supports (height: 100dvh) {
  .hero { height: 100dvh; }
}