/* =========================================================
   StarDance Global — 首页首屏 v6（2026-10-12，**当前基准**；v5 的橘调版已作废）
   1) 主视觉 = Pexels 实拍「创作者用手机稳定器拍摄」，水平镜像后人物位于画面右侧，
      左侧留给标题与按钮；不再叠加手机样机或任何装饰小卡/标签。
      图片处理脚本 .workbuddy/make-hero-pexels.py，输出 hero-pexels(-w/-m).jpg 三档。
   2) **底图按原图色调输出**：不再加暖色偏移 / 色相推移（v5 那版因此浮出一层橘，
      显得糊且不高级，用户明确否掉）。只保留极轻的暗部抬起 + 温和对比 + 轻度锐化。
      实测：整图平均亮度 L 由 0.295 降到 0.220（原图 0.181），色温 R−B 由 +0.043
      回到 −0.011，与原图一致。
   3) **背景上没有任何白色雾化层**——照片原样通铺。文字是「照片上的白色层级」
      （背景偏暗，深炭灰只有 2.5:1，不可行），靠贴着字形的投影保底。
   4) 配色只留 logo 的红 / 白 / 灰：主按钮纯品牌红（去掉珊瑚橘渐变），
      次按钮极浅灰白 + 深灰字；品牌红关键词外加一圈白色柔光以在暗底上立住。
   5) 「让合作从一次交流开始」联系区与首屏同处一个 section，共用同一张背景；
      文案、按钮、页脚未动。底部保留一层中性深色渐变（照片左下方有强高光）。
   6) 已去掉：标题上方的圆形徽章外框、按钮下方三个圆形标签外框（仅保留文字）。
   7) **2026-10-14 首屏改为 3 张照片轮播**：只轮播背景照片，文案层（.hero2__copy / .hero2__closing）
      一个字没动、位置也没动——控件（.hero2__ui）全部绝对定位，不占文档流。
      尺寸只在 .hero2 上用 --hero-pt / --hero-band 定义一次，文案区与控件层共用，避免两处手动对齐。
      脚本：.workbuddy/make-hero-slides.py（第 2、3 张图的裁切）。
   仅作用于 .hero2 与首页结尾区，不改动其余页面。
   ========================================================= */

/* 配色只保留 logo 上的三原色：**红 / 白 / 灰**。
   历史教训：曾用珊瑚橘 #FF7A64 / 暖橙 #FFA85C / 蓝紫 #8B87E8 做渐变与圆点，
   加上底图的暖色偏移，整个画面浮出一层橘，显得糊且不高级 —— 全部移除。
   变量放根级：首屏与联系区是嵌套/兄弟关系，必须共同可见。 */
:root{
  --warm-0:#FCF5F0;              /* 保留：其它页面 / 回退时使用 */
  --hero-ink:#FFFFFF;            /* 照片上的主文字 */
  --hero-ink-soft:rgba(255,255,255,.90);
  --hero-ink-dim:rgba(255,255,255,.82);
}

/* 文字在照片上的统一投影：三层叠加，全部只贴着字形，绝不铺面。
   ① 紧贴的硬投影（2px）→ 负责「字形边缘立刻变暗」，是清晰度的关键；
   ② 中等范围（10px）→ 压住字形外一圈的斑驳高光；
   ③ 大范围（30px）→ 提供整体分离感。
   之所以靠投影而不是蒙层：任何铺满画面的层都会牺牲照片质感。 */
.hero2__copy,
.hero2__closing{
  --onphoto:
    0 1px 2px rgba(0,0,0,.70),
    0 2px 10px rgba(0,0,0,.48),
    0 12px 30px rgba(0,0,0,.30);
}

.hero2{
  position:relative;isolation:isolate;overflow:hidden;
  background:#1E2126;            /* 照片加载前的兜底色（暗调，避免闪白） */
  /* 首屏「文字带」的两个尺寸，只在这里定义一次：
     --hero-pt = 区块上内边距；--hero-band = 文案区（也就是轮播控件对齐的那条带）的高度。
     轮播控件层按这两个值绝对定位，因此控件永远不可能推动文案。 */
  --hero-pt:clamp(30px,4vw,58px);
  --hero-band:clamp(350px,42vh,460px);
  padding:var(--hero-pt) 0 0;   /* 底部间距交给联系区 */
}

/* ---------- 通铺全幅的轮播照片层（不再有任何覆盖层） ----------
   轨道横向排列 N 张 100% 宽的幻灯片，靠 translateX 切换；
   超出部分由 .hero2 的 overflow:hidden 裁掉，不产生横向滚动。 */
.hero2__media{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden}
.hero2__track{
  display:flex;height:100%;
  transform:translateX(calc(var(--hero-i,0) * -100%));
  transition:transform .72s cubic-bezier(.42,.01,.28,1);
}
.hero2__slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.hero2__slide picture{display:block;height:100%}
.hero2__slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* 底图通铺到更高更宽的版面时，取景略偏上：保住人物与天空/景深的关系 */
  object-position:50% 42%;
}
/* 每张照片单独校一次取景（人物 / 监视器不要被裁掉） */
.hero2__slide--1 img{object-position:50% 48%}
.hero2__slide--2 img{object-position:50% 54%}

/* 第 1 张（泳池）：以明亮、通透为主。只在「左侧文字区」铺一层很轻的暗渐变托住白字，
   向画面中部（约 66%）自然淡出，右侧完全不压暗 —— 照片原本的蓝天、水池与色彩全部透出来，
   不使用整幅/左右贯通的暗罩，也不做任何降饱和或模糊。
   第 2 张（棚内）维持原左侧渐隐（白字区可读性已验证）；第 3 张（户外单人）零覆盖层。
   都只在 ≥641px 生效：手机端由 .hero2__copy 自带暗面板负责，再叠一层会发闷。 */
.hero2__slide--1::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(15,17,21,.30) 0%,
    rgba(15,17,21,.22) 22%,
    rgba(15,17,21,.12) 42%,
    rgba(15,17,21,.04) 58%,
    rgba(15,17,21,0) 66%);
}
.hero2__slide--2::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(15,17,21,.42) 0%,
    rgba(15,17,21,.37) 24%,
    rgba(15,17,21,.27) 42%,
    rgba(15,17,21,.15) 58%,
    rgba(15,17,21,.04) 74%,
    rgba(15,17,21,0) 88%);
}

/* ---------- 文案区：照片上的白色层级 ---------- */
.hero2__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;
  min-height:var(--hero-band);
}
.hero2__copy{max-width:660px}

/* ---------- 轮播控件：左右箭头 + 底部圆点 ----------
   .hero2__ui 铺满文案区（inset:0），控件全部绝对定位，不参与任何版面计算。
   .hero2__bar 用 50vw - 50% 把左右两个箭头推到视口的左右边缘（两侧箭头等宽，
   space-between 自然把圆点居中），所以箭头永远不会压到左侧的标题文字。 */
.hero2__ui{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero2__bar{
  position:absolute;bottom:16px;
  left:calc(20px - (50vw - 50%));
  right:calc(20px - (50vw - 50%));
  display:flex;align-items:center;justify-content:space-between;
}
.hero2__arrow{
  flex:0 0 auto;width:46px;height:46px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  pointer-events:auto;
  color:#fff;background:rgba(20,22,26,.34);
  border:1px solid rgba(255,255,255,.44);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.7);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.hero2__arrow svg{width:20px;height:20px;display:block}
.hero2__arrow:hover{background:rgba(20,22,26,.62);border-color:rgba(255,255,255,.78);transform:scale(1.04)}
.hero2__arrow:active{transform:scale(.96)}
.hero2__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 2026-10-14：圆点从「.hero2__bar 里的水平居中项」→「整幅首屏照片（.hero2）最下沿的
   绝对定位胶囊」。水平居中、完全不占版面、不会推动任何文字。
   锚点是 .hero2（position:relative，照片层 .hero2__media 为 inset:0 通铺整段含联系区），
   所以这里的 bottom 就是「距整幅首屏照片底边」的距离——圆点永远贴在照片最下沿，
   而非画面正中或栅格带中间（用户反馈：原 -66px 落在照片下三分之一仍偏中，要再往下压）。
   桌面留 22px；平板/手机只留 10px，因为联系区底部内边距仅约 44px，留多了会顶到联系区按钮。 */
.hero2__dots{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:6;display:flex;align-items:center;gap:10px;
  padding:8px 13px;border-radius:999px;
  pointer-events:auto;
  background:rgba(20,22,26,.30);
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.hero2__dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.85);
  transition:background .18s ease,transform .18s ease;
}
.hero2__dot:hover{background:rgba(255,255,255,.82)}
.hero2__dot.is-active{background:#fff;transform:scale(1.22)}
.hero2__dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

.hero2__title{
  margin:0;font-weight:600;color:var(--hero-ink);letter-spacing:-.02em;
  font-size:clamp(1.85rem,3.1vw,2.5rem);line-height:1.26;
  text-shadow:var(--onphoto);
}
.hero2__title>span{display:block}
/* 品牌红关键词：纯色，无光晕 / 无描边 / 无投影。
   ⚠️ text-shadow 是可继承属性——这里必须显式 none，否则会继承 .hero2__title 的 --onphoto 投影 */
.hero2__title em{font-style:normal;color:var(--red);text-shadow:none}
html[lang="en"] .hero2__title{font-size:clamp(1.55rem,2.7vw,2.25rem);letter-spacing:-.025em}
.hero2__sub{
  margin:20px 0 0;font-size:1.06rem;line-height:1.75;
  color:var(--hero-ink-soft);max-width:30em;
  text-shadow:var(--onphoto);
}
/* 英文副标题排成一行（与中文页一致）：30em 约 509px，比这句话的自然宽度（526px）窄一点，
   会把 "...Australia and / China." 折到第二行。放开长度限制后由列宽决定，
   桌面端一行排下；列宽不足时（≤640px 等）仍自然折行，不会溢出。 */
html[lang="en"] .hero2__sub{max-width:none}
/* 副标题收紧成一行后，标题 / 副标题 / 按钮的组内间距沿用同一套值
   （20px + 30px），与中文首页的节奏完全一致；按钮位置由网格居中自动重算，
   不需要额外补偿。 */
.hero2 .btn-row{margin-top:30px;gap:12px}

/* 按钮：圆角胶囊。主按钮 = 纯品牌红（不再掺珊瑚橘，红色更沉稳）；
   次按钮 = 极浅灰白 + 深灰字（取 logo 里的白 + 灰，避免与红撞色） */
.btn--pill{border-radius:999px;padding:14px 28px;font-size:.99rem}
.btn--sunset{
  background:linear-gradient(100deg,#F30909 0%,var(--red) 52%,#D90707 100%);
  color:#fff;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 28px -18px rgba(46,8,8,.65);
  transition:box-shadow .18s ease,filter .18s ease,transform .18s ease;
}
.btn--sunset:hover{
  color:#fff;filter:saturate(1.04) brightness(1.04);
  box-shadow:0 18px 34px -18px rgba(46,8,8,.7);
  transform:translateY(-1px);
}
.btn--soft{
  background:rgba(248,247,245,.94);color:var(--ink);
  border:1px solid rgba(210,208,204,.9);
  box-shadow:0 12px 26px -20px rgba(46,32,60,.55);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.btn--soft:hover{background:#fff;border-color:#C9C7C2;color:var(--ink);transform:translateY(-1px)}

.hero2__copy>*{animation:hc-rise .7s cubic-bezier(.22,.61,.36,1) both}
.hero2__copy>*:nth-child(2){animation-delay:.05s}
.hero2__copy>*:nth-child(3){animation-delay:.1s}
.hero2__copy>*:nth-child(4){animation-delay:.15s}
.hero2__copy>*:nth-child(5){animation-delay:.2s}

/* ---------- 联系区：与首屏同一张背景，文案与按钮样式不变 ---------- */
.hero2__closing{
  position:relative;z-index:2;
  padding:clamp(58px,7.4vw,110px) 0 clamp(44px,5vw,66px);
}
/* 底部「暗调过渡」：照片左下方有一片强高光，白字压上去会消失。
   这里用一层从底部升起的深色渐变把这一段压暗（只在底部，首屏标题区没有任何覆盖层），
   压暗后照片纹理仍在，同时自然过渡到下方深色页脚。 */
.hero2__closing::before{
  content:"";position:absolute;left:0;right:0;top:-46px;bottom:0;
  z-index:-1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(20,21,24,.82) 0%,
    rgba(20,21,24,.79) 12%,
    rgba(20,21,24,.68) 34%,
    rgba(20,21,24,.48) 54%,
    rgba(20,21,24,.26) 74%,
    rgba(20,21,24,.08) 90%,
    rgba(20,21,24,0) 100%);
}
.closing--v2{
  border-radius:0;
  background:transparent;        /* 不再另铺底色，直接坐在主画面上 */
  /* padding 由上面的 .hero2__closing 提供，这里不要写 0，否则会把它覆盖掉 */
}
.closing--v2 h2{color:var(--hero-ink);text-shadow:var(--onphoto)}
/* 同上面标题关键词：纯品牌红，text-shadow:none 显式关掉继承来的投影 */
.closing--v2 h2 em{font-style:normal;color:var(--red);text-shadow:none}
.closing--v2 p{color:var(--hero-ink-soft);text-shadow:var(--onphoto)}
.closing--v2 .btn{
  background:linear-gradient(100deg,#F30909 0%,var(--red) 52%,#D90707 100%);
  color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:14px 30px;
  box-shadow:0 14px 28px -18px rgba(46,8,8,.65);
}
.closing--v2 .btn:hover{color:#fff;filter:saturate(1.04) brightness(1.04);box-shadow:0 18px 34px -18px rgba(46,8,8,.7)}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .hero2{--hero-band:clamp(320px,40vh,420px)}
  .hero2__grid{grid-template-columns:minmax(0,1fr)}
  .hero2__slide--1 img{object-position:50% 48%}
  .hero2__slide--2 img{object-position:50% 50%}
  .hero2__slide--3 img{object-position:50% 44%}
  .hero2__title{font-size:clamp(1.7rem,4.2vw,2.25rem)}
  html[lang="en"] .hero2__title{font-size:clamp(1.5rem,3.8vw,2.1rem)}
  .hero2__sub{font-size:1.02rem}
  /* 平板：泳池（第 1 张）同样只压左侧文字区、向中部淡出，右侧保持明亮通透；
     棚内（第 2 张）维持原渐隐（白字区可读性已验证）。 */
  .hero2__slide--1::after{
    background:linear-gradient(90deg,
      rgba(15,17,21,.32) 0%,
      rgba(15,17,21,.22) 26%,
      rgba(15,17,21,.11) 46%,
      rgba(15,17,21,.03) 60%,
      rgba(15,17,21,0) 68%);
  }
  .hero2__slide--2::after{
    background:linear-gradient(96deg,
      rgba(15,17,21,.45) 0%,
      rgba(15,17,21,.39) 30%,
      rgba(15,17,21,.31) 55%,
      rgba(15,17,21,.20) 76%,
      rgba(15,17,21,.10) 92%,
      rgba(15,17,21,.03) 100%);
  }
  /* 平板（641–1000）：联系区底部内边距只有 ≈44px，圆点（27px）只留 10px，
     贴着照片最下沿、又不顶到联系区按钮/文字。 */
  .hero2__dots{bottom:10px}
}
@media (max-width:640px){
  .hero2{--hero-pt:22px}
  /* 手机：不再盖白色雾面板，改用一层很薄的暗调渐变托住文字，
     照片纹理仍然透得出来，同时与下方深色页脚接得上 */
  .hero2__copy{
    max-width:none;
    margin:0 -14px;padding:16px 14px 18px;border-radius:16px;
    background:linear-gradient(103deg,
      rgba(13,15,19,.60) 0%,
      rgba(13,15,19,.46) 46%,
      rgba(13,15,19,.26) 74%,
      rgba(13,15,19,0) 100%);
  }
  /* 手机端三张都是专门的竖构图，取景回到正中间 */
  .hero2__slide--1 img,.hero2__slide--2 img,.hero2__slide--3 img{object-position:50% 50%}
  /* 手机端文案面板已自带暗色渐变，第 2/3 张不再叠左侧渐隐 */
  .hero2__slide--1::after,
  .hero2__slide--2::after{background:none}
  /* 控件整条移到文案带下方那道留白里（联系区上内边距），
     这样既不会压到文案面板，也仍然贴在首屏照片的底部。
     ⚠️ 这是纯位移，不改变任何文字的排版位置。 */
  .hero2__bar{bottom:-38px;left:calc(16px - (50vw - 50%));right:calc(16px - (50vw - 50%))}
  .hero2__arrow{width:36px;height:36px}
  .hero2__arrow svg{width:16px;height:16px}
  /* 手机：圆点同样贴在照片最下沿（距底边 10px），与桌面/平板一致。 */
  .hero2__dots{padding:6px 10px;gap:8px;bottom:10px}
  .hero2__dot{width:8px;height:8px}
  .hero2__title{font-size:clamp(1.45rem,6.2vw,1.95rem);line-height:1.3}
  html[lang="en"] .hero2__title{font-size:clamp(1.3rem,5.2vw,1.85rem);line-height:1.3}
  .hero2__sub{font-size:.9rem;margin-top:16px;text-wrap:pretty}
  .hero2__closing{padding-top:clamp(48px,13vw,72px)}
}