/* PinkyDolly V2 · pd-v2-hero-video (T4)
 * 从 handover/v2/pages/home/styles.css 的 A HERO 部分抽出,参数已实测。
 * 不要修改数值 —— 见 pd-v2-brief.md §6.3 / handover/v2/docs/SPEC.md §1.1
 */

/* ⚠️ 这里不能写 min-height —— 写了会强制高度,aspect-ratio 反推出比父容器更宽的宽度,
   溢出被 overflow:hidden 就地裁掉,页面级 scrollWidth 查不到。宽度写死才是由宽算高。
   (LESSONS L13 / brief §9.1,同一条坑这个项目已经踩过一次) */
.hero{position:relative;width:100%;aspect-ratio:1920/818;min-height:0;margin-top:var(--navh);
  display:grid;align-items:end;overflow:hidden;background:#0E0810}

/* 轮播轨道:每张绝对定位叠放,进场从右、出场向左;最后一张回第一张也是向前滑,不会倒着扫回去 */
.hero__track{position:absolute;inset:0;overflow:hidden}
.hs{position:absolute;inset:0;transform:translateX(100%);visibility:hidden}
.hs.is-on,.hs.is-out{visibility:visible}
.hs.is-on{transform:none}
.hs.anim{transition:transform .9s var(--e)}
.hs img,.hs video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs picture{position:absolute;inset:0}
/* E6 (SPEC-cart-voices-twoways-mobile.md): dedicated 9:16 mobile hero art,
   placeholder until Yimei supplies the asset — empty setting means this
   never renders and mobile keeps the desktop video/image crop, unchanged. */
.hs__mobimg{display:none}
@media (max-width:860px){
  .hs:has(.hs__mobimg)>video,.hs:has(.hs__mobimg)>picture{display:none}
  .hs__mobimg{display:block}
}
@media (prefers-reduced-motion:reduce){
  .hs{transform:none;opacity:0}.hs.is-on{opacity:1}.hs.anim{transition:opacity .4s linear}
}

/* 声音:只有图标,无边框无底色 —— 不抢画面,但看得见。点击区仍有 40px */
.hero__snd{position:absolute;z-index:5;right:clamp(12px,3.4vw,48px);bottom:clamp(8px,2%,18px);
  width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;background:none;
  color:#FFF7F1;opacity:.62;cursor:pointer;transition:opacity .25s}
.hero__snd svg{width:20px;height:20px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.hero__snd .spk{fill:currentColor;stroke:none}
.hero__snd .on{display:none}
.hero__snd[aria-pressed="true"] .on{display:block}
.hero__snd[aria-pressed="true"] .off{display:none}
.hero__snd[aria-pressed="true"]{opacity:.9}
@media (hover:hover) and (pointer:fine){.hero__snd:hover{opacity:1}}
.hero__snd:active svg{transform:scale(.9)}
.hero__snd:focus-visible{opacity:1;outline:2px solid #FFF7F1;outline-offset:0;border-radius:50%}
/* 隐藏态放在最后,并用 visibility —— opacity 会被「已开声 / hover / focus」的规则覆盖,
   visibility:hidden 不会,而且同时移出 Tab 顺序(LESSONS L15,这个项目也踩过一次同款坑,
   见 pd-v2-base.css 里 .side__go 那条) */
.hero .hero__snd[hidden]{display:grid;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .25s,visibility 0s .25s}

/* 状态点:当前那颗实心白,其余半透明;没有暂停按钮——Yimei 的决定,见 SPEC §1.1 */
.hero__nav{position:absolute;z-index:5;left:50%;bottom:clamp(14px,2.4%,24px);translate:-50% 0}
.hero__dots{display:flex;align-items:center;gap:2px}
.hero__dot{width:26px;height:26px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer}
.hero__dot i{display:block;width:9px;height:9px;border-radius:50%;
  background:rgba(255,247,241,.38);box-shadow:0 0 0 1px rgba(14,8,16,.25);
  transition:background .25s,transform .25s var(--e)}
@media (hover:hover) and (pointer:fine){.hero__dot:hover i{background:rgba(255,247,241,.7);transform:scale(1.15)}}
.hero__dot[aria-current="true"] i{background:#FFF7F1}
.hero__dot:active i{transform:scale(.85)}
.hero__dot:focus-visible{outline:2px solid #FFF7F1;outline-offset:-2px;border-radius:50%}

.hs__grade{position:absolute;inset:0;pointer-events:none;
  backdrop-filter:saturate(.9) brightness(.9);-webkit-backdrop-filter:saturate(.9) brightness(.9)}
.hero__vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 96% at 50% 46%,transparent 26%,rgba(12,5,12,.5) 100%)}
/* 压暗跟着每张自己的文案位置走(right/left/bottom/none),不是固定的 */
.hs__scrim{position:absolute;inset:0;pointer-events:none}
.hs__scrim--right{background:linear-gradient(264deg,rgba(12,5,12,.9) 0%,rgba(12,5,12,.62) 36%,transparent 74%)}
.hs__scrim--left{background:linear-gradient(96deg,rgba(12,5,12,.9) 0%,rgba(12,5,12,.62) 36%,transparent 74%)}
.hs__scrim--bottom{background:linear-gradient(0deg,rgba(12,5,12,.9) 0%,rgba(12,5,12,.55) 38%,transparent 72%)}

.hero__copy{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero__in{position:absolute;z-index:4;left:0;right:0;bottom:0;
  padding:0 clamp(20px,4vw,56px);padding-bottom:max(52px,7.5%);
  display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.hero .cap{color:var(--main2);display:block;margin-bottom:14px}
/* 第一张标题单行不换行,字号随视口缩放(weight 900→700 / tracking -.032em→-.025em,
   在 level-1 大字号和 tracking 区间上,logo 是唯一的 900 例外 — SPEC §0.1) */
.hero__h{font-family:var(--disp);font-variation-settings:var(--fr-display);font-weight:650;
  font-size:clamp(19px,5.1vw,62px);letter-spacing:-.025em;line-height:1.05;
  white-space:nowrap;color:#FFF7F1}
.hero__p{margin-top:16px;color:rgba(255,247,241,.86);
  font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(13px,1.55vw,21px);line-height:1.45;letter-spacing:.02em}
.hero__cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* 对齐:right(默认)/ left / center —— 每张自己的 align 决定 */
.hc--left{align-items:flex-start;text-align:left}.hc--left .hero__cta{justify-content:flex-start}
.hc--center{align-items:center;text-align:center}.hc--center .hero__cta{justify-content:center}
/* 非第一张的标题:允许换行,限宽 */
.hero__h--wrap{white-space:normal;max-width:min(15ch,100%);font-size:clamp(30px,5.1vw,62px)}
.hc--center .hero__h--wrap{max-width:min(20ch,100%)}
.hero__p--wrap{max-width:min(46ch,100%)}
/* 文案淡入淡出,不跟着素材滑:出场快,进场等素材滑到一半再出现 */
.hc{opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--e-out),transform .35s var(--e-out),visibility 0s .35s}
.hc.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .6s var(--e-out) .35s,transform .6s var(--e-out) .35s,visibility 0s}
@media (prefers-reduced-motion:reduce){.hc,.hc.is-on{transform:none}}

/* 首屏永远是深色画面 —— 次按钮不能跟随明暗模式,固定用白(LESSONS L16)。
   .pd-v2-action--2 是这个仓库自己的按钮类名,不是原型的 .btn--2。 */
.hero .pd-v2-action--2{background:rgba(14,8,16,.28);border-color:rgba(255,247,241,.72);color:#FFF7F1}
@media (hover:hover) and (pointer:fine){
  .hero .pd-v2-action--2:hover{background:#FFF7F1;border-color:#FFF7F1;color:#262026}
}

@media (max-width:860px){
  .hero{aspect-ratio:auto;min-height:clamp(400px,64svh,540px)}
  .hero__in{padding-bottom:64px}
  /* E6: mobile hero copy is always left-aligned at the bottom with both
     buttons full-width and stacked, regardless of the slide's own align
     setting (desktop-only editorial choice — hc--left/center/right exist
     for the wide crop, not the mobile one). */
  .hero__in,.hc--left,.hc--center,.hc--right{align-items:flex-start;text-align:left}
  .hero__h--wrap,.hc--center .hero__h--wrap,.hero__p--wrap{max-width:none}
  .hero__cta,.hc--left .hero__cta,.hc--center .hero__cta{flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%}
  .hero__cta .pd-v2-action{width:100%;text-align:center}
}