/* ══════════════════════════════════════════════════════
   核心功能模块  #features(感知 · 记录 · 我的)
   子组件:__head(标签/渐变标题/副标题) · __tabs(三页签)
          __panel--perceive(感知面板:左文案 + 右悬浮功能卡)
   设计稿 1920:面板内容区 1467(文案 715 + 悬浮区 752)
   悬浮卡几何(蓝湖切片换算)写在 HTML 内联样式里
   记录 / 我的 两个面板后续补,页签切换逻辑届时一并加
   ══════════════════════════════════════════════════════ */

.features {
  padding: 104px 60px 155px;
}

/* ── 头部文案 ── */
.features__head { text-align: center; }
.features__heading {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 3.4px;
  line-height: 40px;
  color: #C5B8ED;
}
.features__slogan {
  margin: 32px auto 0;
  width: fit-content;
  font-weight: 400;
  font-size: 78px;
  line-height: 120px;
  color: #FCEEFF; /* 渐变兜底色 */
  background-image: linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.features__sub {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 300;
  line-height: 40px;
  color: #C5B8ED;
}

/* ── 页签 ── */
.features__tabs {
  margin-top: 142px;
  display: flex;
  justify-content: center;
  gap: 26px;
}
.features__tab {
  width: 162px;
  /* 高度不写死:窄屏一行放不下时 flex 压缩宽度,aspect-ratio 让高度跟着
     等比收,胶囊切图(100% 100%)不会被横向挤扁成方角 */
  aspect-ratio: 162 / 50;
  min-width: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: url('../../images/features/tab.png') center / 100% 100% no-repeat;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4); /* 未选中:40% 透明度 */
  font-family: inherit;
  transition: color 0.2s ease;
}
.features__tab--active {
  background-image: url('../../images/features/tab-active.png');
  color: #C5B8ED;
}

/* ── 面板(感知 / 记录,页签切换) ──
   响应式方针(用户定):小屏电脑保持左右布局、两栏按 flex-basis 比例
   收缩(不许折成上下),≤960 移动端才允许堆叠 */
.features__panel {
  max-width: 1467px;
  margin: 151px auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* 文案 715 + 间隙 + 右侧视觉 */
  gap: 32px; /* 收缩时的最小栏距,宽裕时由 space-between 拉开 */
}
/* 隐藏页签只做视觉隐藏、保留布局(高度收 0 裁切):iframe 日历以真实宽度
   后台预渲染,切到「记录」立即可见,不再等宽度恢复后重建;
   display 必须显式写 flex 盖掉 UA 的 [hidden]{display:none} */
.features__panel[hidden] {
  display: flex;
  visibility: hidden;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
}
.features__text { flex: 0 1 715px; min-width: 0; } /* 设计宽为基准,窄屏按比例收缩 */
.features__kicker {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 3.4px;
  line-height: 40px;
  color: #C5B8ED;
}
.features__title {
  margin-top: 16px;
  width: fit-content;
  font-weight: 400;
  /* 78px 到列宽容不下最长行(6 字)时随视口收缩:
     列宽≈(100vw-左右 padding120-栏距32)×715/1352,除以 6 字 ≈ ×0.088 */
  font-size: min(78px, calc((100vw - 152px) * 0.088));
  line-height: 1.28; /* = 设计稿 100/78,改相对值随字号缩放 */
  color: #FCEEFF; /* 渐变兜底色 */
  background-image: linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.features__desc {
  margin-top: 27px;
  font-size: 16px;
  font-weight: 300;
  line-height: 36px;
  color: #C5B8ED;
}
.features__note {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 300;
  line-height: 36px;
  color: #C5B8ED;
}
.features__chips {
  margin: 24px 0 0 7px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.features__chips span {
  width: 104px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url('../../images/features/chip.png') center / 100% 100% no-repeat;
  font-size: 12px;
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0.6;
}

/* ── 记录面板:月相日历卡(底/描边手写,不用切图) ──
   自适应:宽度收缩到组件设计宽(430 + 内边距),窄屏跟随容器;
   高度由宿主 JS 按 iframe 内日历实际高度同步(5/6 行月份高度不同) */
.features__cal-card {
  flex: 0 1 446px;
  min-width: 300px; /* 日历可读下限 */
  border-radius: 24px;
  border: 1px solid rgba(197, 184, 237, 0.25);
  background: linear-gradient(165deg,
    rgba(197, 184, 237, 0.10) 0%,
    rgba(55, 56, 104, 0.22) 55%,
    rgba(31, 22, 71, 0.38) 100%);
  padding: 14px 8px 10px;
}
.features__cal {
  width: 100%;
  height: 500px; /* 兜底,加载后由 JS 跟随内容 */
  border: 0;
  display: block;
  transition: height 0.25s ease;
}

/* ── 我的面板:月相身份卡(塔罗展开 + 点击切牌,GSAP 驱动,脚本在 index.html 底部) ── */
.features__mine-visual {
  position: relative;
  flex: 0 1 626px;
  min-width: 0;
  aspect-ratio: 626 / 470; /* 原 626×470,随宽度等比 */
}
.features__idcard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 47.9%;             /* 300/626,随容器缩放;卡图 933×1290 */
  transform: translate(-50%, -50%); /* 无 JS 兜底居中;GSAP 用 xPercent/yPercent 等价接管 */
  will-change: transform;
}
.features__idcard img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* ── 悬浮功能卡区(成品 @2x 卡图,位置走 HTML 内联样式,
   按 637×464 画布换算成百分比,画布随容器等比缩放) ── */
.features__float {
  position: relative;
  flex: 0 1 637px;
  min-width: 0;
  aspect-ratio: 637 / 464; /* 卡片几何是画布百分比,随宽度等比 */
}
.features__float img { position: absolute; }

/* ── 响应式 ──
   >960:保持左右布局,两栏随视口按比例收缩(基础规则的 flex-basis 承担),不折行;
   ≤960:移动端例外,允许折成上下堆叠 */
@media (max-width: 960px) {
  .features { padding: 100px 24px 120px; }
  .features__slogan { font-size: clamp(2rem, 8vw, 78px); line-height: 1.5; }
  .features__sub { font-size: 16px; line-height: 1.9; }
  .features__tabs { margin-top: 60px; gap: 14px; } /* 缩间距,给页签多留点宽度少缩一点 */
  .features__panel { margin-top: 60px; flex-direction: column; align-items: center; gap: 60px; }
  .features__title { font-size: clamp(2rem, 8vw, 78px); line-height: 1.4; }
  /* 竖排后 flex-basis 落在纵轴,恢复显式宽度 */
  .features__text { flex: 0 1 auto; width: min(100%, 715px); }
  .features__float { flex: 0 1 auto; width: min(637px, 100%); }
  .features__cal-card { flex: 0 1 auto; width: min(446px, 100%); }
  .features__mine-visual { flex: 0 1 auto; width: min(626px, 100%); }
}