/* 宝葫芦首页 · 人物视频控帧层
   整个首屏背景就是这段视频（画面自带品牌底色与人物），按屏幕尺寸全屏铺放，
   文案与下载功能区浮在视频上层（.page 在 .bg 之上，shade 继续压暗左侧保证可读性）。

   层级：.bg > video.hulu-scrub-video（本文件） > .female-character（静态回退） > .shade > .page
   视频层永远 pointer-events:none，且不显示任何原生控件。 */

.has-scrub > .hulu-scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                          /* 全屏铺放：不同屏幕比例下自动裁切 */
  object-position: var(--scrub-position, 72% 20%);
  pointer-events: none;
  opacity: 0;
  background: transparent;
  transition: opacity 260ms ease-out;
}

/* 竖屏素材（如当前 4:5 候选片）用 contain 观察，避免 cover 把头裁掉 */
.has-scrub > .hulu-scrub-video.is-fit-contain {
  object-fit: contain;
  object-position: right bottom;
}

/* 第一帧 seek 完成（正视）之后才淡入，静态人物同步淡出 */
.has-scrub.is-scrub-ready > .hulu-scrub-video { opacity: 1; }

.has-scrub.is-scrub-ready > .bg-video.female-character {
  opacity: 0;
  transition: opacity 320ms ease-out;
}

/* 视频不再单独遮罩：画面本身就是"底色 + 人物"，不需要做边缘羽化 */
@media (max-width: 600px) {
  .has-scrub > .hulu-scrub-video { object-position: 66% 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .hulu-scrub-video,
  .has-scrub.is-scrub-ready > .bg-video.female-character { transition: none; }
}

/* Final home layout: keep the approved motion layer while constraining copy on wide screens. */
html,body{font-family:"Inter","Avenir Next","PingFang SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif!important;font-weight:300;-webkit-font-smoothing:antialiased}
.page{padding:0;align-items:stretch}
.header{position:fixed;inset:0 0 auto;width:100%;max-width:none;padding:clamp(18px,2.3vw,34px) clamp(24px,4vw,72px);background:linear-gradient(#2a0008a8,transparent);z-index:5;color:#fff8f4}
.header>.main-nav{flex:0 1 auto;justify-content:center;gap:clamp(18px,2.3vw,34px);margin-inline:auto}.main-nav,.main-nav a,.main-nav button{font-size:clamp(14px,1.05vw,17px);font-weight:300;letter-spacing:.035em}.main-nav button,.main-nav a{padding:8px 2px}
.header-account{gap:clamp(12px,1.6vw,24px)}.main-account,.header-account .main-account{font-size:14px;font-weight:300;letter-spacing:.05em;text-decoration:none;border:1px solid #ff625e;padding:11px 20px;background:#43000d66}
.hero{width:100%;max-width:none;min-height:100dvh;padding:clamp(120px,16vh,180px) clamp(24px,7vw,120px) clamp(56px,8vh,96px);align-items:flex-start;justify-content:flex-start;text-align:left}.hero-copy{width:min(760px,52vw);margin:0;transform:none}.hero h1{font-size:clamp(42px,4.2vw,70px);font-weight:300;letter-spacing:.01em;line-height:1.24;max-width:12em;margin-bottom:clamp(24px,4vh,40px)}
.video-input{max-width:clamp(520px,46vw,710px);border-radius:18px;padding:16px 18px 13px}.video-input textarea{font-family:inherit!important;font-size:15px!important;font-weight:300;resize:none!important}.input-action small{display:none!important}.input-action>.primary,.input-action .paste{font-family:inherit;font-weight:300;letter-spacing:.06em}
.companion-nickname{top:clamp(56px,calc(50dvh - min(40dvh,400px) - 70px),95px);right:clamp(7vw,calc((100vw - 1440px)/2 + 9vw),20vw);transform:none;width:min(250px,20vw);font-weight:300}.nickname-value{font-family:inherit;font-size:clamp(18px,1.45vw,24px);font-weight:300;letter-spacing:.14em}.nickname-feedback:empty{display:none}
@media(min-width:1500px){.hero{padding-inline:9vw}.hero-copy{width:min(740px,44vw)}}
@media(max-width:1000px){.main-nav,.header-account{display:none}.hero{padding-top:110px}.hero-copy{width:min(100%,720px)}.hero h1{font-size:clamp(40px,5vw,56px)}.companion-nickname{right:5vw;width:190px;top:17vh}}
@media(max-width:720px){.header{padding:14px 18px}.main-brand img{width:134px}.hero{min-height:100dvh;padding:clamp(225px,34dvh,300px) 20px 72px}.hero-copy{width:100%}.hero h1{font-size:clamp(37px,9.5vw,48px);line-height:1.25;margin-bottom:22px}.video-input{max-width:none;border-radius:17px;padding:13px}.video-input textarea{height:74px;min-height:74px!important;font-size:14px!important;padding-right:48px!important}.input-action>.primary{width:auto;min-width:100px;min-height:44px;padding:9px 19px}.companion-nickname{top:94px;right:12px;width:min(52vw,220px);max-width:calc(100vw - 150px)}.nickname-value{font-size:17px}.bg-video.female-character.static-mode{top:114px;right:8px;width:min(46vw,190px);height:190px}}
@media(max-height:760px) and (min-width:721px){.hero{padding-top:112px;padding-bottom:48px}.hero h1{font-size:clamp(38px,3.7vw,58px);margin-bottom:22px}}