/* ============================================================================
 * pages/home.css — 首页专属样式
 * 项目：304am永利集团 官网 V4
 * ----------------------------------------------------------------------------
 * 范围：仅服务首页的模块样式（Hero、关键词条、关于、使命、CTA 收尾）。
 *       跨页复用的组件一律放 components.css / blocks.css，此处不放。
 *
 * 依赖：tokens.css → base.css → layout.css → components.css → blocks.css
 * ==========================================================================*/

@layer pages {

  /* ==========================================================================
   * 1. Hero 主视觉
   * ----------------------------------------------------------------------------
   * V3 现状：深色底 + 超大字 + 右侧坐标，气质到位，但首屏只有"看"没有"用"，
   *          用户需要下滑才能触达任何业务信息。
   * V4 处理：保留编辑式大字与坐标语言，但把首屏下沿让给选型器的入口锚点，
   *          使 Hero 同时承担"品牌宣言"与"任务入口"两个职责。
   *
   * 素材：唯一经核实可安全使用的实拍图 —— 胶带机廊道现场（源自 V3 产物）。
   *       图片以 <img> + object-fit 承载，而非 CSS 背景，以便 fetchpriority
   *       与响应式 srcset 生效。
   * =========================================================================*/
  .hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--nav-h) + var(--sp-12)) var(--sp-12);
    background: var(--ink-900);
    color: var(--text-invert);
    overflow: clip;
  }

  /* 小屏用固定高度而非 svh 比例，避免地址栏伸缩导致内容跳动 */
  @media (max-width: 767px) {
    .hero {
      min-height: auto;
      padding-block: var(--sp-16) var(--sp-10);
    }
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    /* 现场照天空占比大，压暗上半部以保证白色标题对比度达标 */
    filter: saturate(.9) contrast(1.05);
    transform: scale(1.04);
    animation: hero-drift 26s var(--ease-in-out) infinite alternate;
  }

  /* Hero 宣传视频：与图片同样的填充方式，但不做推近动画 */
  .hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.9) contrast(1.05);
  }

  /* 声音开关：定位在导航正下方的右侧留白区（该区域无内容），
     absolute 随 Hero 滚动，不像右下角快捷条那样常驻悬浮；
     默认隐藏，鼠标悬停 Hero 时显现；开启后高亮并保持可见 */
  .hero__mute {
    position: absolute;
    top: calc(var(--nav-h) + var(--sp-6));
    right: var(--sp-6);
    /* 作为 .hero 直接子元素，z-index 需高于 .hero__inner（z:1），但低于 .site-header（z:100） */
    z-index: 3;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(5, 17, 27, .4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .25s var(--ease-in-out), transform .25s var(--ease-in-out),
                background-color .25s var(--ease-in-out), border-color .25s var(--ease-in-out);
  }

  /* 悬停 Hero 或按钮获得键盘焦点时显现；可点击状态同步恢复 */
  .hero:hover .hero__mute,
  .hero:focus-within .hero__mute {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /* 声音已开启时按钮保持可见，避免鼠标移开后用户误以为无法关闭 */
  .hero__mute.is-unmuted {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    border-color: var(--accent-500);
    background: rgba(5, 17, 27, .62);
  }

  /* 触屏设备无 hover 事件，按钮始终可见，否则永远无法开启声音 */
  @media (hover: none) {
    .hero__mute {
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }
  }

  /* 窄屏：导航较矮，按钮下移一点与标题区分开 */
  @media (max-width: 1023px) {
    .hero__mute {
      top: calc(var(--nav-h) + var(--sp-4));
      right: var(--sp-4);
      width: 36px;
      height: 36px;
      font-size: 15px;
    }
  }

  .hero__mute:hover {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(5, 17, 27, .68);
  }

  /* 键盘可达：聚焦时给出明显 outline */
  .hero__mute:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__mute {
      transition: none;
      transform: none;
    }
  }

  /* 缓慢推近：替代 V3 的 heroDrift，幅度收敛到 4%，避免眩晕 */
  @keyframes hero-drift {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to { transform: scale(1.11) translate3d(-1.2%, -1%, 0); }
  }

  /* 遮罩：左深右浅，文字落在深区；底部另加一层确保与页脚过渡自然 */
  .hero__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,
        rgba(5, 17, 27, .80) 0%,
        rgba(5, 17, 27, .62) 34%,
        rgba(5, 17, 27, .26) 66%,
        rgba(5, 17, 27, .12) 100%),
      linear-gradient(0deg,
        rgba(5, 17, 27, .78) 0%,
        rgba(5, 17, 27, 0) 46%);
    z-index: 0;
  }

  /* 兜底：图片加载失败或尚未加载时，遮罩自身已构成可读深色底 */
  .hero__media .ph {
    width: 100%;
    height: 100%;
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--sp-6);
    width: var(--shell);
    margin-inline: auto;
  }

  @media (min-width: 1024px) {
    .hero__inner {
      /* 坐标铭牌已移出为 .hero 直接子元素，此处回归单列 */
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-12);
      /* 大屏收窄两侧留白：固定每侧 120px，替代 --shell 的 1440px 上限 */
      width: calc(100% - 240px);
    }
  }

  .hero__body {
    display: grid;
    gap: var(--sp-5);
    max-width: 62ch;
  }

  .hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
  }

  .hero__eyebrow::after {
    content: "";
    flex: 1;
    min-width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, .18);
  }

  /* 主标语：两行结构，第二行以黄色描边字收束，形成品牌记忆点 */
  .hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.025em;
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  }

  .hero__title-line { display: block; }

  .hero__title-accent {
    display: inline-block;
    color: transparent;
    /* 镂空描边字：工业标识牌质感；不支持 -webkit-text-stroke 时回落实心黄 */
    -webkit-text-stroke: 1.4px var(--accent-500);
    paint-order: stroke fill;
  }

  @supports not (-webkit-text-stroke: 1px black) {
    .hero__title-accent {
      color: var(--accent-500);
      -webkit-text-stroke: initial;
    }
  }

  .hero__claim {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--accent-500);
    letter-spacing: .01em;
  }

  .hero__lead {
    margin: 0;
    max-width: 46ch;
    font-size: var(--fs-md);
    line-height: 1.95;
    color: rgba(255, 255, 255, .74);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
  }

  /* --------------------------------------------------------------------------
   * 1.1 Hero 侧栏：坐标铭牌 + 定位标签
   * ------------------------------------------------------------------------*/
  .hero__aside {
    display: none;
    /* 绝对定位钉在首屏右下角，right 与首屏内容 120px 侧边距对齐 */
    position: absolute;
    right: 120px;
    bottom: var(--sp-12);
    z-index: 1;
    grid-template-columns: auto auto;
    gap: var(--sp-6);
    align-items: start;
  }

  @media (min-width: 1280px) {
    .hero__aside { display: grid; }
  }

  .hero__plate {
    display: grid;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .4);
    white-space: nowrap;
  }

  .hero__plate strong {
    color: var(--accent-500);
    font-size: var(--fs-md);
    letter-spacing: .04em;
  }

  /* 滚动提示：V3 的 scrollPulse 保留，但改为可点击的锚点 */
  .hero__scroll {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    color: rgba(255, 255, 255, .45);
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    writing-mode: vertical-rl;
  }

  .hero__scroll:hover { color: var(--accent-500); }

  .hero__scroll::after {
    content: "";
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, currentColor, transparent);
    animation: scroll-pulse 2.2s var(--ease-in-out) infinite;
  }

  @keyframes scroll-pulse {
    0%, 100% { transform: scaleY(.35); opacity: .4; transform-origin: top; }
    50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  }

  /* ==========================================================================
   * 2. 关于304am永利集团（About）
   * ----------------------------------------------------------------------------
   * V3 现状：左图右文的常规双栏，信息密度低，"依托高校""应用领域"被压成
   *          一行小字，最有说服力的资产反而最不起眼。
   * V4 处理：文案 + 两组硬支撑（高校依托 / 应用领域）并置，图片退居辅助位，
   *          让"谁能证明我们行"成为主体。
   * =========================================================================*/
  .about {
    background: var(--surface);
    /* 紧凑化：改用小型区块留白，避免整节高度超出桌面一屏可视区 */
    padding-block: var(--section-y-sm);
  }

  .about__grid {
    display: grid;
    gap: clamp(var(--sp-6), 3vw, var(--sp-10));
    align-items: start;
  }

  @media (min-width: 1024px) {
    .about__grid {
      /* 企业配图为 1920×700 超宽比例，配图列放宽、文案列相应收窄 */
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    }
  }

  .about__copy {
    display: grid;
    gap: var(--sp-4);
  }

  .about__title {
    margin: 0;
    font-size: var(--fs-2xl);
    max-width: 16ch;
  }

  .about__text {
    max-width: 62ch;
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: 1.95;
  }

  /* 企业信条：以引号装饰，作为文案与支撑数据之间的过渡（紧凑内边距控制区块总高） */
  .about__motto {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5);
    background: var(--paper-2);
    border-left: 3px solid var(--accent-500);
  }

  .about__motto-main {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: .01em;
  }

  .about__motto-sub {
    font-size: var(--fs-sm);
    color: var(--text-3);
    letter-spacing: .1em;
  }

  /* 高校依托：三所学校以等分铭牌呈现，比混在段落里更易被读到 */
  .about__partners {
    display: grid;
    gap: var(--sp-2);
  }

  @media (min-width: 520px) {
    .about__partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .about__partner {
    display: grid;
    gap: 2px;
    padding: var(--sp-3);
    background: var(--paper-2);
    border: 1px solid var(--line);
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }

  .about__partner:hover {
    background: var(--brand-50);
    border-color: var(--brand-200);
  }

  .about__partner-name {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-1);
  }

  .about__partner-role {
    font-size: 11px;
    color: var(--text-3);
  }

  /* 应用领域：图标 + 文字的四联条（间距由 .about__copy 的 gap 统一控制） */
  .about__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }

  @media (min-width: 768px) {
    .about__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .about__field {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-2);
    transition: color var(--dur-fast) var(--ease-out);
  }

  .about__field:hover { color: var(--brand-500); }

  .about__field .icon {
    font-size: 20px;
    color: var(--brand-500);
  }

  /* 更多介绍：位于信条上方，行间距由 .about__copy 的 gap 控制，无需额外 margin */
  .about__more {
    display: flex;
    justify-content: flex-end;
  }

  /* 配图列：真实摄影 + 图注，图注明确写出拍摄对象，避免"素材感" */
  .about__media {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
    position: relative;
  }

  @media (min-width: 1024px) {
    .about__media { position: sticky; top: var(--scroll-offset); }
  }

  .about__figure {
    margin: 0;
    overflow: hidden;
  }

  .about__figure img {
    /* 拉高区块：原图 2.74:1，显示框收紧为 16/9；
       文字水印位于画面左侧约 0–46% 区域，锁定左缘锚点只裁右侧多余场景，保证文字完整 */
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: left center;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .about__figure:hover img { transform: scale(1.04); }

  .about__caption {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: .02em;
  }

  .about__caption::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--accent-500);
    flex: none;
  }

  /* ==========================================================================
   * 4. 使命宣言（Mission）
   * ----------------------------------------------------------------------------
   * 全幅深色断点，用于在长页面中段重建节奏，避免"白-白-白"的疲劳。
   * =========================================================================*/
  .mission {
    position: relative;
    padding-block: clamp(var(--sp-16), 7vw, var(--sp-32));
    background: var(--ink-900);
    color: var(--text-invert);
    overflow: hidden;
  }

  /* 巨型水印字：编辑式排版母题，取自 V3 的视觉习惯 */
  .mission::before {
    content: "ZEALHAWK";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(6rem, 22vw, 20rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: rgba(255, 255, 255, .028);
    white-space: nowrap;
    pointer-events: none;
  }

  .mission__inner {
    position: relative;
    display: grid;
    gap: var(--sp-8);
    width: var(--shell);
    margin-inline: auto;
  }

  @media (min-width: 1024px) {
    .mission__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      align-items: center;
    }
  }

  .mission__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
  }

  .mission__title em {
    font-style: normal;
    color: var(--accent-500);
  }

  .mission__text {
    color: rgba(255, 255, 255, .62);
    font-size: var(--fs-md);
    line-height: 1.95;
    max-width: 52ch;
  }

  /* 文化四模块：责任 / 合作 / 学习创新 / 幸福 */
  .mission__culture {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: var(--sp-8);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
  }

  @media (min-width: 768px) {
    .mission__culture { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .mission__culture-item {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-5);
    background: var(--ink-900);
    transition: background-color var(--dur-base) var(--ease-out);
  }

  .mission__culture-item:hover { background: var(--ink-700); }

  .mission__culture-name {
    font-size: var(--fs-md);
    font-weight: 700;
    color: #fff;
  }

  .mission__culture-keys {
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
    letter-spacing: .04em;
  }

  /* ==========================================================================
   * 5. 转化收尾（CTA Section）
   * =========================================================================*/
  .cta-band {
    position: relative;
    padding-block: var(--section-y);
    background: var(--section-convert-bg);
    color: var(--section-convert-text);
    overflow: hidden;
  }

  /* 斜向条纹：黄色大面积易显廉价，加同色系暗纹提升质感 */
  .cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      115deg,
      rgba(5, 17, 27, .045) 0 2px,
      transparent 2px 18px
    );
    pointer-events: none;
  }

  .cta-band__inner {
    position: relative;
    display: grid;
    gap: var(--sp-6);
    width: var(--shell);
    margin-inline: auto;
  }

  @media (min-width: 900px) {
    .cta-band__inner {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--sp-12);
    }
  }

  .cta-band__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
  }

  .cta-band__text {
    margin: var(--sp-3) 0 0;
    max-width: 48ch;
    font-size: var(--fs-base);
    color: rgba(5, 17, 27, .72);
  }

  .cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  /* 黄底上的按钮需反色，避免与背景同化 */
  .cta-band .btn--cta {
    --btn-bg: var(--ink-900);
    --btn-fg: var(--accent-500);
    --btn-bd: var(--ink-900);
  }

  .cta-band .btn--cta:hover {
    --btn-bg: var(--ink-700);
    --btn-bd: var(--ink-700);
    color: var(--accent-500);
  }

  .cta-band .btn--ghost {
    --btn-fg: var(--ink-900);
    --btn-bd: rgba(5, 17, 27, .3);
  }

  .cta-band .btn--ghost:hover {
    --btn-bg: var(--ink-900);
    --btn-fg: var(--accent-500);
    --btn-bd: var(--ink-900);
    color: var(--accent-500);
  }

  /* ==========================================================================
   * 6. 模块编号系统
   * ----------------------------------------------------------------------------
   * 首页每个区块左上角标注 M01–M12，沿用工程图纸的图号习惯，
   * 同时方便与设计/开发对接时精确指代区块。编号由 HTML 的 data-module
   * 提供，CSS 生成，改序号不需动文案。
   * =========================================================================*/
  .section[data-module]::after {
    content: attr(data-module);
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--slate-200);
    pointer-events: none;
  }

  /* 深色区块内的编号需换色 */
  .section--dark[data-module]::after,
  .mission[data-module]::after,
  .stats[data-module]::after {
    color: rgba(255, 255, 255, .16);
  }

  @media (max-width: 767px) {
    .section[data-module]::after { display: none; }
  }

  /* ==========================================================================
   * 7. 区块背景修饰类
   * ----------------------------------------------------------------------------
   * 为各区块提供语义化背景色，按内容主题分配：
   * --bg-tech:    科技蓝（选型器、技术优势）
   * --bg-engine:  工程黄（流程、案例）
   * --bg-people:  暖白（新闻、招贤纳士）
   * =========================================================================*/
  .bg-tech {
    background: var(--section-tech-bg);
  }

  .bg-tech .section-head__title {
    color: var(--section-tech-text);
  }

  .bg-tech .eyebrow {
    color: var(--section-tech-accent);
  }

  .bg-tech .eyebrow::before {
    background: var(--section-tech-accent);
  }

  .bg-engine {
    background: var(--section-engine-bg);
  }

  .bg-engine .section-head__title {
    color: var(--section-engine-text);
  }

  .bg-engine .eyebrow {
    color: var(--section-engine-accent);
  }

  .bg-engine .eyebrow::before {
    background: var(--section-engine-accent);
  }

  .bg-people {
    background: var(--section-people-bg);
  }
}