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

body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #fff;
  caret-color: transparent;
}

/* ===== 侧栏六边形窗口组（左半边屏幕）=====
   6 个窗口按正六边形顶点排列，半径动态计算 */
.hex-grid {
  position: fixed;
  left: 0;
  top: 6vh;
  width: 50vw;
  height: 100vh;
  z-index: 10;
  --r: min(15vw, 25.5vh);
  --sw: 190px;
}

.side-window {
  position: absolute;
  width: var(--sw, 150px);
  height: var(--sw, 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  color: #fff;
  --bt: translate(-50%, -50%);
  transform: var(--bt);
  border-radius: 28px;
  animation: tabPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* 六边形顶点坐标（相对 .hex-grid 容器，中心为 50%,50%） */
/* position/border-radius 需更高特异性，覆盖 .card 的 relative/24px 圆角 */
.hex-grid .side-window {
  position: absolute;
  border-radius: 28px;
}

/* 空间不足时切换为网格排列（2×3 或 3×2），窗口缩小 */
.hex-grid.compact {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  grid-template-rows: repeat(var(--rows, 3), auto);
  gap: 10px;
  padding: 8px;
  place-content: center;
  place-items: center;
}

.hex-grid.compact .side-window {
  position: static;
  transform: none;
  animation: none;
  width: var(--sw, 90px);
}

/* 文字溢出时以省略号概括（正文最多两行） */
.side-window h3,
.side-btn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hex-grid .side-window:nth-child(1) {
  left: calc(50% + var(--r));
  top: 50%;
  animation-delay: 0.15s;
}

.hex-grid .side-window:nth-child(2) {
  left: calc(50% + var(--r) * 0.5);
  top: calc(50% + var(--r) * 0.866);
  animation-delay: 0.23s;
}

.hex-grid .side-window:nth-child(3) {
  left: calc(50% - var(--r) * 0.5);
  top: calc(50% + var(--r) * 0.866);
  animation-delay: 0.31s;
}

.hex-grid .side-window:nth-child(4) {
  left: calc(50% - var(--r));
  top: 50%;
  animation-delay: 0.39s;
}

.hex-grid .side-window:nth-child(5) {
  left: calc(50% - var(--r) * 0.5);
  top: calc(50% - var(--r) * 0.866);
  animation-delay: 0.47s;
}

.hex-grid .side-window:nth-child(6) {
  left: calc(50% + var(--r) * 0.5);
  top: calc(50% - var(--r) * 0.866);
  animation-delay: 0.55s;
}

/* 列表整体从下弹出（回弹缓动，backwards 播完交还定位 transform） */
@keyframes boxPop {
  from {
    opacity: 0;
    transform: var(--bt, none) translateY(70px) scale(0.96);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: var(--bt, none) translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 从下方弹出：上移 + 放大 + 模糊消散（backwards 播完交还 tilt 控制） */
@keyframes tabPop {
  from {
    opacity: 0;
    transform: var(--bt) translateY(60px) scale(0.92);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: var(--bt) translateY(0) scale(1);
    filter: blur(0);
  }
}

.side-window h3 {
  font-size: 1rem;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.side-window p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.side-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.side-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.03);
}

/* ===== 手机端按钮窗口（默认 PC 隐藏）===== */
.mobile-grid {
  display: none;
}

.mg-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.mg-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.04);
}

/* ===== 电脑端窄屏按钮卡（771-1000px 独立类，默认隐藏）===== */
.pc-grid {
  display: none;
}

/* 小框：上半 h3 标题 + 下半 Go Read 按钮，各占 1/2 高度 */
.pc-cell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pc-cell h3 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 6px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-cell .side-btn {
  flex: 1;
  width: auto;
  margin: 0 8px 8px;
  border-radius: 10px;
  padding: 6px 0;
  font-size: 0.8rem;
}

.pc-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  padding: 12px 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pc-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.04);
}

/* ===== 光标/触摸冰晶拖尾 Canvas ===== */
#trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
}

/* ===== 欢迎出场动画 =====
   25% 黑色 + 模糊叠加在原有背景模糊上，逐字跳入/跳出 */
.welcome-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200;
  transition: opacity 0.5s ease;
}

.welcome-overlay.hide {
  opacity: 0;
  pointer-events: none;
}

/* 文字动画期间隐藏并暂停 UI 动画（pause 保证结束后从头播放一次，
   不会在隐藏期间提前播完；.side-window 需单独列出，play-state 不继承） */
body.welcome-on .site-title,
body.welcome-on .right,
body.welcome-on .article-box,
body.welcome-on .mobile-grid,
body.welcome-on .pc-grid,
body.welcome-on .hex-grid,
body.welcome-on .hex-grid .side-window,
body.welcome-on .footer {
  visibility: hidden;
  animation-play-state: paused;
}

.welcome-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 92vw;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: 6px;
  color: #fff;
}

.wchar {
  display: inline-block;
  opacity: 0;
  animation: charIn 0.375s cubic-bezier(0.34, 1.56, 0.64, 1) var(--in, 0s) forwards,
             charOut 0.34s cubic-bezier(0.55, 0.06, 0.68, 0.19) var(--out, 2.5s) forwards;
}

/* 跳入：自下而上弹入 + 模糊消散 */
@keyframes charIn {
  from {
    opacity: 0;
    transform: translateY(45px) scale(0.8);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 跳出：向上弹离 + 模糊消散 */
@keyframes charOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-45px) scale(0.8);
    filter: blur(12px);
  }
}

.site-title {
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 10;
  display: inline-block;
  --bt: none;
  transform: var(--bt);
  animation: titleIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.site-title .glass-text {
  position: relative;
  display: inline-block;
  font-size: 10vh;
  font-weight: 700;
  letter-spacing: 4px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);

  /* frosted glass fill: layered gradients clipped to the text shape only (no backdrop-filter box) */
  background-image: linear-gradient(
    135deg,
    rgba(255,255,255,0.65) 0%,
    rgba(153,204,255,0.35) 45%,
    rgba(255,255,255,0.25) 55%,
    rgba(153,204,255,0.45) 100%
  ),
  linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.95) 48%,
    rgba(255,255,255,1) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, 200% 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;

  /* glass-edge highlight + soft ambient glow, no box shape */
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6))
           drop-shadow(0 -1px 0 rgba(255,255,255,0.15))
           drop-shadow(0 6px 20px rgba(0,0,0,0.1));

  animation: glass-sheen 6s ease-in-out infinite;
}

@keyframes glass-sheen {
  0% { background-position: 0 0, 200% 0; }
  45% { background-position: 0 0, -50% 0; }
  100% { background-position: 0 0, -50% 0; }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  /* 容器本身即视口大小（fixed），无需 background-attachment: fixed
     （移动端 Safari 不支持该属性，会导致背景随滚动/拖动移动） */
  background: url('Pictures/sui.png') center/cover no-repeat;
  filter: blur(6px);
  z-index: -2;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: -1;
  pointer-events: none;
}

.right {
  position: fixed;
  top: 0;
  left: 50vw;
  width: 50vw;
  height: 100vh;
}

.article-box {
  position: absolute;
  top: 50vh;
  left: 24px;
  right: 24px;
  height: 33.33vh;
  display: flex;
  flex-direction: column;
  --bt: none;
  transform: var(--bt);
  animation: boxPop 0.525s cubic-bezier(0.34, 1.56, 0.64, 1) 0.24s backwards;
  transition: top 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.6s ease;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  overflow: hidden;
}

.article-scroll {
  flex: 0 0 100%;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  padding: 20px 24px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.article-scroll::-webkit-scrollbar {
  width: 4px;
}

.article-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.article-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

/* ===== 阅读展开模式（PC 端）=====
   点击列表项后：列表面板上移滚出，reader 面板滚入，box 延伸至主页高度 */
.reader-view {
  flex: 0 0 100%;
  min-height: 0;
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reader-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 40px 48px;
}

.reader-scroll::-webkit-scrollbar {
  width: 4px;
}

.reader-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.reader-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.article-box.expanded {
  top: 24px;
  height: calc(100vh - 96px);
  border-radius: 20px;
}

.article-box.expanded .reader-view {
  transform: translateY(-100%);
}

.article-box.expanded .article-scroll {
  transform: translateY(-100%);
}

/* 阅读内容样式 */
#content h1, #content h2, #content h3,
#friend-content h1, #friend-content h2, #friend-content h3 {
  color: #fff;
  margin: 1.5em 0 0.5em;
}

#content h1, #friend-content h1 { font-size: 1.8rem; }
#content h2, #friend-content h2 { font-size: 1.4rem; }
#content h3, #friend-content h3 { font-size: 1.2rem; }

#content p, #friend-content p {
  color: rgba(255, 255, 255, 0.8);
  margin: 1em 0;
}

#content code, #friend-content code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: #fff;
}

#content pre, #friend-content pre {
  background: rgba(0, 0, 0, 0.2);
  padding: 16px 20px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 1em 0;
}

#content pre code, #friend-content pre code {
  background: none;
  padding: 0;
  color: #fff;
}

#content a, #friend-content a {
  color: #fff;
  text-decoration: underline;
}

#content ul, #content ol,
#friend-content ul, #friend-content ol {
  color: rgba(255, 255, 255, 0.8);
  padding-left: 24px;
  margin: 1em 0;
}

#content blockquote, #friend-content blockquote {
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  padding-left: 16px;
  margin: 1em 0;
  color: rgba(255, 255, 255, 0.6);
}

#content img, #friend-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 1em 0;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.25s ease, transform 0.25s ease;
  cursor: default;
  transform: scale(1);
}

.article-item:not(.card):hover {
  background: rgba(255, 255, 255, 0.08);
}

.title {
  flex: 1;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

/* ========== 手机端（< 770px）==========
   UI 设计任务后期编写，当前仅做基础清理：
   复位 PC 端 fixed/absolute 布局，恢复文档流 */
/* 中间宽度（771-1000px）：未展开时标题保持单行；
   展开阅读时才允许换行并限制宽度，避免覆盖列表。
   同时取消六边形窗口，复用手机端按钮卡片（左对齐避让右半列表） */
@media (max-width: 1000px) and (min-width: 771px) {
  .site-title .glass-text {
    white-space: nowrap;
  }

  body.reading .site-title {
    max-width: calc(50vw - 80px);
  }

  body.reading .site-title .glass-text {
    white-space: normal;
  }

  .hex-grid {
    display: none;
  }

  .card.pc-grid {
    display: grid;
    position: fixed;
    top: var(--m-list-y);
    left: 24px;
    width: 42vw;
    height: 33.33vh;
    padding: 14px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    z-index: 10;
    --bt: translateY(-50%);
    transform: var(--bt);
    animation: pcPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
  }

  /* 从下方弹入（backwards 播完交还 card tilt transform） */
  @keyframes pcPop {
    from {
      opacity: 0;
      transform: var(--bt) translateY(60px) scale(0.95);
      filter: blur(8px);
    }
    to {
      opacity: 1;
      transform: var(--bt) translateY(0) scale(1);
      filter: blur(0);
    }
  }
}

/* 手机端布局变量：所有位置相对计算，改此处的值即可整体联动 */
:root {
  --m-title-y: 16.67vh;   /* 大标题中心 */
  --m-list-y: 66.67vh;    /* 列表中心 */
  --m-list-h: 50vh;       /* 列表高度 */
}

@media (max-width: 770px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overscroll-behavior: none;
    touch-action: pan-y;
  }

  /* ===== 大标题重排（手机端）=====
     中心：垂直方向在屏幕 1/6 = 16.67vh（上1/3中心），水平偏左 */

  /* 六边形窗口组手机端隐藏 */
  .hex-grid {
    display: none;
  }

  /* ===== 手机端按钮窗口：标题与列表中间，card 效果 ===== */
  /* 欢迎文字：字号按屏幕宽度动态计算（8vw 基准），宽度自适应 */
  .welcome-text {
    font-size: 8.2vw;
    letter-spacing: 1vw;
  }
  /* .card.mobile-grid 高特异性：覆盖 .card 的 position: relative，
     保持 fixed 固定定位（否则卡片随页面滚动/弹性而挪动） */
  .card.mobile-grid {
    display: grid;
    position: fixed;
    top: calc((var(--m-title-y) + (var(--m-list-y) - var(--m-list-h) / 2)) / 2);
    left: 50%;
    --bt: translate(-50%, -50%);
    transform: var(--bt);
    width: 90vw;
    padding: 14px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    z-index: 10;
    animation: boxPop 0.525s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
  }

  .mobile-grid .mg-btn {
    padding: 12px 0;
  }
  .site-title {
    position: fixed;
    top: var(--m-title-y);
    left: 16px;
    --bt: translateY(-50%);
    transform: var(--bt);
  }

  /* 字号逻辑：以 vw 为宽度基准，vh 兜底，保证标题不超过屏幕宽度 */
  .site-title .glass-text {
    font-size: min(12vw, 10vh);
    white-space: nowrap;
  }

  .right {
    position: static;
    width: auto;
    height: auto;
  }

  /* ===== 列表重排（手机端）=====
     中心：屏幕下1/3与中1/3交界处 = 66.67vh
     高度：50vh（屏幕中端 50vh → 屏幕末端 100vh 的跨度）
     底部 = 66.67vh + 25vh = 91.67vh，余下约 8.3vh 留给页脚 */
  .article-box {
    position: fixed;
    top: var(--m-list-y);
    left: 16px;
    right: 16px;
    height: var(--m-list-h);
    display: block;
    transition: none;
    animation: boxPop 0.525s cubic-bezier(0.34, 1.56, 0.64, 1) 0.24s backwards;
    --bt: translateY(-50%);
    transform: var(--bt);
    border-radius: 28px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  /* 手机端保持原样：不启用阅读展开模式 */
  .article-scroll {
    height: 100%;
    transform: none;
    transition: none;
    padding: 37px 16px;
  }

  /* 覆盖 PC 端展开态：即使 expanded 类残留（窗口缩小时），
     也强制恢复手机端列表布局，避免列表跑到标题位置 */
  .article-box.expanded {
    top: var(--m-list-y);
    left: 16px;
    right: 16px;
    height: var(--m-list-h);
    transform: var(--bt);
    border-radius: 28px;
  }

  .article-box.expanded .reader-view {
    transform: none;
  }

  .reader-view {
    display: none !important;
  }

  /* 叠加层阅读（手机端）：高度为整体页面 2/3，内容过长时由
     .friend-modal-scroll 滚动；电脑端保持动态内容高度不受影响 */
  .friend-modal {
    width: 92vw;
    height: 66.67vh;
  }

  /* 手机端页脚字号按屏宽动态计算，避免博客开放时间栏位换行
     （body .footer 提高特异性，压过文件后部 .footer 的 1.1rem） */
  body .footer {
    font-size: min(1.1rem, 3.4vw);
    white-space: nowrap;
  }
}

/* ===== 友情链接叠加层 =====
   全屏遮罩：模糊变暗原界面，友链卡片居中缩放淡入 */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 100;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
}

.friend-modal {
  width: min(560px, 88vw);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  overflow: hidden;
}

.overlay.show .friend-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.friend-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.friend-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}

.friend-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.friend-modal-scroll {
  padding: 20px 28px 48px;
  overflow-y: auto;
}

.friend-modal-scroll::-webkit-scrollbar {
  width: 4px;
}

.friend-modal-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.friend-modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

/* ========== 页面载入动画（B 方案）==========
   元素错峰浮现：淡入 + 位移动画 + 模糊消散
   --bt 为各元素原有定位 transform，动画内组合避免定位冲突 */
@keyframes titleIn {
  from {
    opacity: 0;
    transform: var(--bt) translateY(-24px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: var(--bt) translateY(0);
    filter: blur(0);
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: var(--bt) translateY(24px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: var(--bt) translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-title,
  .footer {
    animation: none;
  }
}

.footer {
  position: fixed;
  bottom: 12px;
  left: 50%;
  --bt: translateX(-50%);
  transform: var(--bt);
  animation: riseIn 0.525s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.55);
  z-index: 10;
  letter-spacing: 1px;
}

.footer p {
  position: relative;
  padding-top: 6px;
}

.footer p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%) scaleX(2);
}

.footer .friend-link {
  margin-left: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  font-weight: bold;
  transition: color 0.2s ease;
}

.footer .friend-link:hover {
  color: #fff;
}

.footer .uptime {
  margin-left: 12px;
}

/* ===== glass：iOS 液体玻璃风格（参考 iOS 26 Liquid Glass）=====
   圆角 + 半透明磨砂玻璃（backdrop blur）+
   上方边缘反光 + 左边边缘反光 + 左上角交界处高光 */
.glass {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

/* 上边缘 + 左边缘反光带，左上角交界处用径向光晕叠得更亮 */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.30), transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 25%);
  pointer-events: none;
}

/* 左上→右下的斜向反光带，增强液体玻璃通透感 */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 5%,
    rgba(255, 255, 255, 0.10) 28%,
    rgba(255, 255, 255, 0.03) 42%,
    transparent 60%);
  pointer-events: none;
}

/* ===== card：3D 悬浮倾斜卡片（Tilt Card）=====
   配合 JS：mousemove 按光标位置更新 --rx/--ry/--mx/--my，
   hover 时卡片朝光标方向倾斜，带浮动阴影与跟随光标的高光 */
.card {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: var(--bt, none) perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transform-style: preserve-3d;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  will-change: transform;
  transition-property: transform, box-shadow;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease-out, ease;
}

/* hover 时倾斜跟手（快）、上浮、阴影加深增强悬浮感 */
.card:hover {
  transition-duration: 0.08s, 0.3s;
  transform: var(--bt, none) perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 跟随光标位置的径向高光 */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.10), transparent 60%);
  pointer-events: none;
}

/* 列表项叠加 card：保留背景色的过渡，避免 hover 背景跳变 */
.article-item.card {
  transition-property: transform, box-shadow, background;
}

/* ===== tilt：3D 倾斜跟手效果（标题/列表专用，无玻璃背景）
   只定义 transform，不触碰 transition（避免覆盖展开动画）===== */
.tilt {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) var(--bt, none);
  will-change: transform;
}