/* 动效层。加载顺序在 cosmic-theme.css 之后。
   约定：只动 transform / opacity（走合成器，不触发重排）；
   所有「先隐藏、由 JS 揭示」的状态都挂在 .fx-ready 下 ——
   cosmic-fx.js 加载失败时该类不存在，内容照常可见。 */

/* ============ 背景动效层 ============
   .fx 位于 body::before（星云图，z-index -2）之上、正文之下。
   screen 混合让星点与极光叠加到星云上，而不是压住它。 */
.fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

/* ---- 星点：三层不同密度/速度，营造视差 ---- */
.fx-stars i {
  position: absolute;
  inset: -120px;
  display: block;
  background-repeat: repeat;
  will-change: transform, opacity;
}

.fx-stars i:nth-child(1) {
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 255, 255, .95), transparent 62%),
    radial-gradient(1.2px 1.2px at 62% 8%, rgba(190, 220, 255, .9), transparent 62%),
    radial-gradient(1px 1px at 84% 44%, rgba(255, 255, 255, .8), transparent 62%),
    radial-gradient(1.6px 1.6px at 34% 71%, rgba(255, 236, 200, .9), transparent 62%),
    radial-gradient(1px 1px at 8% 88%, rgba(255, 255, 255, .75), transparent 62%),
    radial-gradient(1.3px 1.3px at 72% 92%, rgba(180, 255, 240, .85), transparent 62%),
    radial-gradient(1px 1px at 47% 41%, rgba(255, 255, 255, .6), transparent 62%);
  background-size: 300px 300px;
  animation: fx-drift-a 46s ease-in-out infinite alternate,
             fx-twinkle-a 5.5s ease-in-out infinite;
}

.fx-stars i:nth-child(2) {
  background-image:
    radial-gradient(1.8px 1.8px at 12% 58%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(1.1px 1.1px at 55% 30%, rgba(206, 232, 255, .8), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 76%, rgba(255, 245, 220, .85), transparent 60%),
    radial-gradient(1px 1px at 40% 90%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 14%, rgba(160, 240, 226, .8), transparent 60%);
  background-size: 470px 470px;
  animation: fx-drift-b 64s ease-in-out infinite alternate,
             fx-twinkle-b 8s ease-in-out infinite;
}

.fx-stars i:nth-child(3) {
  background-image:
    radial-gradient(2.4px 2.4px at 30% 18%, rgba(255, 255, 255, 1), transparent 58%),
    radial-gradient(2px 2px at 68% 62%, rgba(255, 226, 186, .95), transparent 58%),
    radial-gradient(1.8px 1.8px at 14% 84%, rgba(186, 236, 255, .9), transparent 58%);
  background-size: 720px 720px;
  animation: fx-drift-c 88s ease-in-out infinite alternate,
             fx-twinkle-c 11s ease-in-out infinite;
}

@keyframes fx-drift-a { to { transform: translate3d(-46px, -28px, 0); } }
@keyframes fx-drift-b { to { transform: translate3d(30px, -44px, 0); } }
@keyframes fx-drift-c { to { transform: translate3d(-22px, 18px, 0); } }

@keyframes fx-twinkle-a { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes fx-twinkle-b { 0%, 100% { opacity: .85 } 45% { opacity: .4 } }
@keyframes fx-twinkle-c { 0%, 100% { opacity: 1 } 60% { opacity: .6 } }

/* ---- 极光：两团缓慢漂移的辉光 ---- */
.fx-aurora {
  position: absolute;
  inset: 0;
}

.fx-aurora::before,
.fx-aurora::after {
  content: "";
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  will-change: transform;
}

.fx-aurora::before {
  left: -14vmax;
  top: -18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(58, 190, 178, .28), rgba(58, 190, 178, 0) 66%);
  animation: fx-blob-a 38s ease-in-out infinite alternate;
}

.fx-aurora::after {
  right: -16vmax;
  bottom: -20vmax;
  background: radial-gradient(circle at 50% 50%, rgba(148, 112, 220, .24), rgba(148, 112, 220, 0) 66%);
  animation: fx-blob-b 52s ease-in-out infinite alternate;
}

@keyframes fx-blob-a { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.18); } }
@keyframes fx-blob-b { to { transform: translate3d(-10vmax, -9vmax, 0) scale(1.24); } }

/* ---- 流星：横穿后长时间静默，制造偶发感 ---- */
.fx-meteors i {
  position: absolute;
  left: 0;
  top: 0;
  width: 190px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .85) 34%, rgba(255, 255, 255, 0));
  filter: drop-shadow(0 0 6px rgba(190, 240, 255, .9));
  opacity: 0;
  will-change: transform, opacity;
}

.fx-meteors i:nth-child(1) { animation: fx-meteor 13s linear infinite; }
.fx-meteors i:nth-child(2) { animation: fx-meteor 19s 6s linear infinite; width: 130px; }
.fx-meteors i:nth-child(3) { animation: fx-meteor 27s 14s linear infinite; width: 240px; }

@keyframes fx-meteor {
  0%   { opacity: 0; transform: translate3d(18vw, -25vh, 0) rotate(-35deg); }
  2%   { opacity: 1; }
  16%  { opacity: 1; }
  19%  { opacity: 0; transform: translate3d(-118vw, 96vh, 0) rotate(-35deg); }
  100% { opacity: 0; transform: translate3d(-118vw, 96vh, 0) rotate(-35deg); }
}

/* ============ 滚动进度条 ============ */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
}

.fx-progress::after {
  content: "";
  display: block;
  height: 100%;
  transform: scaleX(var(--fx-progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #5cbcb2, #8fd3c8 38%, #ffd7a3 70%, #ff9f6e);
  box-shadow: 0 0 10px rgba(120, 220, 210, .7);
}

/* ============ 入场揭示 ============ */
.fx-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .78s cubic-bezier(.2, .7, .3, 1), transform .78s cubic-bezier(.2, .7, .3, 1);
}

.fx-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* 首屏文案逐条浮起，不等滚动 */
.fx-ready .hero-copy > * {
  animation: fx-rise .95s cubic-bezier(.16, .8, .3, 1) both;
}

.fx-ready .hero-copy > :nth-child(1) { animation-delay: .10s; }
.fx-ready .hero-copy > :nth-child(2) { animation-delay: .22s; }
.fx-ready .hero-copy > :nth-child(3) { animation-delay: .36s; }
.fx-ready .hero-copy > :nth-child(4) { animation-delay: .50s; }

@keyframes fx-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

/* 标题流光。background-clip 不支持时整块规则不生效，文字保持原色 */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .fx-ready .hero-copy > h1 {
    background: linear-gradient(100deg, #fff 18%, #a9e6dc 33%, #fff 50%, #ffd7a3 67%, #fff 84%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fx-rise .95s .22s cubic-bezier(.16, .8, .3, 1) both,
               fx-sheen 12s 1.4s ease-in-out infinite;
  }
}

@keyframes fx-sheen {
  0%, 100% { background-position: 130% 50%; }
  50%      { background-position: -30% 50%; }
}

/* 主按钮扫光 */
.button.primary {
  position: relative;
  overflow: hidden;
}

.button.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%);
  transform: translate3d(-130%, 0, 0);
  pointer-events: none;
}

.button.primary:hover::after,
.button.primary:focus-visible::after {
  animation: fx-swipe .85s ease;
}

@keyframes fx-swipe {
  to { transform: translate3d(130%, 0, 0); }
}

/* 笔记卡片：指针跟随辉光 + 悬浮抬升 */
.note-card {
  position: relative;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), opacity .5s cubic-bezier(.2, .7, .3, 1),
              border-color .18s ease, box-shadow .3s ease;
}

.note-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .32s ease;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(92, 188, 178, .22), transparent 62%);
}

.note-card:hover::before,
.note-card:focus-within::before {
  opacity: 1;
}

.note-card:hover,
.fx-ready .note-card[data-reveal].is-in:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 18px 44px rgba(10, 24, 20, .28);
}

/* 文献行：悬浮时左侧渐显强调条 */
.paper-row {
  position: relative;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), background-color .28s ease;
}

.paper-row::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5cbcb2, #ffd7a3);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.paper-row:hover::before,
.paper-row:focus-within::before {
  transform: scaleY(1);
}

.paper-row:hover,
.fx-ready .paper-row[data-reveal].is-in:hover {
  transform: translate3d(6px, 0, 0);
}

/* 小标题下的渐进强调线 */
.section-kicker {
  position: relative;
  padding-bottom: 10px;
}

.section-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, currentColor, transparent);
  transform: scaleX(.25);
  transform-origin: 0 50%;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}

.fx-ready [data-reveal].is-in .section-kicker::after,
.fx-ready [data-reveal].is-in.section-kicker::after {
  transform: scaleX(1);
}

/* 统计数字在滚动到位时跳动计数，等宽避免宽度抖动 */
.stats dt {
  font-variant-numeric: tabular-nums;
}

/* ============ 无障碍 / 降级 ============
   site.css 的 reduce 块用 *{animation:none!important}，但 * 匹配不到伪元素，
   这里显式覆盖伪元素上的动画，并让所有揭示态直接落到终值。 */
@media (prefers-reduced-motion: reduce) {
  .fx *,
  .fx *::before,
  .fx *::after,
  .button.primary::after,
  .hero-copy > *,
  .hero-copy > h1 {
    animation: none !important;
  }

  .fx-ready [data-reveal],
  .fx-ready .hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .fx-meteors,
  .fx-aurora {
    display: none;
  }
}

/* ============ 面板玻璃层（调色）============
   问题：cosmic-theme.css 里面板是 rgba(白,.64~.68) + saturate(.9)，
   叠在被极光提亮的星云上，中段被冲成一片灰、正文对比度也差。
   解法：模糊加重（把星云糊成柔和色块而不是脏纹理）+ 提饱和 + 抬不透明度，
   读作「有颜色的玻璃」而不是「蒙了灰」。本文件在 cosmic-theme.css 之后加载，
   同特异度后来居上，因此这里直接改写同名选择器。 */
.site-header,
.intro-band,
.content-section,
.library-section {
  /* brightness() 是关键：星云本身接近黑，半透明白面板压在上面必然发灰。
     先把背景提亮再提饱和，透出来的就是淡彩而不是脏灰，白色也才立得住。 */
  backdrop-filter: blur(20px) saturate(1.7) brightness(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.7) brightness(1.3);
}

.site-header {
  background: rgba(247, 250, 248, 0.74);
}

.intro-band {
  background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(246, 253, 251, .76));
}

.content-section {
  background: linear-gradient(180deg, rgba(250, 254, 253, .78), rgba(255, 255, 255, .84));
}

.library-section {
  background: linear-gradient(180deg, rgba(238, 246, 244, .80), rgba(248, 252, 251, .76));
}

/* 面板顶边掠过的一道彩色微光 */
.intro-band,
.content-section,
.library-section,
footer {
  position: relative;
  isolation: isolate;
}

.intro-band::before,
.content-section::before,
.library-section::before,
footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(92, 188, 178, .85) 18%,
    rgba(255, 215, 163, .9) 46%,
    rgba(148, 112, 220, .8) 72%,
    transparent 100%);
  background-size: 240% 100%;
  animation: fx-edge 18s linear infinite;
}

.content-section::before { animation-delay: -6s; }
.library-section::before { animation-delay: -12s; }
footer::before          { animation-delay: -3s; }

@keyframes fx-edge {
  from { background-position: 240% 0; }
  to   { background-position: -240% 0; }
}

/* ============ 极光补色 ============
   第三团暖色辉光挂在 .fx-aurora 自身背景上（不必再加 DOM 节点），
   缓慢的 hue-rotate 连同两个伪元素一起漂移，颜色不会停在一处。 */
.fx-aurora {
  background: radial-gradient(46vmax 32vmax at 76% 16%, rgba(255, 172, 112, .16), transparent 70%);
  animation: fx-hue 96s ease-in-out infinite alternate;
  will-change: filter;
}

@keyframes fx-hue {
  from { filter: hue-rotate(-14deg); }
  to   { filter: hue-rotate(22deg); }
}

/* 极光整体调淡：原来 .28/.24 把面板下的星云提得发白 */
.fx-aurora::before {
  background: radial-gradient(circle at 50% 50%, rgba(58, 190, 178, .21), rgba(58, 190, 178, 0) 66%);
}

.fx-aurora::after {
  background: radial-gradient(circle at 50% 50%, rgba(148, 112, 220, .18), rgba(148, 112, 220, 0) 66%);
}

/* ============ 更多微交互 ============ */
/* 品牌方块：定期扫过一道高光 */
.brand-mark {
  position: relative;
  overflow: hidden;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .55) 50%, transparent 66%);
  transform: translate3d(-140%, 0, 0);
  animation: fx-shine 9s 2.5s ease-in-out infinite;
}

@keyframes fx-shine {
  0%        { transform: translate3d(-140%, 0, 0); }
  16%, 100% { transform: translate3d(140%, 0, 0); }
}

/* 次要按钮：悬浮时描边发光 */
.button.secondary {
  transition: border-color .28s ease, box-shadow .28s ease, transform .18s ease;
}

.button.secondary:hover,
.button.secondary:focus-visible {
  border-color: rgba(160, 232, 222, .95);
  box-shadow: 0 0 0 1px rgba(160, 232, 222, .35), 0 10px 30px rgba(20, 60, 56, .35);
}

/* 搜索框聚焦光圈 */
.search-box {
  transition: border-color .3s ease, box-shadow .3s ease;
}

.search-box:focus-within {
  border-color: rgba(92, 188, 178, .85);
  box-shadow: 0 0 0 3px rgba(92, 188, 178, .18), 0 10px 28px rgba(10, 40, 36, .16);
}

/* 统计数字：呼吸式辉光 */
.stats dt {
  animation: fx-glow 6s ease-in-out infinite;
}

@keyframes fx-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(92, 188, 178, 0); }
  50%      { text-shadow: 0 0 18px rgba(92, 188, 178, .45); }
}

/* 笔记卡片：悬浮时外缘彩色光环（画在盒外，不压正文） */
.note-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .34s ease;
  box-shadow: 0 0 0 1px rgba(92, 188, 178, .55),
              0 0 26px rgba(92, 188, 178, .32),
              0 0 52px rgba(148, 112, 220, .22);
}

.note-card:hover::after,
.note-card:focus-within::after {
  opacity: 1;
}

/* 文献行：悬浮时自左淡入的一层色晕 */
.paper-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: linear-gradient(90deg, rgba(92, 188, 178, .16), rgba(148, 112, 220, .06) 46%, transparent 74%);
}

.paper-row {
  isolation: isolate;
}

.paper-row:hover::after,
.paper-row:focus-within::after {
  opacity: 1;
}

.file-icon {
  transition: transform .32s cubic-bezier(.2, .7, .3, 1), box-shadow .32s ease;
}

.paper-row:hover .file-icon {
  transform: translate3d(0, -2px, 0) scale(1.06);
  box-shadow: 0 8px 20px rgba(10, 40, 36, .22);
}

/* ---- 面板内的极光晕：浅色底上缓慢漂移的三团柔色 ----
   注意 .intro-band 是 grid 容器，伪元素必须 absolute，否则会变成额外的网格项挤乱布局。 */
.intro-band,
.content-section,
.library-section {
  overflow: hidden;
}

.intro-band::after,
.content-section::after,
.library-section::after {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30vmax 22vmax at 8% 14%, rgba(58, 190, 178, .11), transparent 58%),
    radial-gradient(28vmax 20vmax at 92% 84%, rgba(148, 112, 220, .10), transparent 58%),
    radial-gradient(24vmax 18vmax at 74% 12%, rgba(255, 172, 112, .08), transparent 60%);
  animation: fx-panel-a 44s ease-in-out infinite alternate;
  will-change: transform;
}

.content-section::after {
  animation-name: fx-panel-b;
  animation-duration: 58s;
}

.library-section::after {
  animation-name: fx-panel-c;
  animation-duration: 66s;
}

@keyframes fx-panel-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.14); }
}

@keyframes fx-panel-b {
  from { transform: translate3d(4%, 2%, 0) scale(1.10); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1.02); }
}

@keyframes fx-panel-c {
  from { transform: translate3d(-2%, 3%, 0) scale(1.08); }
  to   { transform: translate3d(3%, -3%, 0) scale(1.16); }
}

/* ≤820px 换的是更亮的竖版星云图，同样的提亮参数会把面板冲成彩虹雾，
   这里收窄提亮幅度并抬高底色，保证正文对比度。 */
@media (max-width: 820px) {
  .site-header,
  .intro-band,
  .content-section,
  .library-section {
    backdrop-filter: blur(22px) saturate(1.45) brightness(1.02);
    -webkit-backdrop-filter: blur(22px) saturate(1.45) brightness(1.02);
  }

  .intro-band {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(246, 253, 251, .88));
  }

  .content-section {
    background: linear-gradient(180deg, rgba(250, 254, 253, .90), rgba(255, 255, 255, .93));
  }

  .library-section {
    background: linear-gradient(180deg, rgba(238, 246, 244, .91), rgba(248, 252, 251, .88));
  }

  .intro-band::after,
  .content-section::after,
  .library-section::after {
    opacity: .7;
  }
}

/* ============ 深色模式调色 ============
   之前面板是偏绿的近黑（.60~.66）叠在暗星云上，整页糊成一团黑。
   改成偏蓝的深玻璃 + 提亮提饱和，让星云的颜色透上来，正文也拉开对比。 */
@media (prefers-color-scheme: dark) {
  body::after {
    background: rgba(2, 4, 10, 0.30);
  }

  .site-header,
  .intro-band,
  .content-section,
  .library-section {
    backdrop-filter: blur(20px) saturate(1.6) brightness(1.06);
    -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.06);
  }

  .site-header {
    background: rgba(8, 14, 19, 0.74);
  }

  .intro-band {
    background: linear-gradient(180deg, rgba(14, 24, 31, .70), rgba(10, 18, 25, .62));
  }

  .content-section {
    background: linear-gradient(180deg, rgba(9, 17, 24, .62), rgba(13, 22, 29, .68));
  }

  .library-section {
    background: linear-gradient(180deg, rgba(8, 15, 22, .68), rgba(11, 19, 26, .60));
  }

  .note-card,
  .search-box,
  .file-icon {
    background: rgba(17, 27, 35, 0.82);
  }

  footer {
    background: rgba(5, 9, 13, 0.92);
  }

  .note-card {
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
  }

  /* site.css 里主按钮是 background:#fff + color:var(--ink)，
     深色模式下 --ink 变浅 -> 白底浅字，几乎看不见。这里补回对比度。 */
  .button.primary {
    background: #e9f6f2;
    color: #0a1512;
  }
}

/* ============ 无障碍 / 降级（新增部分）============ */
@media (prefers-reduced-motion: reduce) {
  .intro-band::after,
  .content-section::after,
  .library-section::after,
  .intro-band::before,
  .content-section::before,
  .library-section::before,
  footer::before,
  .brand-mark::after,
  .stats dt,
  .fx-aurora {
    animation: none !important;
  }

  .file-icon,
  .search-box,
  .button.secondary,
  .note-card::after,
  .paper-row::after {
    transition: none !important;
  }
}