/* ==========================================================================
   Cearance 官网 —— 响应式改造 + 动效样式
   Pencil 导出的是固定 1440px 画布的纯内联样式 HTML（没有媒体查询/flex-wrap）。
   这份样式表负责：
     1. 让固定画布在 <=1023px 时变成流式布局（配合 build-site.py 打的 class）
     2. 宽屏下让区块背景铺满视口边缘（出血背景，结构已由 build-site.py 处理好，
        这里只需兜底 overflow）
     3. 页面滚动进场、卡片悬浮、数字跳动等交互动效
   .pen-* / stack-mobile / fluid-text-* / fluid-width / wrap-mobile 等 class
   都是 build-site.py 按图层语义批量打上的，不是人工逐个页面写的。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: hidden; /* 出血背景用了 100vw，极端情况下会比视口多出一条滚动条的宽度 */
}

img, svg { max-width: 100%; }

/* -------------------------------------------------------------------------
   根画板：桌面 1440px 定宽居中；<=1023px 变成流式
   ------------------------------------------------------------------------- */
.pen-root {
  overflow: visible !important; /* 让出血背景层能突破画布边界铺到视口边缘 */
}

@media (max-width: 1023px) {
  .pen-root {
    width: 100% !important;
  }

  /* flex 子项默认不允许收缩到内容尺寸以下（min-width:auto 陷阱），
     配合 flex-shrink:0（Pencil 导出默认值）会导致横向溢出。
     冻结区（产品截图 / 对比表）明确不参与收缩，保持像素级还原、改走横向滚动。 */
  .pen-root :not(.pen-frozen):not(.pen-frozen *) {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .pen-section {
    padding: 56px 20px !important;
  }
  .pen-section[data-pencil-name="导航栏"] {
    padding: 0 16px !important;
    height: 64px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pen-section {
    padding: 64px 40px !important;
  }
  .pen-section[data-pencil-name="导航栏"] {
    padding: 0 32px !important;
  }
}

/* -------------------------------------------------------------------------
   多列区块 → 移动端改竖排
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .stack-mobile {
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
  }
  .stack-mobile > * {
    max-width: 100% !important;
  }

  .hide-mobile {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   标题类文字：取消强制不换行；大字号分档 clamp() 弹性缩放
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .wrap-mobile {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* 只在 <=1023px 断点内覆盖字号；桌面端完全不碰这个属性，让 Pencil 导出的
   内联 font-size 原样生效——之前用 `revert` 想在桌面端"还原"，但 revert
   会连内联样式一起跳过、直接掉到浏览器默认 16px，导致桌面标题变小。 */
@media (max-width: 1023px) {
  .fluid-text-xl { font-size: clamp(28px, 9vw, 66px) !important; }
  .fluid-text-lg { font-size: clamp(22px, 7vw, 47px) !important; }
  .fluid-text-md { font-size: clamp(19px, 6vw, 35px) !important; }
}

/* -------------------------------------------------------------------------
   定宽内容列（如 590px 的文案栏）：<=1023px 撑满、不超过原宽度
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .fluid-width {
    width: 100% !important;
    max-width: var(--w, 100%) !important;
  }
}

/* -------------------------------------------------------------------------
   冻结区（产品截图 mockup / 对比表）：保持桌面像素还原，横向滚动展示
   ------------------------------------------------------------------------- */
.pen-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}
.pen-scroll::-webkit-scrollbar { height: 6px; }
.pen-scroll::-webkit-scrollbar-thumb { background: #C7D2E4; border-radius: 3px; }

@media (max-width: 1023px) {
  .pen-frozen {
    min-width: 900px !important;
  }
}

/* -------------------------------------------------------------------------
   大幅装饰层（航海路线 / 集装箱堆场）：按桌面版首屏的固定高度手绘，坐标不会跟着
   内容变化自适应。移动端内容改竖排后区块变高，装饰层继续叠在原位会盖住正文，
   所以 <=1023px 直接隐藏，只保留桌面端的完整视觉。
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  [data-pencil-name="航海装饰层"],
  [data-pencil-name="集装箱阵列"] {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   移动端导航：汉堡按钮 + 折叠面板
   ------------------------------------------------------------------------- */
.pen-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: #111827;
  cursor: pointer;
  flex-shrink: 0;
}
.pen-burger-close { display: none; }
.pen-burger[aria-expanded="true"] .pen-burger-open { display: none; }
.pen-burger[aria-expanded="true"] .pen-burger-close { display: block; }

.pen-mobile-panel {
  display: none;
  flex-direction: column;
  width: 100%;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  overflow: hidden;
  max-height: 0;
  transition: max-height .32s ease;
}
.pen-mobile-panel.is-open {
  display: flex;
  max-height: 480px;
}
.pen-mobile-menu {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 100%;
  padding: 8px 20px 4px;
}
.pen-mobile-menu > * {
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid #F3F4F6;
  font-size: 15px !important;
}
.pen-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px 20px 20px;
}
.pen-mobile-actions > * {
  width: 100%;
  justify-content: center !important;
}

@media (max-width: 1023px) {
  .pen-desktop-menu { display: none !important; }
  .hide-mobile-inline { display: none !important; }
  .pen-burger { display: inline-flex; }
}
@media (min-width: 1024px) {
  .pen-mobile-panel { display: none !important; }
}

/* -------------------------------------------------------------------------
   滚动进场动画
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
   悬浮交互：按钮 / 卡片 / 表格行 / 导航链接
   ------------------------------------------------------------------------- */
a { -webkit-tap-highlight-color: transparent; }

div:has(> a) {
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, filter .16s ease;
}
div:has(> a):hover {
  filter: brightness(1.04);
}

/* 主按钮（实心蓝/白/橙）与次按钮（描边）悬浮抬升 */
[data-pencil-name$="按钮"]:has(> a),
[data-pencil-name$="按钮文字"],
[data-pencil-name="主按钮"],
[data-pencil-name="次按钮"] {
  transition: transform .16s ease, box-shadow .16s ease;
}
[data-pencil-name="主按钮"]:hover,
[data-pencil-name="次按钮"]:hover,
[data-pencil-name$="按钮"]:has(> a):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 61, 153, .18);
}
[data-pencil-name="主按钮"]:active,
[data-pencil-name="次按钮"]:active,
[data-pencil-name$="按钮"]:has(> a):active {
  transform: translateY(0);
  box-shadow: none;
}

/* 卡片类容器：功能卡 / 定价卡 / 方案卡 / 路线卡 悬浮抬升 + 描边变色 */
[data-pencil-name^="套餐"],
[data-pencil-name^="方案 "],
.pen-card-hover {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[data-pencil-name^="套餐"]:hover,
[data-pencil-name^="方案 "]:hover,
.pen-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11, 26, 61, .10);
}

/* 表格行悬浮高亮（冻结区内也保留，帮助横向扫读） */
.pen-frozen [data-pencil-name^="行"],
.pen-frozen tr {
  transition: background-color .12s ease;
}

/* 导航链接下划线动效 */
.pen-desktop-menu > div {
  position: relative;
}
.pen-desktop-menu > div::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 2px;
  background: #0B3D99;
  transition: right .2s ease;
}
.pen-desktop-menu > div:hover::after {
  right: 0;
}

/* -------------------------------------------------------------------------
   数字滚动计数占位（真正数值由 app.js 写入，这里只保证不跳动）
   ------------------------------------------------------------------------- */
[data-count-target] { font-variant-numeric: tabular-nums; }