/* ============================================================
 * VSAA 门户 · 公共基础样式
 * 每个模板通过 css/theme-*.css 覆盖 :root 变量与局部样式
 * ============================================================ */
:root{
  --bg:#06060a;
  --gold:#d8c08a;
  --gold-bright:#efe3c3;
  --gold-dim:rgba(216,192,138,.6);
  --gold-faint:rgba(216,192,138,.2);
  --ink:#f6f3ec;
  --muted:rgba(246,243,236,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --title-font:"Noto Serif SC","Songti SC","STSong",serif;
  --en-font:"Cormorant Garamond",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--title-font);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  cursor:default;
}

/* ================= 视频背景 ================= */
.bg-video{
  position:fixed;inset:-4%;z-index:0;
  width:108%;height:108%;
  object-fit:cover;
  filter:saturate(1.12) contrast(1.06) brightness(.92);
  opacity:0;
  transition:opacity 3s var(--ease);
  animation:kenburns 140s var(--ease) infinite alternate;
  will-change:transform;
}
.bg-video.ready{opacity:1}
@keyframes kenburns{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.18) translate(1.8%,-1.8%)}
}

/* ================= 遮罩与噪点 ================= */
.veil{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,3,7,.62) 0%,rgba(3,3,7,.12) 30%,rgba(3,3,7,.10) 60%,rgba(3,3,7,.62) 100%),
    radial-gradient(120% 90% at 50% 45%,transparent 35%,rgba(3,3,7,.5) 100%);
}
.grain{
  position:fixed;inset:-50%;z-index:7;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,3%)}
}

/* ================= 飘浮光尘 ================= */
.floats{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.float{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(246,243,236,.5),rgba(216,192,138,.12) 55%,transparent 70%);
  animation:floatUp linear infinite;
  opacity:0;
  will-change:transform,opacity;
}
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.75}
  88%{opacity:.35}
  100%{transform:translateY(-115vh) translateX(6vw);opacity:0}
}

/* ================= 顶部品牌 ================= */
.brand{
  position:fixed;top:0;left:0;right:0;z-index:8;
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(26px,4.5vh,44px) clamp(30px,5vw,80px);
  pointer-events:none;
  opacity:0;transform:translateY(-16px);
  animation:rise 1.6s .5s var(--ease) forwards;
}
.brand-mark{
  font-family:var(--en-font);
  font-weight:300;
  font-size:clamp(22px,2.2vw,30px);
  letter-spacing:.5em;
  color:var(--ink);
  text-decoration:none;
  pointer-events:auto;
  transition:color .5s;
}
.brand-mark:hover{color:var(--gold)}
.brand-mark .dot{
  color:var(--gold);
  font-style:italic;
  padding:0 .15em;
  text-shadow:0 0 18px rgba(216,192,138,.7);
}
.brand-tag{
  font-family:var(--en-font);
  font-style:italic;
  font-weight:300;
  font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ================= 中央主视觉 ================= */
.hero{
  position:relative;z-index:4;
  height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:0 24px;
  will-change:transform;
}
.eyebrow{
  font-family:var(--en-font);
  font-weight:300;
  font-size:clamp(10px,1.05vw,13px);
  letter-spacing:.68em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin-bottom:clamp(30px,5vh,54px);
  padding-left:.68em;
  display:flex;align-items:center;gap:clamp(20px,3.5vw,48px);
  white-space:nowrap;
}
.eyebrow-line{display:block;height:1px;width:clamp(40px,7vw,100px);position:relative;overflow:hidden}
.eyebrow-line:first-child{background:linear-gradient(90deg,transparent,var(--gold-faint))}
.eyebrow-line:last-child{background:linear-gradient(90deg,var(--gold-faint),transparent)}
.eyebrow-line::after{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:shine 5.5s 2.6s infinite;
}
@keyframes shine{0%{left:-100%}55%,100%{left:200%}}

.title{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,22px)}
.title-cn{
  font-weight:200;
  font-size:clamp(46px,9.5vw,118px);
  letter-spacing:.16em;
  padding-left:.16em;
  line-height:1.15;
}
.title-en{
  font-family:var(--en-font);
  font-weight:300;
  font-style:italic;
  font-size:clamp(15px,2vw,24px);
  letter-spacing:.5em;
  padding-left:.5em;
  text-transform:uppercase;
  color:var(--muted);
}
.divider{
  width:clamp(60px,10vw,140px);height:1px;
  margin:clamp(34px,5.5vh,54px) auto;
  position:relative;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transform:scaleX(0);
  animation:dividerIn 1.8s 2.1s var(--ease) forwards;
}
.divider::before{
  content:"";position:absolute;left:50%;top:50%;
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);
  transform:translate(-50%,-50%);
  box-shadow:0 0 16px var(--gold),0 0 40px rgba(216,192,138,.4);
}
@keyframes dividerIn{to{opacity:1;transform:scaleX(1)}}

.verse{
  max-width:620px;
  font-weight:300;
  font-size:clamp(14px,1.6vw,18px);
  line-height:2.3;
  letter-spacing:.14em;
  color:var(--muted);
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.verse em{font-style:normal;font-family:var(--en-font);font-size:1.15em;letter-spacing:.08em;color:var(--gold-bright)}

/* ================= 入场动画 ================= */
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal="in"]{animation:reveal 1.6s var(--ease) forwards}
[data-reveal="in"].r1{animation-delay:1s}
[data-reveal="in"].r2{animation-delay:1.35s}
[data-reveal="in"].r3{animation-delay:1.8s}
[data-reveal="in"].r4{animation-delay:2.2s}
@keyframes reveal{
  from{opacity:0;transform:translateY(34px);filter:blur(8px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ================= 右下角倒计时 ================= */
.countdown{
  position:fixed;right:clamp(28px,4.5vw,64px);bottom:clamp(28px,4.5vw,60px);
  z-index:8;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none;
}
.countdown.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ring-btn{
  position:relative;width:96px;height:96px;
  border:1px solid var(--gold-faint);
  border-radius:50%;
  background:rgba(12,12,20,.32);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 0 30px rgba(216,192,138,.05),0 10px 50px rgba(0,0,0,.55);
  cursor:pointer;
  outline:none;
  transition:transform .6s var(--ease),border-color .5s,background .5s;
  animation:breathe 4.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:inset 0 0 30px rgba(216,192,138,.05),0 10px 50px rgba(0,0,0,.55),0 0 0 0 rgba(216,192,138,0)}
  50%{box-shadow:inset 0 0 30px rgba(216,192,138,.09),0 10px 50px rgba(0,0,0,.55),0 0 0 12px rgba(216,192,138,.06)}
}
.ring-btn:hover{transform:scale(1.07);border-color:var(--gold-dim);background:var(--gold-faint)}
.ring-btn:active{transform:scale(.96)}
.ring-svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring-svg circle{fill:none;stroke-width:1.6}
.ring-track{stroke:rgba(246,243,236,.14)}
.ring-progress{
  stroke:var(--gold);
  stroke-linecap:round;
  stroke-dasharray:276.46;
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear;
  filter:drop-shadow(0 0 7px var(--gold));
}
.ring-num{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:2px;padding-top:2px}
.ring-num .num{font-family:var(--en-font);font-weight:300;font-size:40px;color:var(--ink);line-height:1}
.ring-num .unit{font-family:var(--en-font);font-style:italic;font-size:15px;color:var(--gold-dim)}
.countdown-hint{
  font-size:10.5px;letter-spacing:.3em;color:var(--muted);
  padding-left:.3em;cursor:pointer;transition:color .5s;
  user-select:none;white-space:nowrap;
}
.countdown-hint:hover{color:var(--gold)}
.countdown-hint .tap{
  color:var(--gold-dim);font-family:var(--en-font);font-style:italic;
  letter-spacing:.04em;text-decoration:underline;
  text-decoration-color:var(--gold-faint);text-underline-offset:4px;
}

/* ================= 底部信息 ================= */
.foot{
  position:fixed;left:clamp(30px,5vw,80px);bottom:clamp(30px,4.5vw,60px);
  z-index:8;pointer-events:none;
  display:flex;align-items:center;gap:18px;
  opacity:0;
  animation:fadeIn 1.8s 3s var(--ease) forwards;
}
@keyframes fadeIn{to{opacity:1}}
.foot-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold),0 0 32px rgba(216,192,138,.4);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.foot-text{font-family:var(--en-font);font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}
.foot-sep{color:var(--gold-faint);font-size:10px}

/* ================= 设置按钮（适配所有模板） ================= */
.settings-btn{
  position:fixed;top:clamp(26px,4.5vh,44px);right:clamp(30px,5vw,80px);
  z-index:10;
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,18,.35);
  border:1px solid var(--gold-faint);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  color:var(--ink);
  transition:transform .5s var(--ease),background .4s,border-color .4s;
  opacity:0;animation:fadeIn 1.5s 2.8s var(--ease) forwards;
}
.settings-btn:hover{transform:rotate(90deg) scale(1.08);background:var(--gold-faint);border-color:var(--gold-dim)}
.settings-btn svg{width:19px;height:19px}
.settings-btn .gear{
  animation:gearSpin 14s linear infinite;
}
.settings-btn:hover .gear{animation-duration:3s}
@keyframes gearSpin{to{transform:rotate(360deg)}}

/* ================= 设置面板 ================= */
.settings-panel{
  position:fixed;right:clamp(20px,3vw,48px);top:clamp(80px,12vh,110px);
  z-index:20;
  width:min(340px,calc(100vw - 40px));
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  background:rgba(12,12,20,.72);
  border:1px solid var(--gold-faint);
  border-radius:18px;
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 24px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  padding:22px;
  transform:translateX(30px) scale(.97);
  opacity:0;pointer-events:none;
  transition:transform .5s var(--ease),opacity .4s;
}
.settings-panel.open{transform:translateX(0) scale(1);opacity:1;pointer-events:auto}
.settings-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.settings-title{font-size:15px;letter-spacing:.3em;color:var(--ink)}
.settings-close{
  width:28px;height:28px;border-radius:50%;border:none;
  background:var(--gold-faint);color:var(--ink);
  cursor:pointer;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,transform .3s;
}
.settings-close:hover{background:var(--gold-dim);transform:rotate(90deg)}
.settings-group{margin-bottom:20px}
.settings-label{
  font-size:10.5px;letter-spacing:.28em;color:var(--muted);
  margin-bottom:10px;text-transform:uppercase;
}
.settings-label small{color:var(--gold-faint)}

/* 主题选择 */
.theme-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme-item{
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(246,243,236,.1);
  cursor:pointer;text-align:left;
  transition:border-color .3s,background .3s,transform .3s;
  display:flex;flex-direction:column;gap:3px;
}
.theme-item:hover{transform:translateY(-2px);border-color:var(--gold-faint)}
.theme-item.active{border-color:var(--gold);background:var(--gold-faint);box-shadow:0 0 0 1px var(--gold-faint) inset}
.theme-item .t-name{font-size:13px;letter-spacing:.1em;color:var(--ink)}
.theme-item .t-desc{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.theme-swatch{
  width:100%;height:6px;border-radius:3px;margin-bottom:6px;
  background:linear-gradient(90deg,var(--gold),rgba(246,243,236,.2));
}

/* 开关 */
.switch{position:relative;display:inline-block;width:46px;height:26px;vertical-align:middle}
.switch input{opacity:0;width:0;height:0}
.switch-slider{
  position:absolute;inset:0;border-radius:26px;cursor:pointer;
  background:rgba(246,243,236,.16);
  transition:background .4s;
}
.switch-slider::before{
  content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .4s var(--ease);
}
.switch input:checked + .switch-slider{background:var(--gold)}
.switch input:checked + .switch-slider::before{transform:translateX(20px)}
.switch-row{display:flex;justify-content:space-between;align-items:center}

/* 输入框 */
.settings-input{
  width:100%;padding:11px 14px;border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(246,243,236,.14);
  color:var(--ink);font-size:13px;letter-spacing:.06em;
  font-family:var(--en-font);
  outline:none;transition:border-color .3s;
}
.settings-input:focus{border-color:var(--gold)}
.settings-input::placeholder{color:rgba(246,243,236,.3)}
.input-row{display:flex;gap:10px}
.input-row .settings-input:first-child{flex:1}
.input-row .settings-input{width:88px;text-align:center}
.settings-status{
  margin-top:14px;padding:10px 12px;border-radius:10px;
  background:var(--gold-faint);color:var(--gold-bright);
  font-size:11px;letter-spacing:.14em;text-align:center;
}
.settings-status.off{background:rgba(120,120,140,.12);color:var(--muted)}
.settings-tip{font-size:9.5px;letter-spacing:.12em;color:rgba(246,243,236,.35);line-height:1.8;margin-top:14px;text-align:center}

/* ================= 离场 ================= */
.leaving .veil{animation:outVeil 1.1s ease forwards}
.leaving .bg-video{transition:opacity 1.1s;opacity:0!important}
.leaving .hero,.leaving .brand,.leaving .countdown,.leaving .foot{
  animation:out 1.1s var(--ease) forwards;
}
@keyframes outVeil{to{background-color:var(--bg)}}
@keyframes out{to{opacity:0;transform:scale(1.04);filter:blur(8px)}}
body.leaving .settings-btn{opacity:0;transition:opacity .6s}

/* ================= 无障碍 & 响应式 ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:640px){
  .brand{padding:26px 24px}
  .brand-tag{display:none}
  .title-en{letter-spacing:.32em;padding-left:.32em}
  .verse{line-height:2.15}
  .countdown{right:20px;bottom:26px}
  .countdown-hint{display:none}
  .ring-btn{width:84px;height:84px}
  .ring-num .num{font-size:34px}
  .foot{display:none}
  .settings-btn{top:22px;right:20px;width:38px;height:38px}
  .settings-panel{top:72px}
}