/* =============================================
   base.css · 博客首页公共框架
   包含：布局容器 / 内容区 / 功能入口 / 主题切换器
   主题各自的视觉（背景/角色/配色/动效）在 theme.css
   ============================================= */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { }

body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  overflow-x:hidden;
  color:#fff;
}

/* ===== 欢迎页舞台 ===== */
.stage {
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
}
/* 主题渲染层（背景/角色/装饰） */
.theme-stage {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* ===== 中央内容区 ===== */
.content {
  position:relative;
  z-index:2;
  padding:18vh 8vw 6vh;
  max-width:800px;
  pointer-events:auto;
  animation: contentIn 1s var(--ease, cubic-bezier(.16,1,.3,1)) both;
  animation-delay:.2s;
}
@keyframes contentIn {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
.eyebrow {
  font-size:13px;
  letter-spacing:6px;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:18px;
  font-weight:600;
}
.title {
  font-size:clamp(42px, 9vw, 96px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:.02em;
  margin-bottom:16px;
}
.subtitle {
  font-size:clamp(16px, 2.4vw, 22px);
  font-weight:400;
  letter-spacing:.5px;
  opacity:.85;
  max-width:560px;
  margin-bottom:40px;
}
.cta-row { display:flex; gap:16px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border-radius:50px;
  font-size:15px; font-weight:600; letter-spacing:1px;
  text-decoration:none; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s, opacity .25s;
}
.btn:hover { transform:translateY(-3px); }
.btn-primary { background:#fff; color:#111; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.btn-ghost { border:1.5px solid rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(4px); }
.btn-ghost:hover { background:rgba(255,255,255,.18); }

/* ===== 功能入口（独立于视觉设计）===== */
.services {
  position:relative;
  z-index:2;
  padding:10vh 8vw 12vh;
  scroll-margin-top:20px;
}
.services-title {
  font-size:clamp(20px,3vw,28px);
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:36px;
  text-align:left;
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  max-width:1000px;
}
.service-card {
  display:flex; flex-direction:column; gap:6px;
  padding:28px 26px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  text-decoration:none; color:#fff;
  transition:transform .3s var(--ease), background .3s, border-color .3s;
}
.service-card:hover { transform:translateY(-6px); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.sc-icon { font-size:30px; margin-bottom:8px; opacity:.9; }
.sc-name { font-size:17px; font-weight:700; letter-spacing:.5px; }
.sc-desc { font-size:13px; opacity:.7; }

/* ===== 页脚 ===== */
.footer {
  position:relative; z-index:2;
  text-align:center; padding:30px 20px 40px;
  font-size:12px; letter-spacing:3px; opacity:.6;
}

/* ===== 主题切换器 ===== */
.theme-switcher {
  position:fixed; top:20px; right:20px; z-index:100;
}
.ts-toggle {
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s, background .3s;
}
.ts-toggle:hover { transform:rotate(45deg); background:rgba(255,255,255,.22); }
.ts-menu {
  position:absolute; top:54px; right:0;
  min-width:230px;
  background:rgba(20,25,35,.88);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:14px;
  display:none;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.theme-switcher.open .ts-menu { display:block; animation:menuIn .25s var(--ease); }
@keyframes menuIn { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
.ts-label { font-size:11px; letter-spacing:2px; opacity:.6; margin-bottom:10px; text-transform:uppercase; }
.ts-item {
  display:block; width:100%; text-align:left;
  padding:10px 12px; border:none; background:transparent;
  color:#fff; font-size:14px; cursor:pointer;
  border-radius:8px; transition:background .2s;
}
.ts-item:hover { background:rgba(255,255,255,.1); }
.ts-item.active { background:rgba(255,255,255,.14); font-weight:600; }

/* ===== 响应式 ===== */
@media (max-width:640px) {
  .content { padding:14vh 6vw 6vh; }
  .services { padding:8vh 6vw 10vh; }
}



/* ===== 探索世界按钮 + 弹出菜单 ===== */
.explore-wrap {
  text-align:left;
}
.explore-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 32px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(12px);
  color:#fff; font-size:16px; font-weight:600; letter-spacing:2px;
  cursor:pointer;
  transition:transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.explore-btn:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  transform:translateY(-2px);
}
.explore-icon { font-size:18px; opacity:.9; }
.explore-caret { font-size:10px; opacity:.7; transition:transform .3s var(--ease); }
.explore-wrap.open .explore-caret { transform:rotate(180deg); }

/* 菜单：用 visibility+opacity+transform 过渡实现展开动效（transition 比 animation 更稳，保证播放） */
.explore-menu {
  position:relative; z-index:5;
  margin-top:16px;
  max-width:340px;
  padding:10px;
  background:rgba(16,22,32,.92);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:6px;
  visibility:hidden; opacity:0; transform:translateY(-10px) scale(.97);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.explore-wrap.open .explore-menu {
  visibility:visible; opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}

/* 每条入口：默认隐藏，展开时靠 transition-delay 逐项错峰浮现（stagger） */
.explore-item {
  display:flex; align-items:center; gap:14px;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none; color:#fff;
  opacity:0; transform:translateX(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .2s;
}
.explore-wrap.open .explore-item { opacity:1; transform:translateX(0); }
.explore-wrap.open .explore-item:nth-child(1){ transition-delay:.08s; }
.explore-wrap.open .explore-item:nth-child(2){ transition-delay:.18s; }
.explore-wrap.open .explore-item:nth-child(3){ transition-delay:.28s; }
.explore-wrap.open .explore-item:nth-child(4){ transition-delay:.38s; }
.explore-item:hover { background:rgba(255,255,255,.1); }

.x-icon {
  flex:none; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
}
.x-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.x-name { font-size:15px; font-weight:600; letter-spacing:.5px; }
.x-desc { font-size:12px; opacity:.65; }


/* ===== 全屏加载动画（preloader）===== */
#loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(28,72,110,.9), rgba(8,22,38,.98) 70%),
    #0a1626;
  transition: opacity .6s ease, visibility .6s ease;
}
#loader.done{ opacity:0; visibility:hidden; }

.loader-inner{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  animation:loaderIn .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes loaderIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* 旋转光环 */
.loader-ring{
  position:relative; width:120px; height:120px;
  display:flex; align-items:center; justify-content:center;
}
.loader-ring::before,
.loader-ring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent;
}
.loader-ring::before{
  border-top-color:rgba(118,215,196,.9); border-right-color:rgba(118,215,196,.25);
  animation:spin 1.1s linear infinite;
}
.loader-ring::after{
  inset:14px;
  border-bottom-color:rgba(141,129,255,.9); border-left-color:rgba(141,129,255,.25);
  animation:spin 1.6s linear infinite reverse;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 中心光点(呼吸) */
.loader-core{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #d6fff5, #4fc3e8 55%, #1c466e);
  box-shadow:0 0 22px rgba(118,215,196,.8), 0 0 50px rgba(79,195,232,.5);
  animation:corePulse 1.6s ease-in-out infinite;
}
@keyframes corePulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%    { transform:scale(1.22); opacity:.85; }
}

/* 标题 */
.loader-title{
  font-size:21px; font-weight:800; letter-spacing:5px;
  background:linear-gradient(90deg,#9fe8ff,#76d7c4,#8d81ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:titleShift 2.4s ease-in-out infinite;
}
@keyframes titleShift{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(118,215,196,.35)); }
  50%    { filter:drop-shadow(0 0 16px rgba(118,215,196,.85)); }
}

/* 进度条光带 */
.loader-bar{
  width:190px; height:3px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.1);
}
.loader-bar i{
  display:block; height:100%; width:40%;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,#76d7c4,#8d81ff,transparent);
  animation:barSweep 1.3s ease-in-out infinite;
}
@keyframes barSweep{
  0%  { transform:translateX(-120%); }
  100%{ transform:translateX(320%); }
}

/* 副标题 */
.loader-sub{
  font-size:11px; letter-spacing:2.5px; color:rgba(214,255,245,.55);
  animation:subFade 1.4s ease 0.3s both;
}
@keyframes subFade{ from{ opacity:0; } to{ opacity:1; } }

/* ===== 高端交互增强（polish）===== */

/* 探索按钮：hover 光扫 */
.explore-btn{ position:relative; overflow:hidden; isolation:isolate; }
.explore-btn::before{
  content:""; position:absolute; top:0; bottom:0; left:-60%;
  width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  opacity:0; pointer-events:none;
  transition:opacity .3s;
  z-index:0;
}
.explore-btn:hover::before{
  opacity:1; animation:btnSweep .9s ease forwards;
}
@keyframes btnSweep{
  0%  { left:-60%; }
  100%{ left:130%; }
}
.explore-btn > *{ position:relative; z-index:1; }

/* 探索菜单项：hover 浮起 + 边框辉光 */
.explore-item{
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .2s, box-shadow .25s, border-color .25s;
  border:1px solid transparent;
}
.explore-wrap.open .explore-item:hover{
  transform:translateX(6px) translateY(-2px);
  background:rgba(118,215,196,.08);
  border-color:rgba(118,215,196,.35);
  box-shadow:0 8px 30px rgba(72,201,176,.25);
}
.explore-wrap.open .explore-item:hover .x-icon{
  background:rgba(118,215,196,.18);
  border-color:rgba(118,215,196,.5);
}
.x-icon{ transition:background .25s, border-color .25s, box-shadow .25s; }