/**
 * =============================================================================
 * HERO
 * =============================================================================
 * 首屏:左侧大标题,右侧 Logo 叶片从一块磨砂玻璃后"打开"。
 *
 * - 页面加载时叶片像花苞一样依次展开 (全站唯一的自动动画)
 * - 叶片分三层,鼠标移动时产生视差 (js/interactions.js 写入 --px / --py)
 * - 前景玻璃板用 backdrop-filter 真实模糊后方叶片,并模拟一个 AI 输入框
 *
 * 对应 HTML:
 *   <section class="hero">
 *     <div class="hero-inner">
 *       <div class="hero-copy">  标题 / 副标题 / 按钮
 *       <div class="hero-art">   <svg class="hero-leaves"> + <div class="hero-pane">
 */

.hero {
  position: relative;
  isolation: isolate; /* 建立独立层叠上下文,让 ::before 的 z-index:-1 只在本区块内生效 */
  overflow: hidden;
  padding: 150px 0 110px; /* 顶部留出悬浮导航的高度 */
}

/* 背景:叶片色的极淡光晕 (青 / 嫩绿 / 橙) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(640px 480px at 78% 30%, rgba(14, 156, 154, 0.14), transparent 70%),
    radial-gradient(520px 420px at 92% 78%, rgba(188, 212, 55, 0.16), transparent 70%),
    radial-gradient(420px 360px at 58% 85%, rgba(247, 162, 63, 0.1), transparent 70%);
  /* 底部渐隐,避免光晕在区块边缘被截断 */
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* 左文案、右叶片的两栏网格 */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

/* ===== 文案 ===== */
.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  animation: hero-fade 1s var(--ease-out) both;
}

/* 副标题 (延迟 0.12s 入场) */
.hero-lede {
  max-width: 26em;
  margin: 28px 0 40px;
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--ink-soft);
  animation: hero-fade 1s 0.12s var(--ease-out) both;
}

/* 按钮组 (延迟 0.24s 入场) */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  animation: hero-fade 1s 0.24s var(--ease-out) both;
}

/* 文案入场:从下方 18px 淡入 */
@keyframes hero-fade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ===== 叶片 + 玻璃板 ===== */

/* 叶片区容器:比例与 SVG viewBox (600×560) 一致 */
.hero-art {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 600 / 560;
  justify-self: end;
}

.hero-leaves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible; /* 视差位移时叶尖不被裁掉 */
}

/* 视差层:每层按 data-depth 移动不同距离,形成前后景深 */
.leaf-layer {
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.9s var(--ease-out);
}

/* 叶片:两半之间留出白色缝隙,与 Logo 一致 */
.leaf path {
  stroke: var(--paper);
  stroke-width: 7;
  stroke-linejoin: round;
}

/* 展开动画:从合拢的花苞 (0°、缩小) 转到各自角度
 * --r 在 HTML 中为每片叶子单独设置 (中 0° / 左 -47° / 右 47°)
 * transform-origin: 0 0 即叶柄位置 (父级 <g> 已平移到叶柄) */
.leaf {
  transform-origin: 0 0;
  transform: rotate(var(--r));
  animation: leaf-open 1.5s var(--ease-out) both;
}

/* 中间叶先出现,两侧叶稍后展开 */
.leaf-c {
  animation-delay: 0.15s;
}

.leaf-l,
.leaf-r {
  animation-delay: 0.4s;
}

@keyframes leaf-open {
  from {
    transform: rotate(0deg) scale(0.35);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}

/* 前景液态玻璃板:模拟一个 AI 输入框
 * Chrome/Edge 中 js/liquid-glass.js 会覆盖 backdrop-filter,叠加边缘折射 */
.hero-pane {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 0;
  height: 38%; /* 盖住叶片下半部分 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 文字贴底 */
  gap: 8px;
  padding: 28px 32px;
  border-radius: 36px;
  /* 上亮、中透、下微亮的填充,模拟玻璃厚度 */
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0.3) 100%);
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 1),       /* 顶部高光边 */
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.7),      /* 底部反光边 */
    inset 1px 0 0.5px rgba(255, 255, 255, 0.5),       /* 左侧细边 */
    inset -1px 0 0.5px rgba(255, 255, 255, 0.5),      /* 右侧细边 */
    inset 0 18px 30px -20px rgba(255, 255, 255, 0.95), /* 顶部内发光 */
    inset 0 -20px 36px -24px rgba(255, 255, 255, 0.9), /* 底部内发光 */
    0 0 0 1px rgba(15, 37, 34, 0.04),                 /* 极细外轮廓 */
    0 50px 90px -40px rgba(15, 60, 52, 0.5);          /* 柔和投影 */
  backdrop-filter: blur(22px) saturate(220%) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(220%) brightness(1.05);
  transform: translate(var(--px, 0px), var(--py, 0px)); /* 视差 (data-depth 为负,与叶片反向移动) */
  transition: transform 0.9s var(--ease-out);
  animation: pane-rise 1.2s 0.7s var(--ease-out) both; /* 叶片展开后,玻璃板升起 */
}

/* 玻璃表面的斜向反光 */
.hero-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.25) 100%);
}

/* 输入框上方的提示语 */
.hero-pane-label {
  position: relative;
  font-size: 14px;
  color: var(--ink-soft);
}

/* 正在"输入"的示例指令 (文字由 js/interactions.js 轮播) */
.hero-pane-prompt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1.4em; /* 文字删空时保持高度,避免跳动 */
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

/* 闪烁的输入光标 */
.hero-caret {
  width: 2px;
  height: 1.05em;
  margin-left: 4px;
  border-radius: 1px;
  background: var(--teal);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* 玻璃板升起:使用独立的 translate 属性,不与视差用的 transform 冲突 */
@keyframes pane-rise {
  from {
    opacity: 0;
    translate: 0 30px;
  }
}

/* ===== 平板 (< 900px):单列,文案在上、叶片居中在下 ===== */
@media (max-width: 900px) {
  .hero {
    padding: 120px 0 80px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero-art {
    justify-self: center;
    max-width: 520px;
  }
}

/* ===== 手机 (< 650px) ===== */
@media (max-width: 650px) {
  .hero {
    padding: 108px 0 64px;
  }

  .hero h1 {
    font-size: 50px;
  }

  .hero-lede {
    margin: 20px 0 30px;
  }

  /* 按钮撑满整行,便于手指点击 */
  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .hero-pane {
    height: 40%;
    padding: 16px 20px;
    border-radius: 24px;
    gap: 4px;
  }

  .hero-pane-label {
    font-size: 12px;
  }

  .hero-pane-prompt {
    font-size: 16px;
  }
}