/**
 * =============================================================================
 * PRODUCTS
 * =============================================================================
 * TTapi / 无线画布 展示区
 *
 * - 左右两栏:文案 + 彩色"舞台"面板 (面板颜色取自对应的叶片)
 * - 舞台内是玻璃浏览器窗口,鼠标移动时轻微 3D 倾斜
 * - .reverse 交换左右
 *
 * 对应 HTML:
 *   <section class="product" id="ttapi">
 *     <div class="product-layout [reverse]">
 *       <div class="product-copy">…</div>
 *       <div class="product-stage stage-teal|stage-warm" data-tilt>…</div>
 */

/* 区块上下留白 (两个产品区块相邻,所以单个留白较小) */
.product {
  padding: 70px 0;
}

/* 两栏网格:文案 5 份,截图 7 份 */
.product-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: 72px;
}

/* 反向布局:截图在左,文案在右 */
.product-layout.reverse {
  grid-template-columns: 7fr 5fr;
}

.product-layout.reverse .product-copy {
  order: 2; /* 视觉上把文案移到右侧,HTML 顺序不变 (利于阅读顺序和 SEO) */
}

/* ===== 文案 ===== */

/* 产品名:小叶片图标 + 名称 */
.product-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* 产品名前的小叶片 (颜色通过 HTML 上的 --la / --lb 指定) */
.product-leaf {
  width: 16px;
  height: 27px;
}

/* 产品简介段落 (max-width 控制每行字数,便于阅读) */
.product-lede {
  margin: 22px 0 28px;
  max-width: 26em;
  color: var(--ink-soft);
}

/* 卖点列表:上下细线分隔 */
.product-points {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  max-width: 26em;
  border-top: 1px solid var(--line);
}

.product-points li {
  position: relative;
  padding: 13px 0 13px 26px; /* 左侧留出对勾的位置 */
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink);
}

/* 小对勾:用左边框 + 下边框拼成 L 形,再旋转 -45° */
.product-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 10px;
  height: 5px;
  margin-top: -5px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* 无线画布的对勾用橙色 (对应左侧叶片) */
#canvas .product-points li::before {
  border-color: var(--orange);
}

/* ===== 舞台面板 (放截图的彩色圆角底板) ===== */
.product-stage {
  position: relative;
  overflow: hidden;    /* 裁掉角落水印叶片和截图底部 */
  padding: 56px 0 0 56px; /* 只留左上内边距,截图从右下角"溢出"面板 */
  border-radius: 40px;
  perspective: 1400px; /* 3D 倾斜的透视距离 */
}

/* 反向布局时,内边距改为右上 */
.product-layout.reverse .product-stage {
  padding: 56px 56px 0 0;
}

/* TTapi 面板:青绿色 (对应中间叶片) */
.stage-teal {
  background:
    radial-gradient(90% 80% at 10% 0%, rgba(255, 255, 255, 0.7), transparent 60%), /* 左上角高光 */
    linear-gradient(150deg, #d8f0ea 0%, #a9dccf 100%);
}

/* 无线画布面板:暖橙到嫩绿 (对应左侧叶片) */
.stage-warm {
  background:
    radial-gradient(90% 80% at 90% 0%, rgba(255, 255, 255, 0.7), transparent 60%), /* 右上角高光 */
    linear-gradient(150deg, #fbeccf 0%, #dcebb0 100%);
}

/* 面板角落的大叶片水印 (半透明,只露出一部分) */
.stage-leaf {
  position: absolute;
  width: 300px;
  height: 514px;
  right: -60px;
  bottom: -140px;
  opacity: 0.22;
  transform: rotate(28deg);
  pointer-events: none; /* 不挡鼠标,保证 3D 倾斜正常响应 */
}

/* 反向布局时水印放到左下角,并反向倾斜 */
.product-layout.reverse .stage-leaf {
  right: auto;
  left: -60px;
  transform: rotate(-28deg);
}

/* 玻璃浏览器窗口 (--rx / --ry 由 js/interactions.js 根据鼠标位置写入) */
.browser-frame {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  padding: 0 8px;
  border-radius: 22px 22px 0 0; /* 只有上方圆角,底部被面板裁切 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.3));
  box-shadow:
    inset 0 1.5px 0.5px #fff,                        /* 顶部高光边 */
    inset 1px 0 0.5px rgba(255, 255, 255, 0.6),      /* 左侧细边 */
    inset -1px 0 0.5px rgba(255, 255, 255, 0.6),     /* 右侧细边 */
    inset 0 16px 26px -18px rgba(255, 255, 255, 0.95), /* 顶部内发光 */
    0 30px 60px -20px rgba(15, 60, 52, 0.35);        /* 外投影 */
  backdrop-filter: blur(20px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.05);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 50% 100%; /* 以底边为轴倾斜,像立在面板上 */
  transition: transform 0.6s var(--ease-out);
}

/* 浏览器顶栏:三个圆点 + 网址 */
.browser-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}

/* 顶栏左侧的三个窗口圆点 */
.browser-bar > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(15, 37, 34, 0.14);
}

/* 顶栏网址文字 */
.browser-bar small {
  margin-left: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* 产品截图 */
.browser-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 0 1px rgba(15, 37, 34, 0.06); /* 极细描边,和玻璃框分开 */
}

/* ===== 平板 (< 900px):改为单列,文案在上、截图在下 ===== */
@media (max-width: 900px) {
  .product-layout,
  .product-layout.reverse {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .product-layout.reverse .product-copy {
    order: 0; /* 恢复 HTML 顺序,文案始终在截图上方 */
  }
}

/* ===== 手机 (< 650px):缩小留白、圆角和窗口元素 ===== */
@media (max-width: 650px) {
  .product {
    padding: 48px 0;
  }

  .product-stage,
  .product-layout.reverse .product-stage {
    padding: 28px 0 0 28px;
    border-radius: 26px;
  }

  .product-layout.reverse .product-stage {
    padding: 28px 28px 0 0;
  }

  .browser-frame {
    padding: 0 5px;
    border-radius: 14px 14px 0 0;
  }

  .browser-bar {
    height: 30px;
  }

  .browser-bar > span {
    width: 7px;
    height: 7px;
  }

  .browser-frame img {
    border-radius: 8px 8px 0 0;
  }

  .stage-leaf {
    width: 180px;
    height: 308px;
  }
}