/* ==========================================================
   cute.ddns.ge — 首页封面
   马卡龙 / 奶油 / 大留白，以及一点点说不清的地方
   ========================================================== */

:root{
  --cream:#fffaf4;
  --pink:#ff9ec4;
  --pink-soft:#ffd6e8;
  --pink-deep:#e4739f;
  --mint:#a8e6cf;
  --lilac:#cdc6ff;
  --butter:#ffe9a8;
  --ink:#4a3f4a;
  --ink-soft:#8a7a86;
  --ink-faint:#bdadb8;
  --line:rgba(122,96,116,.14);
  --card:#fffdfb;
  --radius:22px;
  --shadow:0 20px 44px -26px rgba(154,102,131,.55);
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
}

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

html,body{ margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100%;
  overflow-x:hidden;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -8%, #ffeaf3 0%, rgba(255,234,243,0) 62%),
    radial-gradient(1000px 620px at 92% 4%, #ece8ff 0%, rgba(236,232,255,0) 60%),
    linear-gradient(178deg,#fff8fb 0%, #fffaf4 48%, #f6f2ff 100%);
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 背景：奶油团与光晕 ---------- */

.sky{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }

.blob{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(46px);
  opacity:.6;
}

.blob-a{ width:46vmax; height:46vmax; left:-14vmax; top:-16vmax; background:#ffd7e8; }
.blob-b{ width:38vmax; height:38vmax; right:-12vmax; top:6vmax; background:#ded9ff; opacity:.5; }
.blob-c{ width:42vmax; height:42vmax; left:34%; bottom:-24vmax; background:#d8f5ea; opacity:.45; }

.halo{
  position:absolute;
  left:50%; top:8vmax;
  width:34vmax; height:34vmax;
  margin-left:-17vmax;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 68%);
}

/* ---------- 飘浮的小爱心 ---------- */

.floats{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:1; }

.fl{
  position:absolute;
  color:#ffb3d2;
  opacity:.5;
  text-shadow:0 6px 14px rgba(233,143,183,.35);
  animation:drift 14s ease-in-out infinite;
}

.fl-1{ left:8%;  top:74%; font-size:22px; animation-duration:15s; }
.fl-2{ left:19%; top:38%; font-size:15px; animation-duration:19s; animation-delay:-4s; }
.fl-3{ left:31%; top:86%; font-size:18px; animation-duration:17s; animation-delay:-9s; }
.fl-4{ right:11%; top:66%; font-size:24px; animation-duration:16s; animation-delay:-2s; }
.fl-5{ right:22%; top:30%; font-size:14px; animation-duration:21s; animation-delay:-7s; }
.fl-6{ right:6%;  top:20%; font-size:17px; animation-duration:18s; animation-delay:-12s; }
.fl-7{ left:47%; top:12%; font-size:13px; animation-duration:22s; animation-delay:-5s; opacity:.38; }
.fl-8{ right:38%; top:88%; font-size:19px; animation-duration:20s; animation-delay:-11s; opacity:.42; }

@keyframes drift{
  0%   { transform:translate3d(0,0,0) rotate(-6deg); }
  35%  { transform:translate3d(10px,-26px,0) rotate(8deg); }
  70%  { transform:translate3d(-8px,-48px,0) rotate(-4deg); }
  100% { transform:translate3d(0,0,0) rotate(-6deg); }
}

/* ---------- 版心 ---------- */

.page{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:clamp(36px,7vw,84px) clamp(18px,4vw,40px) 56px;
}

/* ---------- Hero ---------- */

.hero{ text-align:center; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 auto 26px;
  padding:9px 20px 9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  color:var(--ink-soft);
  font-size:13.5px;
  letter-spacing:.06em;
  box-shadow:0 12px 30px -24px rgba(154,102,131,.9);
  backdrop-filter:blur(6px);
}

.eyebrow-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px rgba(168,230,207,.32);
  animation:dotSlow 5.6s ease-in-out infinite;
}

@keyframes dotSlow{
  0%,100%{ opacity:1; }
  48%    { opacity:1; }
  52%    { opacity:.35; }  /* 呼吸里少了一口气 */
  62%    { opacity:1; }
}

.mono-flicker{
  font-variant-numeric:tabular-nums;
  animation:flicker 9.5s linear infinite;
}

@keyframes flicker{
  0%,100%{ opacity:1; }
  71%    { opacity:1; }
  71.6%  { opacity:.42; }
  72.2%  { opacity:1; }
  73%    { opacity:.72; }
  73.8%  { opacity:1; }
}

/* 吉祥物 */

.mascot-wrap{
  position:relative;
  width:min(300px,74vw);
  margin:6px auto 4px;
}

.bubble{
  position:absolute;
  top:-6px; left:50%;
  transform:translate(-50%,-100%);
  margin:0;
  padding:8px 16px;
  white-space:nowrap;
  border-radius:16px 16px 16px 4px;
  background:#fffdfb;
  border:1px solid var(--line);
  color:var(--ink-soft);
  font-size:13.5px;
  box-shadow:0 14px 26px -22px rgba(154,102,131,.95);
}

.mascot{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 26px 30px rgba(190,140,168,.28));
  animation:breathe 6.4s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-5px) scale(1.012); }
}

.ear-r{ transform-origin:170px 60px; animation:earTick 11s ease-in-out infinite; }

@keyframes earTick{
  0%,88%,100%{ transform:rotate(0deg); }
  90%        { transform:rotate(-4.5deg); }
  92%        { transform:rotate(0deg); }
}

.mmouth{ transform-origin:120px 132px; animation:mouthTwitch 8.5s ease-in-out infinite; }

@keyframes mouthTwitch{
  0%,90%,100%{ transform:translateY(0) scaleX(1); }
  92%        { transform:translateY(.8px) scaleX(.94); }
  94%        { transform:translateY(0) scaleX(1); }
}

.whisk{ opacity:.85; }

.mascot-note{
  margin:10px 0 0;
  text-align:center;
  color:var(--ink-faint);
  font-size:12px;
  letter-spacing:.14em;
}

/* 标题与口号 */

.title{
  margin:18px 0 6px;
  font-size:clamp(40px,8.6vw,80px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:.06em;
  background:linear-gradient(96deg,#ff9dc2 0%,#f38fbb 34%,#b9a8ff 74%,#8fd8c4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:titlePulse 12s ease-in-out infinite;
}

@keyframes titlePulse{
  0%,100%{ opacity:1; }
  63%    { opacity:1; }
  64.2%  { opacity:.9; }
  65.4%  { opacity:1; }
}

.slogan{
  margin:14px auto 0;
  max-width:36em;
  color:var(--pink-deep);
  font-size:clamp(16px,2.4vw,21px);
  font-weight:600;
  letter-spacing:.05em;
}

.lede{
  margin:16px auto 0;
  max-width:30em;
  color:var(--ink-soft);
  font-size:clamp(14px,1.9vw,16px);
}

/* ---------- 用户区（$user_block 自带 class） ---------- */

.entry{
  margin:clamp(26px,4vw,38px) auto 0;
  max-width:640px;
}

.ub-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.ub-user{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border-radius:999px;
  background:linear-gradient(180deg,#fffdfb 0%,#fff2f8 100%);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:0 14px 30px -24px rgba(154,102,131,.95);
}

.ub-link,
.ub-btn-primary,
.ub-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 28px;
  border-radius:999px;
  border:0;
  font-family:var(--font);
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.ub-btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#ffb0d2 0%,#ff8fbc 52%,#f879ab 100%);
  box-shadow:0 18px 30px -18px rgba(233,109,158,.95);
}

.ub-btn-primary:hover,
.ub-btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 22px 34px -16px rgba(233,109,158,.95);
}

.ub-btn-ghost{
  color:var(--pink-deep);
  background:#fffdfb;
  border:1.5px solid #ffc8de;
}

.ub-btn-ghost:hover,
.ub-btn-ghost:focus-visible{
  background:#fff4fa;
  transform:translateY(-2px);
}

.ub-link{
  min-height:auto;
  padding:6px 12px;
  color:var(--ink-soft);
  background:transparent;
  font-weight:600;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:5px;
}

.ub-link:hover,
.ub-link:focus-visible{ color:var(--pink-deep); }

/* ---------- 一句很轻的话 ---------- */

.whisper{
  margin:22px auto 0;
  color:var(--ink-faint);
  font-size:12.5px;
  letter-spacing:.22em;
  opacity:.78;
}

/* ---------- 心跳（偶尔少一拍） ---------- */

.beat{
  display:flex;
  justify-content:center;
  margin:clamp(34px,6vw,58px) 0 0;
}

.beat-heart{
  display:block;
  font-size:26px;
  color:#ff9dc2;
  text-shadow:0 10px 22px rgba(233,143,183,.45);
  animation:beat 3.6s cubic-bezier(.3,.7,.4,1) infinite;
}

@keyframes beat{
  0%   { transform:scale(1); }
  10%  { transform:scale(1.16); }
  20%  { transform:scale(1); }
  30%  { transform:scale(1.11); }
  40%  { transform:scale(1); }
  /* 60% 附近本该有第三下，但它没有来 */
  58%  { transform:scale(1); }
  62%  { transform:scale(1.05); }
  68%  { transform:scale(1); }
  100% { transform:scale(1); }
}

/* ---------- 数字 ---------- */

.stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,4vw,44px);
  margin:clamp(20px,4vw,34px) auto 0;
  padding:22px clamp(18px,4vw,40px);
  border-radius:var(--radius);
  background:rgba(255,255,255,.66);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

.stat{ display:flex; flex-direction:column; align-items:center; min-width:96px; }

.stat-num{
  font-size:clamp(26px,5vw,40px);
  font-weight:800;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

.num-blink{ animation:numBlink 6.8s linear infinite; }

@keyframes numBlink{
  0%,100%{ opacity:1; transform:translateX(0); }
  47%    { opacity:1; transform:translateX(0); }
  47.8%  { opacity:.5; transform:translateX(-1px); }
  48.6%  { opacity:1; transform:translateX(1px); }
  49.4%  { opacity:.82; transform:translateX(0); }
  50.4%  { opacity:1; transform:translateX(0); }
}

.stat-label{
  margin-top:4px;
  color:var(--ink-soft);
  font-size:12.5px;
  letter-spacing:.16em;
}

.stat-sep{ color:var(--pink-soft); font-size:20px; }

/* ---------- 板块卡片 ---------- */

.board{ margin:clamp(48px,8vw,86px) 0 0; text-align:center; }

.board-title{
  margin:0;
  font-size:clamp(21px,3.4vw,28px);
  font-weight:800;
  letter-spacing:.1em;
  color:var(--ink);
}

.board-sub{
  margin:8px 0 0;
  color:var(--ink-faint);
  font-size:13px;
  letter-spacing:.16em;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px,2.4vw,22px);
  margin:clamp(24px,4vw,38px) 0 0;
  padding:0;
  list-style:none;
  text-align:left;
}

.card{
  position:relative;
  padding:26px 24px 22px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease;
}

.card:hover{ transform:translateY(-4px); }

.card-1{ background:linear-gradient(180deg,#fffdfb 0%,#fff6e6 100%); }
.card-2{ background:linear-gradient(180deg,#fffdfb 0%,#eefaf4 100%); }
.card-3{ background:linear-gradient(180deg,#fffdfb 0%,#f6f3ff 100%); }

.card-4{
  border-radius:21px;
  transform:translate(2px,-2px);
  box-shadow:-7px -9px 0 -3px rgba(255,209,227,.85);
  background:linear-gradient(180deg,#fffdfb 0%,#fff0f6 100%);
}

.card-4:hover{ transform:translate(2px,-6px); }

.card-emoji{ font-size:24px; line-height:1; display:block; }

.card-name{
  margin:12px 0 8px;
  font-size:17px;
  font-weight:800;
  letter-spacing:.04em;
}

.card-text{
  margin:0;
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.85;
}

.card-tag{
  display:inline-block;
  margin-top:14px;
  padding:3px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  color:var(--ink-faint);
  font-size:11.5px;
  letter-spacing:.14em;
}

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

.foot{
  margin:clamp(48px,8vw,86px) auto 0;
  padding-top:26px;
  border-top:1px solid var(--line);
  text-align:center;
}

.foot-main{
  margin:0 0 10px;
  color:var(--pink-deep);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.1em;
}

.foot-line{
  margin:4px 0;
  color:var(--ink-soft);
  font-size:12.5px;
  letter-spacing:.12em;
}

.foot-dim{ color:var(--ink-faint); opacity:.72; }

/* ---------- 响应式 ---------- */

@media (max-width:1040px){
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .card-4{ transform:translate(2px,-2px); }
}

@media (max-width:720px){
  .page{ padding:32px 18px 44px; }

  .eyebrow{
    max-width:100%;
    font-size:12px;
    letter-spacing:.02em;
    padding:8px 14px;
  }

  .mascot-wrap{ width:min(230px,68vw); }

  .bubble{
    font-size:12px;
    padding:7px 13px;
    white-space:normal;
    width:max-content;
    max-width:78vw;
    text-align:center;
  }

  .title{ font-size:clamp(34px,12vw,52px); letter-spacing:.04em; }

  .ub-wrap{ gap:10px; }

  .ub-user{ width:100%; justify-content:center; }

  .ub-btn-primary,
  .ub-btn-ghost,
  .ub-link{
    flex:1 1 46%;
    min-height:48px;
    padding:0 16px;
    font-size:15px;
  }

  .ub-link{ flex:1 1 100%; }

  .whisper{ letter-spacing:.14em; }

  .stats{ gap:10px 18px; padding:18px 14px; }

  .stat{ min-width:74px; }

  .stat-sep{ display:none; }

  .cards{ grid-template-columns:1fr; gap:14px; }

  .card{ padding:22px 20px 18px; }

  .card-4{ transform:none; box-shadow:var(--shadow); border-radius:var(--radius); }

  .foot-main{ letter-spacing:.06em; }

  .fl-2,.fl-5,.fl-7{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .card-4{ transform:translate(2px,-2px); }
}