/* ============================================================
   zhehe.eu.cc — Liquid Glass
   布局：行1 三卡（4/12） / 行2 四卡（3/12）
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  min-height:100vh;
  background:#eef2f7;
  color:#1a1a1a;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
  position:relative;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 背景彩色 ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 15% 10%, rgba(147,197,253,.55), transparent),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(216,180,254,.5), transparent),
    radial-gradient(ellipse 65% 55% at 50% 95%, rgba(251,207,232,.55), transparent),
    radial-gradient(ellipse 50% 45% at 95% 85%, rgba(153,246,228,.45), transparent);
}

.blobs{position:fixed;inset:0;z-index:0;overflow:hidden;filter:blur(100px);opacity:.6;pointer-events:none}
.blob{position:absolute;border-radius:50%;animation:float 24s ease-in-out infinite}
.blob:nth-child(1){width:520px;height:520px;background:#93c5fd;top:-10%;left:-8%}
.blob:nth-child(2){width:460px;height:460px;background:#d8b4fe;top:20%;right:-10%;animation-delay:-7s}
.blob:nth-child(3){width:480px;height:480px;background:#fbcfe8;bottom:-15%;left:25%;animation-delay:-13s}
.blob:nth-child(4){width:380px;height:380px;background:#99f6e4;bottom:5%;right:20%;animation-delay:-4s}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-60px) scale(1.1)}
  66%{transform:translate(-30px,40px) scale(.95)}
}

/* ---------- 容��� ---------- */
.container{width:100%;max-width:1000px;position:relative;z-index:2}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:#475569}
.brand-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#a78bfa);box-shadow:0 0 10px rgba(139,92,246,.5)}
.time{font-size:12px;letter-spacing:.06em;color:#94a3b8;font-variant-numeric:tabular-nums}

.hero{margin-bottom:32px}
.hero h1{
  font-size:clamp(34px,5vw,50px);
  font-weight:700;letter-spacing:-.03em;line-height:1.06;
  background:linear-gradient(90deg,#0f172a 0%,#3b82f6 30%,#8b5cf6 60%,#0f172a 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:shimmer 10s linear infinite;
  margin-bottom:10px;
}
@keyframes shimmer{to{background-position:250% 0}}
.hero p{font-size:15px;color:#64748b;line-height:1.6;max-width:520px}

/* ---------- Bento 网格 ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:176px;
  gap:14px;
}

.c-pc,.c-mobile,.c-dsh{grid-column:span 4}
.c-budget,.c-astro,.c-snow,.c-vnc{grid-column:span 3}

/* ---------- 卡片 ---------- */
.card{
  position:relative;
  display:flex;flex-direction:column;
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 28px rgba(15,23,42,.05);
  text-decoration:none;color:inherit;
  overflow:hidden;
  transition:transform 1s cubic-bezier(.34,1.56,.64,1),
             background .5s ease,
             box-shadow .65s ease,
             border-color .5s ease;
  will-change:transform;
}

/* 入场（用 outline+opacity，动画结束后 JS 清掉 animation 让 transform 可被 hover 用） */
.card.in{
  opacity:0;
  animation:cardIn .6s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:var(--d,0s);
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}

/* hover —— 用 :not(.no-hover) 确保能覆盖 */
.card:hover{
  transform:translateY(-6px) scale(1.018) !important;
  background:rgba(255,255,255,.75) !important;
  border-color:rgba(255,255,255,1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 26px 60px rgba(15,23,42,.16),
    0 0 0 1px rgba(255,255,255,.6) !important;
}

/* ---------- 图标 ---------- */
.card-icon{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  border-radius:13px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 2px 6px rgba(15,23,42,.05);
  margin-bottom:14px;
  transition:transform .5s cubic-bezier(.25,.8,.25,1);
}
.card:hover .card-icon{transform:scale(1.08)}

/* ---------- 文字 ---------- */
.card-body{flex:1;min-width:0;display:flex;flex-direction:column}
.card-name{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#0f172a;margin-bottom:4px}
.card-desc{font-size:12.5px;color:#64748b;line-height:1.5}
.card-link{
  margin-top:auto;padding-top:12px;
  font-size:11px;font-weight:500;letter-spacing:.03em;
  color:#94a3b8;font-family:ui-monospace,monospace;
  transition:color .3s;
}
.card:hover .card-link{color:#3b82f6}

/* ---------- 状态 / 外链 ---------- */
.card-status{position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:#cbd5e1;transition:all .3s}
.dot.on{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.7)}
.dot.off{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.7)}

.card-ext{position:absolute;top:18px;right:18px;font-size:14px;color:#cbd5e1;transition:all .3s}
.card:hover .card-ext{color:#64748b;transform:translate(2px,-2px)}

/* ---------- 鼠标高光 ---------- */
.card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.15) 22%,
    transparent 48%);
  opacity:0;transition:opacity .5s ease;
  pointer-events:none;border-radius:inherit;z-index:3;
  mix-blend-mode:overlay;
}
.card:hover::after{opacity:1}

/* ---------- 点击涟漪 ---------- */
.ripple{
  position:absolute;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.8);
  transform:translate(-50%,-50%) scale(0);
  animation:ripple .7s ease-out forwards;
  pointer-events:none;z-index:4;
}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(16);opacity:0}}

/* ---------- 底部 ---------- */
.footer{
  margin-top:32px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.06em;color:#94a3b8;
}

/* ---------- 开屏 ---------- */
#splash{
  position:fixed;inset:0;z-index:9999;
  background:#eef2f7;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .75s ease, filter .75s ease;
}
#splash.hide{opacity:0;filter:blur(20px);pointer-events:none}
#splash.hide .splash-core{transform:scale(36);opacity:.12;transition:transform 1s cubic-bezier(.4,0,.2,1),opacity 1s}
#splash.hide .splash-ring,
#splash.hide .splash-text,
#splash.hide .splash-bar{opacity:0;transition:opacity .35s}

.splash-wrap{text-align:center}
.splash-logo{position:relative;width:76px;height:76px;margin:0 auto 26px}
.splash-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;
  border-top-color:#3b82f6;border-right-color:#8b5cf6;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.splash-core{
  position:absolute;inset:17px;border-radius:50%;
  background:linear-gradient(135deg,#60a5fa,#a78bfa);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.85;box-shadow:0 0 0 0 rgba(139,92,246,.4)}
  50%{transform:scale(1.12);opacity:1;box-shadow:0 0 24px 4px rgba(139,92,246,.25)}
}
.splash-text{
  font-size:12px;letter-spacing:.35em;text-transform:uppercase;
  color:#64748b;animation:fadeup .8s ease .2s both;
}
.splash-bar{
  width:130px;height:2px;margin:20px auto 0;
  background:rgba(0,0,0,.06);overflow:hidden;border-radius:2px;
}
.splash-bar span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#60a5fa,#a78bfa,#f472b6);
  animation:load 1.7s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes load{from{width:0}to{width:100%}}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* 页面元素淡入 */
.container{opacity:0}
body.loaded .container{opacity:1;transition:opacity .2s}
body.loaded .topbar{animation:contentIn .7s cubic-bezier(.4,0,.2,1) .05s both}
body.loaded .hero{animation:contentIn .7s cubic-bezier(.4,0,.2,1) .1s both}
body.loaded .footer{animation:contentIn .7s cubic-bezier(.4,0,.2,1) .5s both}
@keyframes contentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---------- 响应式 ---------- */
@media(max-width:860px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .c-pc,.c-mobile,.c-dsh{grid-column:span 3}
  .c-budget,.c-astro,.c-snow,.c-vnc{grid-column:span 3}
}
@media(max-width:520px){
  body{padding:28px 16px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .c-pc,.c-mobile,.c-dsh,.c-budget,.c-astro,.c-snow,.c-vnc{grid-column:span 1}
  .hero{margin-bottom:24px}
  .card{padding:20px}
}