/* ============ XZCLOUD · 全站视觉基底 ============ */
/*
 * 设计语言：白色简约 + 动态玻璃（Dynamic Glass）
 *  - Tailwind CDN 负责布局/间距，本文件负责玻璃、动画与组件外观
 *  - 所有页面共享：.glass / .glass-strong / .fade-up / .pop-in / .float
 */
:root{
  --primary:#12b7f5; --primary-d:#0ea5dd; --primary-l:#e6f5fe;
  --bg:#eef2f7; --text:#191919; --muted:#8a8f99; --border:#e6e8eb;
  /* 玻璃层 */
  --glass-bg:rgba(255,255,255,.72);
  --glass-bg-strong:rgba(255,255,255,.86);
  --glass-bg-soft:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.65);
  --glass-brd-2:rgba(226,232,240,.75);
  --glass-shadow:0 8px 32px rgba(31,38,135,.08);
  --glass-blur:18px;
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}

/* ---------- 玻璃拟态 ---------- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.glass-strong{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-brd);
  box-shadow:0 16px 48px rgba(31,38,135,.14);
}
.glass-soft{
  background:var(--glass-bg-soft);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-brd-2);
}
/* 顶部高光（玻璃质感） */
.glass-hi{position:relative;overflow:hidden}
.glass-hi::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  pointer-events:none;
}

/* ---------- 背景光斑 ---------- */
.bg-blob{position:fixed;border-radius:50%;filter:blur(90px);opacity:.55;z-index:0;pointer-events:none;will-change:transform}
.blob-1{width:520px;height:520px;background:#cdeafd;top:-170px;right:-130px;animation:drift1 22s ease-in-out infinite}
.blob-2{width:440px;height:440px;background:#e3e0fd;bottom:-150px;left:-150px;animation:drift2 26s ease-in-out infinite}
.blob-3{width:380px;height:380px;background:#d7f7ea;top:42%;left:52%;animation:drift3 30s ease-in-out infinite}

/* ---------- 动画 ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.965)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-34px,26px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-24px)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,-30px) scale(1.08)}}
@keyframes shine{0%{background-position:-220% 0}60%,100%{background-position:220% 0}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(18,183,245,.45)}70%{box-shadow:0 0 0 14px rgba(18,183,245,0)}100%{box-shadow:0 0 0 0 rgba(18,183,245,0)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

.fade-up{animation:fadeUp .58s var(--ease) both}
.fade-in{animation:fadeIn .4s ease both}
.pop-in{animation:popIn .3s var(--ease) both}
.slide-down{animation:slideDown .28s var(--ease) both}
.float{animation:floatY 5.5s ease-in-out infinite}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}
.d4{animation-delay:.24s}.d5{animation-delay:.3s}.d6{animation-delay:.36s}
.d7{animation-delay:.42s}.d8{animation-delay:.48s}

/* 渐变文字（主标题） */
.grad-text{
  background:linear-gradient(100deg,#0ea5dd,#12b7f5 35%,#7c8ff5 70%,#8b5cf6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;
  animation:shine 6s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}