/* 品信会 CGBB — Coming Soon
   配色:红 #A40706(品牌标准红,取自 logo)/ 黑 / 白 */

:root{
  --paper:#ffffff;
  --ink:#111111;
  --red:#A40706;
  --muted:#6b6b6b;
  --hairline:#e4e4e4;

  --font-en:"Avenir Next","Avenir","Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  --font-tc:"PingFang TC","Hiragino Sans CNS","Noto Sans TC","Microsoft JhengHei",
            "PingFang SC",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{color-scheme:light}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  /* 上一行吃掉剩余高度 → 主内容在其中居中,页脚始终贴底 */
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  gap:clamp(36px,6vh,64px);
  padding:clamp(28px,6vw,64px);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-en);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- 主区块 ---------- */

.stage{
  place-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:820px;
  width:100%;
}

.logo{
  width:clamp(230px,32vw,460px);
  height:auto;
  display:block;
}

.rule{
  display:block;
  width:52px;
  height:3px;
  background:var(--red);
  margin:clamp(34px,5.5vh,52px) 0 clamp(28px,4.5vh,42px);
}

/* 供搜索引擎与读屏软件的主标题,视觉上不占位 */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.headline{
  margin:0;
  font-size:clamp(1.95rem,7.4vw,3rem);
  font-weight:500;
  line-height:1.16;
  text-transform:uppercase;
  color:var(--ink);
  word-spacing:.2em;
}
/* 字间距加在字符右侧,末字会把整体推偏;逐词抵消,换行时也对齐 */
.headline span{
  display:inline-block;
  letter-spacing:.2em;
  margin-right:-.2em;
}

.sub{
  margin:clamp(18px,2.6vh,26px) 0 0;
  font-family:var(--font-tc);
  font-size:clamp(.9rem,2.4vw,1.05rem);
  font-weight:400;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
}

.sub span:not(.dot){
  letter-spacing:.14em;
  margin-right:-.14em;
}

.dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--red);
  margin:0 .85em;
  flex:none;
}

/* ---------- 页脚 ---------- */

.foot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  font-size:.72rem;
  letter-spacing:.06em;
  color:#9a9a9a;
}
.foot [lang]{font-family:var(--font-tc);letter-spacing:.1em}

.sep{
  width:1px;
  height:11px;
  background:var(--hairline);
  margin:0 14px;
}

/* ---------- 进场 ---------- */

.reveal{
  opacity:0;
  transform:translateY(14px);
  animation:rise .9s cubic-bezier(.22,.68,.28,1) forwards;
}
.logo{animation-delay:.05s}
.rule{animation-delay:.28s}
.headline{animation-delay:.4s}
.sub{animation-delay:.54s}
.foot{animation-delay:.72s}

@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
}

/* ---------- 窄屏 ---------- */

@media (max-width:420px){
  .headline span{letter-spacing:.14em;margin-right:-.14em}
  .foot{flex-direction:column;gap:7px;text-align:center}
  .sep{display:none}
}

/* ---------- 矮屏(横放手机) ---------- */

@media (max-height:520px){
  body{gap:22px;padding-top:30px}
  .stage{place-self:start center}
  .logo{width:clamp(180px,22vw,260px)}
  .rule{margin:22px 0 18px}
}