/* ══════════════════════════════════════════════════════════════
   现网结构覆盖层
   
   ⚠ 这个文件必须在 app.css **之后**加载。
   app.css 是从 demo 的 <style> 整块搬来的，里面 .hero / .hero__media
   等规则和这里同名同优先级 —— 写在 style.css 里会被 app.css 覆盖掉
   （实测：hero 文字面板压住了视频，只剩左右两条边）。
   加载顺序见 functions.php 的 hm_assets()。
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Hero 结构对齐现网
   现网是「视频全幅铺满 → 文字在下方的浅色带里」，不是文字压视频上。
   压在视频上时，明亮的实拍画面配深色标题必然读不清 —— 实测遮罩
   rgba(250,249,247,.5) 完全压不住户外白天的画面。
   ══════════════════════════════════════════════════════════════ */
.hero{ padding:0; min-height:0; display:block; text-align:left }
.hero__media{
  position:relative; inset:auto; width:100%;
  height:clamp(320px, 52vh, 620px); overflow:hidden;
}
.hero__media video,
.hero__media img{ width:100%; height:100%; object-fit:cover; display:block }
/* 视频上不再压文字，遮罩只留极淡一层统一色调 */
.hero__veil{
  position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to bottom, transparent, rgba(244,248,244,.55));
  pointer-events:none;
}
.hero__in{
  position:relative; z-index:2;
  background:var(--brand-tint);
  padding:var(--s20) var(--s6) var(--s10);
  text-align:center; max-width:var(--maxw); margin:0 auto;
}
.hero__in .display{ color:var(--ink) }
.hero__sub{ color:var(--muted); font-size:18px; margin:var(--s4) auto 0; max-width:56ch }
.hero__cta{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; margin-top:var(--s8) }
@media(max-width:640px){
  .hero__media{ height:clamp(240px, 38vh, 360px) }
  .hero__in{ padding:var(--s10) var(--s5) var(--s8) }
}

/* ══════════════════════════════════════════════════════════════
   滚动进场改为渐进增强
   
   app.css 里 .reveal 默认 opacity:0，靠 JS 加 .in 才显示。
   问题是 JS 一旦没跑起来（脚本被拦、网络抖动、插件干扰、CSP 变化），
   整页内容就**永久隐形** —— 用户看到的是"图和文字都没了"，
   而排查时 HTML 里明明什么都在，极难定位。
   
   改成：默认可见；只有 JS 确认运行（给 <html> 加 hm-js）之后
   才启用隐藏+进场动画。JS 挂了最多是没动画，内容一定看得见。
   ══════════════════════════════════════════════════════════════ */
.reveal{ opacity:1; transform:none }

html.hm-js .reveal{
  opacity:0; transform:translateY(16px);
}
html.hm-js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
@media(prefers-reduced-motion:reduce){
  html.hm-js .reveal{ opacity:1; transform:none }
}
