html {
  --cosmic-blur: 0px;
  --cosmic-scale: 1.04;
  background: #020307;
}

body {
  position: relative;
  isolation: isolate;
  background: transparent;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  inset: -24px;
  background: #020307 url("./pillars-of-creation-hero.webp") center / cover no-repeat;
  filter: blur(var(--cosmic-blur));
  transform: scale(var(--cosmic-scale));
  transform-origin: center;
  transition: filter 80ms linear, transform 80ms linear;
  will-change: filter, transform;
}

body::after {
  z-index: -1;
  background: rgba(2, 4, 10, 0.16);
}

.site-header {
  background: rgba(247, 248, 245, 0.9);
}

.hero {
  background: transparent;
}

.intro-band {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(5px) saturate(0.9);
}

.content-section {
  background: rgba(247, 248, 245, 0.64);
  backdrop-filter: blur(5px) saturate(0.9);
}

.library-section {
  background: rgba(238, 241, 237, 0.68);
  backdrop-filter: blur(5px) saturate(0.9);
}

.note-card,
.search-box,
.file-icon {
  background: rgba(255, 255, 255, 0.88);
}

footer {
  background: rgba(24, 33, 29, 0.94);
}

@media (max-width: 820px) {
  body::before {
    background-image: url("./pillars-of-creation.webp");
    background-position: center top;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    transition: none;
  }
}

/* 深色模式的面板底色必须写在这里：本文件在 site.css 之后加载，
   上面那些 rgba(255,255,255,…) 会盖掉 site.css 深色块的背景，
   只留下浅色文字 —— 结果是白字白底。保持半透明让星空继续透出来。 */
@media (prefers-color-scheme: dark) {
  body::after {
    background: rgba(2, 4, 10, 0.42);
  }

  .site-header {
    background: rgba(11, 17, 15, 0.88);
  }

  .intro-band {
    background: rgba(17, 24, 21, 0.66);
  }

  .content-section {
    background: rgba(14, 20, 18, 0.6);
  }

  .library-section {
    background: rgba(11, 16, 14, 0.66);
  }

  .note-card,
  .search-box,
  .file-icon {
    background: rgba(25, 34, 31, 0.86);
  }

  footer {
    background: rgba(6, 10, 9, 0.94);
  }
}