/* ========== 概念预告页 Teaser ========== */

.teaser-body{
  background:#2A1D14;
  color:var(--cream);
  min-height:100vh;
}

/* ---- 顶部 ---- */
.teaser-top{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;
}
.teaser-brand{display:flex;align-items:center;gap:12px;}
.teaser-brand img{width:38px;height:38px;border-radius:12px;object-fit:cover;opacity:.9;}
.teaser-brand span{
  font-size:17px;font-weight:800;letter-spacing:4px;
  color:var(--cream);opacity:.85;
}
.teaser-top .lang-switch{background:rgba(253,248,240,.10);}
.teaser-top .lang-switch button{color:rgba(253,248,240,.6);}
.teaser-top .lang-switch button:hover{color:var(--cream);}
.teaser-top .lang-switch button.active{background:var(--cream);color:#2A1D14;}

/* ---- 主视觉舞台 ---- */
.teaser-stage{
  position:relative;
  min-height:calc(100vh - 82px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.teaser-bg-pic{position:absolute;inset:0;display:block;}
.teaser-bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.teaser-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(42,29,20,.30) 0%, rgba(42,29,20,.72) 55%, rgba(42,29,20,.94) 100%);
}
.teaser-content{
  position:relative;z-index:10;
  text-align:center;padding:60px 32px;max-width:820px;
}

/* ---- 上方小标 ---- */
.teaser-kicker{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-bottom:26px;
}
.teaser-kicker em{
  font-style:normal;font-size:13px;letter-spacing:8px;font-weight:700;
  color:rgba(253,248,240,.72);
}
.teaser-kicker .dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(253,248,240,.45);
  animation:pulse 2.2s ease-in-out infinite;
}
.teaser-kicker .dot:last-child{animation-delay:1.1s;}
@keyframes pulse{
  0%,100%{opacity:.25;transform:scale(1);}
  50%{opacity:1;transform:scale(1.5);}
}

/* ---- 标题 ---- */
.teaser-title{
  font-size:clamp(34px,6.5vw,68px);
  font-weight:900;line-height:1.35;letter-spacing:6px;
  margin-bottom:24px;
}
.teaser-title .t-line{display:block;color:var(--cream);}
.teaser-title .t-line.accent{
  color:#F0C98A;
  text-shadow:0 0 46px rgba(240,201,138,.42);
}

/* ---- 副文案 ---- */
.teaser-sub{
  font-size:clamp(14px,1.8vw,17px);
  line-height:2;letter-spacing:2px;
  color:rgba(253,248,240,.68);
  margin-bottom:44px;
}

/* ---- 倒计时 ---- */
.countdown{
  display:flex;align-items:flex-start;justify-content:center;gap:8px;
  margin-bottom:14px;
}
.cd-cell{
  min-width:78px;padding:14px 8px;
  background:rgba(253,248,240,.07);
  border:1px solid rgba(253,248,240,.14);
  border-radius:16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.cd-cell b{
  display:block;font-size:clamp(26px,4vw,38px);font-weight:800;
  color:var(--cream);line-height:1;font-variant-numeric:tabular-nums;
  letter-spacing:1px;
}
.cd-cell span{
  display:block;margin-top:8px;
  font-size:11px;letter-spacing:3px;color:rgba(253,248,240,.5);
}
.cd-sep{
  font-size:24px;font-weight:300;color:rgba(253,248,240,.28);
  padding-top:20px;
}
.cd-note{
  font-size:12px;letter-spacing:4px;color:rgba(253,248,240,.42);
  margin-bottom:0;
}

/* ---- 线索区 ---- */
.teaser-clues{
  background:#221710;padding:80px 0;
}
.clue-head{text-align:center;margin-bottom:40px;}
.clue-head span{
  font-size:12px;letter-spacing:6px;font-weight:700;
  color:rgba(253,248,240,.42);
}
.clue-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;
}
.clue-card{
  border-radius:var(--radius);overflow:hidden;
  background:rgba(253,248,240,.05);
  border:1px solid rgba(253,248,240,.10);
  transition:all .3s;
}
.clue-card:hover{transform:translateY(-6px);border-color:rgba(240,201,138,.34);}
.clue-card img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.82;}
.clue-cap{
  padding:16px 18px;text-align:center;
  font-size:14px;letter-spacing:2px;color:rgba(253,248,240,.72);
}
.clue-card.locked{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:16/10;gap:0;
}
.clue-q{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:900;color:rgba(253,248,240,.13);
  letter-spacing:2px;
}
.clue-card.locked .clue-cap{
  width:100%;border-top:1px solid rgba(253,248,240,.07);
  color:rgba(253,248,240,.38);
}

/* ---- 订阅区 ---- */
.teaser-subscribe{
  background:linear-gradient(180deg,#221710 0%,#2A1D14 100%);
  padding:88px 0;text-align:center;
}
.teaser-subscribe h2{
  font-size:clamp(24px,3.6vw,34px);font-weight:800;letter-spacing:4px;
  color:var(--cream);margin-bottom:16px;
}
.teaser-subscribe p{
  font-size:15px;color:rgba(253,248,240,.58);letter-spacing:1px;
  margin-bottom:32px;line-height:2;
}
.sub-form{
  display:flex;gap:12px;max-width:520px;margin:0 auto;flex-wrap:wrap;
  justify-content:center;
}
.sub-form input{
  flex:1;min-width:240px;
  padding:15px 22px;border-radius:999px;
  background:rgba(253,248,240,.07);
  border:1px solid rgba(253,248,240,.16);
  color:var(--cream);font-size:15px;font-family:var(--font);
  outline:none;transition:all .25s;
}
.sub-form input::placeholder{color:rgba(253,248,240,.32);}
.sub-form input:focus{
  border-color:rgba(240,201,138,.5);
  background:rgba(253,248,240,.11);
}
.sub-form button{
  padding:15px 36px;border-radius:999px;
  background:#F0C98A;color:#2A1D14;
  font-size:15px;font-weight:800;letter-spacing:2px;
  border:none;cursor:pointer;font-family:var(--font);
  transition:all .25s;
}
.sub-form button:hover{background:#F5D79E;transform:translateY(-2px);}
.sub-tip{
  margin-top:18px;font-size:13px;letter-spacing:1px;
  color:#F0C98A;min-height:20px;
}

/* ---- 页脚 ---- */
.teaser-footer{
  background:#1C130D;padding:36px 0;
}
.tf-row{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:13px;letter-spacing:3px;color:rgba(253,248,240,.38);
}
.tf-dot{opacity:.5;}
.tf-row a.tf-home{
  color:rgba(253,248,240,.55);text-decoration:none;
  border-bottom:1px solid rgba(253,248,240,.22);padding-bottom:1px;
  transition:color .25s,border-color .25s;
}
.tf-row a.tf-home:hover{color:#F0C98A;border-bottom-color:#F0C98A;}
.tf-url{text-align:center;margin-top:16px;}
.tf-url a{
  font-size:13px;letter-spacing:2px;color:rgba(253,248,240,.5);
  transition:color .25s;
}
.tf-url a:hover{color:#F0C98A;}

/* ---- 响应式 ---- */
@media (max-width:640px){
  .teaser-top{padding:16px 20px;}
  .teaser-brand span{font-size:15px;letter-spacing:2px;}
  .teaser-content{padding:40px 20px;}
  .teaser-title{letter-spacing:3px;}
  .cd-cell{min-width:60px;padding:10px 4px;}
  .cd-cell b{font-size:22px;}
  .cd-cell span{font-size:10px;letter-spacing:2px;margin-top:6px;}
  .cd-sep{font-size:18px;padding-top:14px;}
  .teaser-clues{padding:56px 0;}
  .teaser-subscribe{padding:64px 0;}
  .sub-form{flex-direction:column;align-items:center;}
  .sub-form input,.sub-form button{width:100%;max-width:320px;}
}

/* ========== 排版调整 + 只保留大图模式 ========== */
/* 文字整体上移，避开画面正中那四把椅子；标题落在顶光里 */
.teaser-stage{
  align-items:flex-start;
  padding-top:clamp(36px,8vh,88px);
}
.teaser-content{padding:0 32px;}
.teaser-kicker{margin-bottom:18px;}
.teaser-title{margin-bottom:18px;}
.teaser-sub{
  margin:0 auto 32px;max-width:620px;
  text-shadow:0 2px 20px rgba(18,11,6,.72);
}
/* 顶部文字后面加一层柔光遮罩，保证可读性 */
.teaser-veil{
  background:
    radial-gradient(ellipse 58% 26% at 50% 18%, rgba(26,17,10,.58) 0%, rgba(26,17,10,0) 72%),
    radial-gradient(ellipse at 50% 45%, rgba(42,29,20,.26) 0%, rgba(42,29,20,.68) 55%, rgba(42,29,20,.95) 100%);
}

/* ---- 倒计时关闭：整页只剩顶部那张大图 ---- */
body.teaser-imgonly{overflow:hidden;background:#1C130D;}
body.teaser-imgonly .teaser-top,
body.teaser-imgonly .teaser-content,
body.teaser-imgonly .teaser-clues,
body.teaser-imgonly .teaser-subscribe,
body.teaser-imgonly .teaser-footer{display:none !important;}
body.teaser-imgonly .teaser-stage{
  min-height:100dvh;height:100dvh;padding-top:0;
}
body.teaser-imgonly .teaser-bg{object-position:center 46%;}

@media (max-width:640px){
  .teaser-stage{padding-top:clamp(24px,5vh,48px);}
  .teaser-content{padding:0 20px;}
  .teaser-sub{margin-bottom:24px;}
  body.teaser-imgonly .teaser-stage{min-height:100dvh;height:100dvh;}
}

/* 配置读回来之前先藏住文字，避免闪一下 */
body.teaser-booting .teaser-content{opacity:0;}

/* ---- 精修：让文字块整体避开画面里那四把椅子 ---- */
/* 背景图轻微放大并贴顶，椅子整体下移，给文字让出中间那块空地 */
.teaser-bg{height:108%;bottom:auto;}
.teaser-stage{padding-top:clamp(28px,5.5vh,64px);}
.teaser-kicker{margin-bottom:14px;}
.teaser-title{font-size:clamp(32px,5.4vw,58px);line-height:1.3;margin-bottom:16px;}
.teaser-sub{margin-bottom:26px;max-width:560px;}
/* 倒计时做成一块带底衬的横条，压在画面上也很清楚 */
.countdown{
  gap:10px;margin-bottom:12px;
  padding:12px 18px;border-radius:22px;
  background:rgba(20,12,6,.26);
  border:1px solid rgba(253,248,240,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.cd-cell{min-width:72px;padding:10px 6px;background:rgba(253,248,240,.06);}
.cd-cell b{font-size:clamp(24px,3.4vw,32px);}
.cd-cell span{margin-top:6px;font-size:10px;letter-spacing:2px;}
.cd-sep{padding-top:16px;font-size:20px;}
.cd-note{font-size:11px;letter-spacing:3px;}

@media (max-width:640px){
  .teaser-stage{padding-top:clamp(20px,4vh,40px);}
  .teaser-bg{height:104%;}
  .countdown{padding:10px 12px;gap:6px;}
  .cd-cell{min-width:60px;}
}

/* 提示语与倒计时横条之间再留一点空隙，别贴着边框 */
.countdown{margin-bottom:16px;}
.cd-note{margin-top:2px;}

/* 提示语压在椅子上了，加个阴影保证读得清 */
.cd-note{text-shadow:0 2px 12px rgba(18,11,6,.95),0 0 30px rgba(18,11,6,.7);}

/* ========== 预告页精简 + 左右排版 ========== */
/* 顶部只保留语言切换（中 / EN / 日），品牌标识收起 */
.teaser-brand{display:none;}
.teaser-top{justify-content:flex-end;}

/* 线索区与订阅区不再展示 */
.teaser-clues,.teaser-subscribe{display:none !important;}

/* 桌面端：文字靠左排，画面（椅子）在右侧；手机端保持原来的居中排版 */
@media (min-width:641px){
  .teaser-stage{padding-top:0;align-items:center;}
  .teaser-content{
    text-align:left;
    max-width:min(600px,50vw);
    margin:0 auto 0 clamp(28px,6vw,110px);
    padding:0;
  }
  .teaser-kicker{justify-content:flex-start;margin-bottom:16px;}
  .teaser-title{font-size:clamp(34px,4.6vw,56px);margin-bottom:18px;}
  .teaser-sub{margin:0 0 28px;max-width:520px;text-align:left;}
  .countdown{justify-content:flex-start;width:fit-content;}
  .teaser-bg{object-position:45% 50%;}
  .teaser-veil{
    background:
      linear-gradient(95deg, rgba(24,15,9,.90) 0%, rgba(24,15,9,.72) 34%, rgba(24,15,9,.30) 60%, rgba(30,20,12,.52) 100%),
      radial-gradient(ellipse at 45% 45%, rgba(42,29,20,.18) 0%, rgba(42,29,20,.48) 62%, rgba(42,29,20,.80) 100%);
  }
}

/* 再把画面往右挪一点，左边留白给文字，倒计时不压到椅子 */
@media (min-width:641px){
  .teaser-bg{object-position:26% 50%;}
  .teaser-veil{
    background:
      linear-gradient(95deg, rgba(24,15,9,.92) 0%, rgba(24,15,9,.74) 36%, rgba(24,15,9,.32) 62%, rgba(30,20,12,.55) 100%),
      radial-gradient(ellipse at 40% 45%, rgba(42,29,20,.16) 0%, rgba(42,29,20,.46) 62%, rgba(42,29,20,.80) 100%);
  }
}

/* ========== 顶部导航（替代语言切换） ========== */
.teaser-top{
  justify-content:space-between !important;
  gap:16px;
}
.teaser-brand{display:flex !important;text-decoration:none;}
.teaser-brand:hover span{color:#F0C98A;}
.teaser-nav{
  display:flex;align-items:center;gap:4px;
  flex-wrap:nowrap;
}
.teaser-nav a{
  padding:8px 14px;border-radius:999px;
  font-size:13px;letter-spacing:2px;
  color:rgba(253,248,240,.62);
  text-decoration:none;white-space:nowrap;
  border:1px solid transparent;
  transition:color .25s,background .25s,border-color .25s;
}
.teaser-nav a:hover{color:var(--cream);background:rgba(253,248,240,.10);}
.teaser-nav a.active{
  color:#2A1D14;background:#F0C98A;border-color:#F0C98A;font-weight:700;
}
@media (max-width:900px){
  .teaser-top{
    flex-direction:column;align-items:flex-start;
    gap:10px;padding:14px 16px;
  }
  .teaser-nav{
    width:100%;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;
  }
  .teaser-nav::-webkit-scrollbar{display:none;}
  .teaser-nav a{padding:6px 11px;font-size:12px;letter-spacing:1px;}
}
