/* =========================================================
   HERO CINEMATIC — 官网风格主视觉（覆盖 styles.css 基础 .hero）
   引用顺序须在 styles.css / styles2.css / styles3.css 之后
   ========================================================= */

.hero.cinematic{
  /* 打通左右边距，做成官网那样的通栏大图 */
  position:relative;
  margin:-26px calc(-50vw + 50%) 34px;
  width:100vw;
  max-width:100vw;
  border:0;
  border-radius:0;
  box-shadow:none;
  min-height:clamp(520px,82vh,860px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- 背景层：缓慢推进，营造电影感 ---------- */
.hero.cinematic .hero-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 58%;
  filter:saturate(.92) contrast(1.06) brightness(.68);
  transform:scale(1.04);
  animation:heroSlowZoom 24s ease-out forwards;
}
@keyframes heroSlowZoom{
  from{transform:scale(1.12)}
  to{transform:scale(1.02)}
}

/* ---------- 压暗层：上深下深中间透，保证文字可读 ---------- */
.hero.cinematic .hero-veil{
  position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(14,17,22,.74) 0%,rgba(14,17,22,.24) 26%,
                    rgba(14,17,22,.20) 52%,rgba(14,17,22,.78) 100%);
}
/* 四角暗角，聚焦中心 */
.hero.cinematic .hero-vignette{
  position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(120% 90% at 50% 45%,transparent 42%,rgba(10,13,17,.5) 100%);
}
/* 底部与页面主体衔接，避免硬边 */
.hero.cinematic .hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg,#0b0d10) 92%);
}

/* ---------- 内容区：居中排布 ---------- */
.hero.cinematic .hero-content{
  position:relative;z-index:2;
  padding:0 22px;
  max-width:1100px;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero.cinematic .hero-tag{
  margin-bottom:20px;
  backdrop-filter:blur(6px);
  animation:heroRise .8s .05s cubic-bezier(.2,.7,.3,1) both;
}

/* ---------- 主标题：两行超大字，官网同款气质 ---------- */
.hero.cinematic .hero-title{
  font-family:var(--fd);
  font-weight:700;
  line-height:.96;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.hero.cinematic .hero-title .l1{
  display:block;
  font-size:clamp(34px,7.4vw,104px);
  letter-spacing:clamp(2px,.6vw,9px);
  color:#f4f6f8;
  text-shadow:0 3px 26px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9);
  animation:heroRise .9s .14s cubic-bezier(.2,.7,.3,1) both;
}
.hero.cinematic .hero-title .l2{
  display:block;
  font-style:normal;
  font-size:clamp(26px,5.5vw,78px);
  letter-spacing:clamp(1.5px,.5vw,7px);
  background:linear-gradient(100deg,#f0d27a 0%,var(--gold,#e8b83f) 46%,#c9922a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.7));
  animation:heroRise .9s .24s cubic-bezier(.2,.7,.3,1) both;
}

/* 标题下的细金线装饰 */
.hero.cinematic .hero-sub{
  position:relative;
  margin-top:20px;
  padding-top:18px;
  max-width:660px;
  color:rgba(226,232,238,.82);
  font-size:clamp(12.5px,1.35vw,16px);
  letter-spacing:.4px;
  line-height:1.75;
  animation:heroRise .9s .34s cubic-bezier(.2,.7,.3,1) both;
}
.hero.cinematic .hero-sub::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:150px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,184,63,.75),transparent);
}

.hero.cinematic .hero-actions{
  margin-top:30px;
  justify-content:center;
  animation:heroRise .9s .44s cubic-bezier(.2,.7,.3,1) both;
}
.hero.cinematic .countdown{
  margin-top:28px;
  margin-bottom:8px;
  justify-content:center;
  flex-wrap:wrap;
  animation:heroRise .9s .54s cubic-bezier(.2,.7,.3,1) both;
}

/* ---------- 右上角日期，呼应官网 ---------- */
.hero.cinematic .hero-date{
  position:absolute;top:26px;right:34px;z-index:2;
  text-align:right;line-height:1;
  font-family:var(--fd);
  animation:heroRise .9s .6s cubic-bezier(.2,.7,.3,1) both;
}
.hero.cinematic .hero-date b{
  display:block;font-size:52px;font-weight:700;
  color:rgba(232,184,63,.92);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
  letter-spacing:1px;
}
.hero.cinematic .hero-date span{
  display:block;margin-top:6px;
  font-size:13px;letter-spacing:5px;
  color:rgba(226,232,238,.72);
}

@keyframes heroRise{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .hero.cinematic{min-height:clamp(440px,72vh,640px);margin-bottom:26px}
  .hero.cinematic .hero-date{top:18px;right:20px}
  .hero.cinematic .hero-date b{font-size:38px}
  .hero.cinematic .hero-date span{font-size:11px;letter-spacing:3.5px}
}

@media (max-width:640px){
  .hero.cinematic{
    min-height:clamp(400px,66vh,540px);
    margin-top:-18px;
    align-items:flex-end;
  }
  .hero.cinematic .hero-bg{background-position:center 52%}
  .hero.cinematic .hero-content{
    text-align:left;align-items:flex-start;
    padding:0 16px 30px;
  }
  .hero.cinematic .hero-title{align-items:flex-start;text-align:left}
  .hero.cinematic .hero-sub{
    text-align:left;margin-top:14px;padding-top:14px;
  }
  .hero.cinematic .hero-sub::before{left:0;transform:none;width:100px}
  .hero.cinematic .hero-actions{
    justify-content:flex-start;width:100%;gap:9px;margin-top:22px;
  }
  .hero.cinematic .hero-actions .btn{flex:1 1 auto}
  .hero.cinematic .countdown{justify-content:flex-start;margin-top:20px;margin-bottom:6px}
  .hero.cinematic .cd-cell{min-width:64px;padding:10px 10px 9px}
  .hero.cinematic .cd-cell b{font-size:26px}
  .hero.cinematic .hero-veil{
    background:linear-gradient(180deg,rgba(8,10,13,.72) 0%,rgba(8,10,13,.28) 30%,
               rgba(8,10,13,.80) 72%,rgba(8,10,13,.95) 100%);
  }
  .hero.cinematic .hero-date{top:14px;right:14px}
  .hero.cinematic .hero-date b{font-size:30px}
  .hero.cinematic .hero-fade{height:90px}
}

/* 尊重「减少动态效果」的系统偏好 */
@media (prefers-reduced-motion:reduce){
  .hero.cinematic .hero-bg{animation:none;transform:scale(1.02)}
  .hero.cinematic .hero-tag,
  .hero.cinematic .hero-title .l1,
  .hero.cinematic .hero-title .l2,
  .hero.cinematic .hero-sub,
  .hero.cinematic .hero-actions,
  .hero.cinematic .countdown,
  .hero.cinematic .hero-date{animation:none}
}