/* ==========================================================================
   样式表 —— 目前只保留背景系统
   内容相关的样式（导航、卡片、按钮、玻璃材质、时间轴、跑马灯…）已全部清空。

   ▸ 换色调：改下面 :root 里的 --sakura-* / --lav-*
   ▸ 背景 5 层的说明见文件末尾「背景系统」一节
   ========================================================================== */

:root{
  /* ---------- 樱花粉 ---------- */
  --sakura-50:  #fff6fa;
  --sakura-100: #ffe9f2;
  --sakura-200: #ffd5e5;
  --sakura-300: #ffb8d2;
  --sakura-400: #ff93b6;
  --sakura-500: #ff6fa0;
  --sakura-600: #f7468a;
  --rose:       #ff3d82;

  /* ---------- 薰衣草紫 ---------- */
  --lav-300: #e3c4f7;
  --lav-400: #c79bf0;
  --lav-500: #b07ce8;

  /* ---------- 暖色点缀 ---------- */
  --peach: #ffd9c0;

  /* ---------- 光标辉光（淡淡的浅蓝） ----------
     三档控制光晕从中心向外怎么衰减，想更淡就调小 alpha */
  --glow-core: rgba(122,196,255,.52);   /* 中心：清楚的浅蓝 */
  --glow-mid:  rgba(150,214,255,.26);   /* 中段：开始化开 */
  --glow-edge: rgba(190,230,255,.10);   /* 外圈：几乎只剩一层雾 */
  --glow-size: 230px;                   /* 光晕直径（原来 460px，缩小一半） */

  /* ---------- 文字 ---------- */
  --ink:       #3a2742;
  --ink-soft:  #7c6385;
  --ink-faint: #a892ad;

  /* ---------- 渐变 ---------- */
  --grad:      linear-gradient(120deg, var(--sakura-600), var(--lav-500));
  --grad-warm: linear-gradient(120deg, var(--sakura-500), #ff9ec4 55%, var(--lav-400));

  /* ---------- 字体 ---------- */
  --font: "Quicksand", "Baloo 2", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Baloo 2", "Quicksand", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", system-ui, sans-serif;

  /* ---------- 玻璃材质 / 描边 / 阴影 ---------- */
  --card:       rgba(255,255,255,.62);   /* 药丸导航的玻璃底 */
  --card-solid: rgba(255,255,255,.82);   /* 滚动后变实，文字更清楚 */
  --line:       rgba(255,143,177,.28);
  --line-soft:  rgba(255,143,177,.45);
  --shadow-sm:  0 10px 30px -18px rgba(247,70,138,.40);
  --shadow:     0 18px 50px -18px rgba(247,70,138,.42);

  /* ---------- 圆角 / 宽度 ---------- */
  --r-lg: 30px;
  --r-md: 22px;
  --wrap: 1180px;
}

/* ---------------------------------------------------------------- 基础重置 */

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

html{
  -webkit-text-size-adjust:100%;
  background:#fff8fb;          /* 背景层的最底层兜底色 */
  scroll-behavior:smooth;
  scroll-padding-top:104px;    /* 锚点跳转时给悬浮导航留出空档 */
  /* 一直预留滚动条的位置：开屏动画锁滚动时就不会因为滚动条消失而整页横移 */
  scrollbar-gutter:stable;
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  font-size:17px;
  font-weight:500;
  line-height:1.8;
  color:var(--ink);
  background:transparent;      /* 必须透明，否则会盖住 z-index 为负的背景层 */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* 列表重置。浏览器给 ul/ol 默认 40px 左内边距 + 圆点标记，
   不重置的话整块内容会被往右推 40px、居中也会失败（踩过一次） */
ul,ol{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }
figure,blockquote{ margin:0; }

:focus-visible{
  outline:3px solid var(--rose);
  outline-offset:3px;
  border-radius:8px;
}

::selection{ background:var(--sakura-200); color:var(--ink); }

/* 键盘用户可见的跳转入口 */
.skip-link{
  position:absolute; left:50%; top:-64px;
  transform:translateX(-50%);
  z-index:100;
  padding:10px 22px;
  background:var(--grad);
  color:#fff;
  border-radius:0 0 16px 16px;
  font-size:14px; font-weight:700;
  transition:top .2s ease;
}
.skip-link:focus{ top:0; }

/* ============================================================ 背景系统
   5 层，全部 fixed 且不吃鼠标事件
   -4 底色渐变 │ -3 光斑 │ -2 星点 │ -1 花瓣 │ -1 光标辉光
   ========================================================================== */

.bg{
  position:fixed; inset:0;
  z-index:-4;
  background:linear-gradient(180deg, #fff8fb 0%, #fff1f7 38%, #ffe9f3 100%);
}

/* 三个大光斑：模糊 + 相乘混合，彼此重叠处颜色会加深，形成自然的色晕 */
.blobs{
  position:fixed; inset:0;
  z-index:-3;
  overflow:hidden;
  filter:blur(8px);
  mix-blend-mode:multiply;
  pointer-events:none;
}

.blob{
  position:absolute;
  border-radius:50%;
  opacity:.55;
  animation:drift 26s ease-in-out infinite;
}
.blob.b1{
  width:42vw; height:42vw;
  left:-8vw; top:-6vw;
  background:radial-gradient(circle at 30% 30%, #ffc3dd, transparent 70%);
}
.blob.b2{
  width:38vw; height:38vw;
  right:-6vw; top:8vw;
  background:radial-gradient(circle at 60% 40%, #e3c4f7, transparent 70%);
  animation-delay:-8s;
}
.blob.b3{
  width:46vw; height:46vw;
  left:18vw; bottom:-16vw;
  background:radial-gradient(circle at 50% 50%, #ffd9c0, transparent 70%);
  animation-delay:-14s;
}

@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%    { transform:translate(4vw,3vh) scale(1.08); }
  66%    { transform:translate(-3vw,2vh) scale(.96); }
}

/* canvas 层：星点与花瓣，由 main.js 绘制 */
.fx-layer{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  display:block;
}
.fx-layer--sparkle{ z-index:-2; }
.fx-layer--petal  { z-index:-1; }

/* 跟随鼠标的浅蓝光晕。
   定位刻意不用 left/top —— 那会让每一帧都触发重排；
   这里用 transform，走 GPU 合成，鼠标再快也不会掉帧。
   位置由 main.js 每帧写进 translate3d。 */
.cursor-glow{
  position:fixed;
  left:0; top:0;
  z-index:-1;
  width:var(--glow-size);
  height:var(--glow-size);
  border-radius:50%;
  pointer-events:none;
  opacity:.8;
  background:radial-gradient(circle,
    var(--glow-core)  0%,
    var(--glow-mid)  28%,
    var(--glow-edge) 55%,
    transparent      76%);
  filter:blur(9px);
  transition:opacity .3s ease;
  /* 先摆到视口正中（两段 transform：先定位到点，再按自身尺寸回退一半） */
  transform:translate3d(50vw,50vh,0) translate(-50%,-50%);
  will-change:transform;
}
.cursor-glow[hidden]{ display:none; }

/* 触摸设备没有鼠标，辉光没有意义 */
@media (hover:none), (pointer:coarse){
  .cursor-glow{ display:none; }
}

/* ============================================================== 灵动岛导航

   一个悬浮的玻璃药丸：sticky 吸顶 + margin 撑开，所以它浮在内容之上，
   两侧留出空隙让背景透出来，而不是一条通栏的实心条。

   滚动后（.nav.is-scrolled）做两件事：
     1. margin-top 14px → 8px，药丸往上收一点，省出视野
     2. 玻璃底 rgba(255,255,255,.62) → .82，文字在内容上方更清楚
   ========================================================================== */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  /* 药丸与视口顶部的间距。刻意用 nav 的 padding 而不是药丸自己的 margin ——
     否则 margin 会和 sticky 父元素发生「外边距合并」被吸到父元素外面，
     滚动吸顶时父元素被钉在 top:0，这段间距就会整个消失，药丸直接贴到屏幕边缘。
     放在 padding 里，吸顶后间距依然保留。 */
  padding-top:14px;
  pointer-events:none;
  transition:padding-top .4s cubic-bezier(.2,.8,.3,1);
}

.nav.is-scrolled{ padding-top:8px; }   /* 滚动后往上收一点，省出视野 */

.nav-inner{
  pointer-events:auto;
  position:relative;                 /* 移动端下拉菜单的定位基准 */
  width:calc(100% - 28px);
  max-width:var(--wrap);
  margin:0 auto;
  padding:10px 12px 10px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--shadow-sm);
  transition:background .35s ease, box-shadow .35s ease;
}

.nav.is-scrolled .nav-inner{
  background:var(--card-solid);
  box-shadow:var(--shadow);
}

/* ---- 左边的品牌 ---- */

.nav-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-family:var(--font-head);
  font-weight:800;
  font-size:18px;
  color:var(--ink);
}
.nav-logo{
  position:relative;
  display:block;
  flex:none;
  width:34px; height:34px;
  border-radius:12px;
  /* overflow:hidden 让图片被圆角裁掉 */
  overflow:hidden;
  /* 兜底色，和图片的黑色底一致，图片没加载出来也不会露粉色 */
  background:#131314;
  box-shadow:0 8px 18px -8px rgba(247,70,138,.75);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}

/* 导航左上角和开屏动画共用同一张 logo、同一套取景规则 */
.logo-img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  /* 原图 456×375 是横版，cover 模式下宽度多出 18% 要裁掉。
     画面内容集中在横向 27%→91%（左边本来就是空的），
     所以取景靠右，裁掉的正好是空白，内容恰好落在中间。 */
  object-position:100% 50%;
}
.nav-brand:hover .nav-logo{ transform:rotate(20deg) scale(1.08); }
.nav-name{ white-space:nowrap; }

/* ---- 右边的链接 ---- */

.nav-links{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
}
.nav-links a{
  display:block;
  padding:9px 15px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{ color:var(--sakura-600); background:var(--sakura-100); }

/* 当前所在区块（由 main.js 根据滚动位置加 .is-active） */
.nav-links a.is-active{
  color:var(--sakura-600);
  background:var(--sakura-100);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* 强调按钮。注意要写在 .nav-links a:hover 之后，
   两者选择器权重相同(0,2,1)，靠顺序决定谁生效 —— 否则 hover 时
   会被上面那条通用的粉色背景规则盖掉渐变 */
.nav-links a.nav-cta{
  background:var(--grad);
  color:#fff;
  box-shadow:0 10px 22px -10px rgba(247,70,138,.75);
}
.nav-links a.nav-cta:hover{
  background:var(--grad);
  color:#fff;
  filter:brightness(1.07);
}

/* ---- 汉堡按钮（只在窄屏出现） ---- */

.nav-hamb{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  margin-left:auto;
  padding:11px 10px;
  background:var(--sakura-100);
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
}
.nav-hamb span{
  display:block;
  width:20px; height:2.4px;
  background:var(--sakura-600);
  border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
}
.nav-hamb[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
.nav-hamb[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-hamb[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }

/* ============================================================== 开屏动画

   照 s-yuri.tech 的做法：全屏渐变遮罩 → logo 从左侧滑入 → 打字机逐字打出
   名字 → 停一下 → 淡出。时序参数在 main.js 顶部的常量里。

   display 默认是 none，只有 .js 存在时才显示 —— 免得禁用 JS 的访客
   被一块永远不消失的遮罩挡在门外。
   ========================================================================== */

.welcome{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(135deg, var(--sakura-100), var(--lav-300));
  transition:opacity .8s ease;
}

.js .welcome{
  display:flex;
  /* 兜底：万一 main.js 没加载成功（网络挂了、脚本报错），
     6 秒后遮罩自己也淡出，不会把页面永久锁死 */
  animation:welcomeFailsafe .01s linear 6s forwards;
}
@keyframes welcomeFailsafe{
  to{ opacity:0; visibility:hidden; }
}

/* 开屏期间锁滚动。html 上有 scrollbar-gutter:stable，
   所以滚动条被藏起来时页面不会横向跳一下 */
html.no-scroll{ overflow:hidden; }

.welcome-content{
  display:flex;
  flex-direction:row-reverse;   /* 照参考站：logo 排在文字的右边 */
  align-items:center;
  justify-content:center;
  gap:20px;
}

.welcome-logo{
  position:relative;
  display:block;
  flex:none;
  width:80px; height:80px;
  border-radius:24px;
  /* 和导航那个一样：圆角裁掉图片四角 + 黑底兜底 */
  overflow:hidden;
  background:#131314;
  box-shadow:0 18px 40px -16px rgba(247,70,138,.8);
  /* 起始状态：藏在左边 100px 外，等 JS 加 .show 再滑进来 */
  opacity:0;
  transform:translateX(-100px);
  transition:opacity .6s cubic-bezier(.2,.9,.4,1.1),
             transform .6s cubic-bezier(.2,.9,.4,1.1);
}
.welcome-logo.show{ opacity:1; transform:translateX(0); }

.welcome-text{
  position:relative;            /* .welcome-live 的定位基准 */
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(2rem, 6vw, 3.5rem);
  line-height:1.15;
  white-space:nowrap;
}

/* 幽灵文字：内容就是最终完整的名字，但看不见。
   作用是先把宽度撑到最终大小 —— 否则逐字打出来时整组会越来越宽，
   logo 会被推着往右跑，看起来一直在抖。 */
.welcome-ghost{ visibility:hidden; }

/* 真正显示的那层，绝对定位盖在幽灵文字上，从左边开始长。
   left/right 都设 0 是为了让它占满最终宽度 —— 这样渐变文字的颜色
   从头到尾是固定的，不会随着字越打越多而整段重新渐变 */
.welcome-live{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  display:flex;
  align-items:center;
  white-space:nowrap;
  background:var(--grad);        /* 纯色兜底，见文件末尾的 @supports */
  color:var(--sakura-600);
}

/* 打字光标。渐变背景做成一条细竖线 */
.cursor{
  display:inline-block;
  flex:none;
  width:3px;
  height:1.1em;
  margin-left:4px;
  border-radius:3px;
  background:var(--grad-warm);
  animation:blink 1s step-end infinite;
}
@keyframes blink{
  0%,100%{ opacity:1; }
  50%    { opacity:0; }
}

@media (max-width:600px){
  .welcome-content{ flex-direction:column-reverse; gap:22px; }
  .welcome-logo{ width:64px; height:64px; border-radius:20px; }
  /* 竖排时从下往上滑入更自然 */
  .welcome-logo{ transform:translateY(60px); }
  .welcome-logo.show{ transform:translateY(0); }
}

/* ============================================================== 个人介绍

   首屏：头像 + 名字 + 一句话 + 两个按钮，竖直居中排列。
   关于：左边几段文字，右边一张小档案卡。
   ========================================================================== */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
  position:relative;
  z-index:1;
}

.section{ padding:80px 0; position:relative; }

/* ---- 通用玻璃材质 ---- */

.glass{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:var(--shadow-sm);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.glass:hover{
  background:var(--card-solid);
  border-color:var(--line-soft);
  box-shadow:var(--shadow);
}

/* ---- 按钮 ---- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 30px;
  border:2px solid transparent;
  border-radius:999px;
  font-family:inherit;
  font-size:15.5px;
  font-weight:700;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),
             box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }

.btn--primary{
  background:var(--grad);
  color:#fff;
  box-shadow:0 12px 28px -10px rgba(247,70,138,.7);
}
.btn--primary:hover{ box-shadow:0 18px 36px -12px rgba(247,70,138,.68); }

.btn--ghost{
  background:var(--card);
  border-color:var(--line-soft);
  color:var(--sakura-600);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  background:var(--card-solid);
  border-color:var(--sakura-400);
  color:var(--rose);
}

/* ================================================================ 首屏 */

.hero{ padding:56px 0 84px; }

.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.avatar-wrap{
  position:relative;
  display:grid;
  place-items:center;
  margin-bottom:28px;
}

/* 头像背后慢慢呼吸的渐变光晕 */
.avatar-halo{
  position:absolute;
  width:188px; height:188px;
  border-radius:50%;
  background:var(--grad-warm);
  filter:blur(22px);
  opacity:.55;
  animation:haloPulse 6s ease-in-out infinite;
}
@keyframes haloPulse{
  0%,100%{ transform:scale(1);    opacity:.5; }
  50%    { transform:scale(1.14); opacity:.72; }
}

.avatar{
  position:relative;
  display:block;
  width:128px; height:128px;   /* 原图 640×640，这里是 1/5 缩放，2 倍屏也清晰 */
  border-radius:50%;
  border:5px solid rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  object-fit:cover;
}

.hero-name{
  margin:0 0 8px;
  font-family:var(--font-head);
  font-size:clamp(34px, 6vw, 54px);
  font-weight:800;
  line-height:1.15;
  background:var(--grad);
  color:var(--sakura-600);     /* 纯色兜底，见文件末尾 @supports */
  padding-bottom:.08em;
}

.hero-handle{
  margin:0 0 22px;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:.09em;
  color:var(--ink-soft);
}

.hero-tagline{
  max-width:26em;
  margin:0 0 34px;
  font-size:17.5px;
  line-height:1.85;
  color:var(--ink-soft);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}

/* ================================================================ 关于 */

.section-head{ max-width:660px; margin-bottom:44px; }

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  padding:6px 16px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--sakura-600);
  box-shadow:var(--shadow-sm);
}

.about-panel{ padding:34px; }

/* ---- 分类：每个分类 = 一个小标题 + 一排按钮 ---- */

.group + .group{
  margin-top:28px;
  padding-top:26px;
  border-top:1px dashed var(--line);
}

.group-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-family:var(--font-head);
  font-size:19px;
  font-weight:800;
  color:var(--ink);
}

/* 标题前面一小段渐变色条 */
.group-title::before{
  content:"";
  flex:none;
  width:4px; height:19px;
  border-radius:2px;
  background:var(--grad);
}

/* 一排按钮。现在有分类标题了，所以左对齐读起来更像列表 */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* li 也做成 flex 容器：否则 li 里包一个 inline-flex 的 span 会产生行盒，
   受基线对齐影响，各个按钮的垂直位置会出现一两像素的差异 */
.chips li{ display:flex; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:12px 26px 12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid var(--line);
  font-family:inherit;
  font-size:16.5px;
  font-weight:700;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .32s cubic-bezier(.2,.8,.3,1),
             background .3s ease, border-color .3s ease,
             color .3s ease, box-shadow .32s ease;
}

/* 可展开的那个按钮（Roblox）。其余按钮只是标签，这个是真的能点 */
.chip-trigger{ cursor:pointer; }

/* 按钮右边的小箭头，指向"上面会弹出东西"。展开后翻过来 */
.chip-caret{
  flex:none;
  width:13px; height:13px;
  margin-left:-2px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .34s cubic-bezier(.2,.8,.3,1);
}
.chip-trigger[aria-expanded="true"] .chip-caret{ transform:rotate(180deg); }

/* ---- 展开出来的子按钮行 ----
   放在按钮行「上方」，展开时从下方 14px 处升上来 */

.sub-chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0 0 14px;
  padding-left:14px;
  /* 左侧一道竖线，表示这几个是从属于某个按钮的 */
  border-left:2px solid var(--line-soft);
  animation:subIn .34s cubic-bezier(.2,.8,.3,1);
}
.sub-chips[hidden]{ display:none; }

@keyframes subIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

.sub-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 17px 7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  font-size:14.5px;
  font-weight:700;
  color:var(--ink-soft);
  transition:transform .26s cubic-bezier(.2,.8,.3,1),
             background .26s ease, border-color .26s ease, color .26s ease;
}

/* 子按钮的图标：比主按钮的 22px 小一号 */
.sub-chip-icon{
  flex:none;
  display:block;
  width:17px; height:17px;
  border-radius:5px;
  object-fit:cover;
}

/* 外链标记 */
.sub-chip::after{
  content:"↗";
  font-size:12px;
  opacity:.65;
}
.sub-chip:hover{
  transform:translateY(-2px);
  background:var(--grad);
  border-color:transparent;
  color:#fff;
}
.sub-chip:hover::after{ opacity:1; }

/* 按钮前面的小图标。
   App 图标和行内 SVG 都做成 22px 圆角方形，形状保持一致 */
.chip-icon{
  flex:none;
  display:block;
  width:22px; height:22px;
  border-radius:6px;
  object-fit:cover;
}

/* 「写网页」那个是自己画的浏览器窗口，给它垫一层渐变底，
   这样和另外三个 App 图标的体量就一样了 */
.chip-icon--svg{
  padding:3px;
  background:var(--grad);
  color:#fff;
  transition:background .3s ease, color .3s ease;
}

.chip:hover{
  transform:translateY(-4px);
  background:var(--grad);
  border-color:transparent;
  color:#fff;
  box-shadow:0 16px 34px -12px rgba(247,70,138,.72);
}

/* 外链按钮（第五人格 + 三部番剧）：右边加一个外链标记，
   和 Roblox 那个「会展开」的箭头区分开 */
.chip--link{ cursor:pointer; }
.chip--link::after{
  content:"↗";
  flex:none;
  margin-left:-3px;
  font-size:12.5px;
  opacity:.5;
  transition:opacity .3s ease;
}
.chip--link:hover::after{ opacity:1; }
/* 悬停时按钮整体已经变成渐变了，图标得反过来才看得见 */
.chip:hover .chip-icon--svg{
  background:rgba(255,255,255,.24);
  color:#fff;
}

/* ==================================================== 待填占位样式

   虚线底边 + 浅灰字。目的是让"还没写"的地方一眼可辨，
   而不是看起来像已经定稿的文案。填上真内容时把 class 去掉即可。 */

.todo-line{
  color:var(--ink-faint) !important;
  border-bottom:2px dashed rgba(168,146,173,.45);
  padding-bottom:2px;
}

/* ==================================================== 临时占位区块（会删掉）
   只为了让页面能滚动、锚点能跳转，好验证导航的滚动收缩行为 */

.ph{
  min-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:120px 24px;
  text-align:center;
}
.ph-tag{
  padding:5px 15px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:13px;
  font-weight:700;
  color:var(--sakura-600);
}
.ph-title{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(24px, 3.6vw, 36px);
  font-weight:800;
  color:var(--ink);
}

/* --------------------------------------------------------- 渐变文字（渐进增强）

   开屏动画里的名字、首屏的姓名先给了 --sakura-600 纯色 + --grad 渐变背景作为兜底；
   只有确认浏览器支持 background-clip:text 时，才把文字改成透明让渐变透出来。
   这样在支持的浏览器里是漂亮的渐变字，不支持的也只是纯粉色，绝不会看不见。 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .welcome-live,
  .hero-name{
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

/* 右下角原来有一个动图挂件（.mascot），已按需求移除。
   想找回来的话：git show 2c3aaa2:assets/css/style.css
   （对应的 HTML 在 index.html 的 </main> 之后，JS 是 main.js 的第六节） */

/* ============================================================ 外链确认弹窗

   点任何外链都会先弹这个，确认后才真的跳走。
   z-index 200：在导航(50)之上，但在开屏遮罩(10000)之下。
   ========================================================================== */

.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }

.modal-mask{
  position:absolute;
  inset:0;
  background:rgba(58,39,66,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:modalFade .26s ease;
}

.modal-card{
  position:relative;
  width:min(430px, 100%);
  padding:30px 32px 24px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line);
  box-shadow:0 32px 80px -24px rgba(58,39,66,.5);
  animation:modalPop .34s cubic-bezier(.2,.9,.3,1.1);
}

@keyframes modalFade{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes modalPop{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to  { opacity:1; transform:none; }
}

.modal-kicker{
  margin:0 0 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sakura-600);
}
.modal-title{
  margin:0 0 12px;
  font-family:var(--font-head);
  font-size:22px;
  font-weight:800;
}
.modal-desc{
  margin:0 0 8px;
  font-size:15.5px;
  color:var(--ink-soft);
}
.modal-desc strong{
  color:var(--ink);
  word-break:break-all;
}
.modal-url{
  margin:0 0 22px;
  padding:9px 12px;
  border-radius:10px;
  background:var(--sakura-50);
  border:1px solid var(--line);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px;
  line-height:1.6;
  color:var(--ink-faint);
  word-break:break-all;
  max-height:4.8em;
  overflow:hidden;
}

/* 只有 Roblox 这类大陆直连打不开的站才显示这条。
   卡片会同时被加上 .has-note，用来收窄上面 URL 框的下边距 */
.modal-note{
  margin:0 0 20px;
  padding:11px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,217,192,.85), rgba(255,143,177,.30));
  border:1px solid var(--line);
  font-size:14px;
  line-height:1.62;
  color:var(--ink);
}
.modal-note[hidden]{ display:none; }
.modal-note strong{ font-weight:800; }

.modal-card.has-note .modal-url{ margin-bottom:14px; }

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.modal-actions .btn{
  padding:11px 24px;
  font-size:15px;
}

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

@media (max-width:760px){
  html{ scroll-padding-top:92px; }

  .section{ padding:60px 0; }
  .hero{ padding:40px 0 64px; }
  .section-head{ margin-bottom:34px; }

  .avatar{ width:112px; height:112px; }
  .avatar-halo{ width:164px; height:164px; }
  .avatar-wrap{ margin-bottom:22px; }
  .hero-tagline{ font-size:16.5px; margin-bottom:28px; }

  .about-panel{ padding:24px 20px; }
  .group + .group{ margin-top:22px; padding-top:20px; }
  .group-title{ font-size:17.5px; margin-bottom:13px; }
  .group-title::before{ height:17px; }
  .chips{ gap:10px; }
  .chip{ padding:10px 20px 10px 13px; font-size:15.5px; gap:9px; }
  .chip-icon{ width:20px; height:20px; border-radius:5px; }
  .sub-chips{ gap:8px; margin-bottom:12px; padding-left:11px; }
  .sub-chip{ padding:6px 14px 6px 9px; font-size:13.5px; gap:7px; }
  .sub-chip-icon{ width:15px; height:15px; border-radius:4px; }

  .modal{ padding:16px; align-items:flex-end; }
  .modal-card{ padding:24px 22px 20px; }
  .modal-title{ font-size:20px; }
  .modal-actions{ flex-direction:column-reverse; }
  .modal-actions .btn{ width:100%; }

  .nav-inner{ padding:9px 10px 9px 14px; gap:10px; }
  .nav-hamb{ display:flex; }

  /* 下拉菜单：贴在药丸下方，不占通栏 */
  .nav-links{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin-left:0;
    padding:12px;
    background:rgba(255,255,255,.95);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    backdrop-filter:blur(16px) saturate(150%);
    -webkit-backdrop-filter:blur(16px) saturate(150%);
    box-shadow:var(--shadow);
  }
  .nav-links.show{ display:flex; animation:navDrop .28s cubic-bezier(.2,.8,.3,1); }
  @keyframes navDrop{
    from{ opacity:0; transform:translateY(-10px); }
    to  { opacity:1; transform:none; }
  }
  .nav-links a{ padding:13px 16px; font-size:16px; border-radius:14px; }
  .nav-links a.nav-cta{ text-align:center; }
}

@media (max-width:400px){
  .nav-name{ display:none; }        /* 极窄屏只留印章方块 */
  .hero-actions .btn{ width:100%; }
}

/* ------------------------------------------------- 关于「减少动效」偏好

   这里**故意没有**写 @media (prefers-reduced-motion: reduce) 的禁用规则。

   原因：Windows 上「显示 → 动画效果 / 窗口内的动画控件和元素」一旦关掉，
   Chrome 就会一直上报 prefers-reduced-motion: reduce。很多用户（包括本项目的
   访客）并不是真的想关掉装饰动效，但结果是光斑不漂、花瓣不动、光晕直接消失，
   整个页面看着像坏了。

   所以现在默认「动效照常」，把控制权留给访客自己（光晕见 main.js 顶部的开关）。

   如果以后想恢复成尊重系统设置，把下面这段取消注释即可：

   @media (prefers-reduced-motion: reduce){
     *,*::before,*::after{
       animation-duration:.001ms !important;
       animation-iteration-count:1 !important;
       transition-duration:.001ms !important;
     }
     .cursor-glow{ display:none; }
   }
   ------------------------------------------------------------------------- */