/*
 * Butterfly 首页背景效果
 *
 * 设计思路参考固定 Hero + 透明正文的实现：
 * 1. 全页只绘制一次 #web_bg，避免首屏与正文重复贴图。
 * 2. 背景固定在视口，页面滚动时自然形成视差。
 * 3. 使用覆盖整个视口的统一底色层，透明度随滚动连续变化。
 * 4. 透明度设有上限，页面底部仍然保留背景图。
 */

#web_bg {
  opacity: 0;
  transition: opacity 0.35s ease;
}

#web_bg.hero-background-active {
  opacity: 1;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/*
 * Dark mode uses a companion image with the same composition.
 * Keeping the swap on #web_bg makes Butterfly's theme toggle update it
 * immediately without reloading the page.
 */
[data-theme='dark'] #web_bg.hero-background-active {
  background-image: url('/img/banner-ocean-night-v1.webp') !important;
}

/*
 * Butterfly adds a 70% black mask to #web_bg in dark mode. The night artwork
 * already contains its own directional lighting, so that mask would hide the
 * whale, the lantern glow, and most of the pier detail.
 */
[data-theme='dark'] #web_bg.hero-background-active::before {
  background-color: transparent !important;
}

/* 首屏直接透出唯一的全局背景，不再单独绘制同一张图片。 */
body.hero-reference-effect #page-header.full_page {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  background-image: none !important;
}

/*
 * Butterfly 默认会用 #page-header::before 单独压暗首屏。
 * 该遮罩在首屏底部突然结束，是截图中水平色彩分层的来源。
 * 首页关闭它，明暗只交给覆盖整个背景的统一 wash 层处理。
 */
body.hero-reference-effect
  #page-header.full_page:not(.not-top-img)::before {
  background-color: transparent !important;
  opacity: 0 !important;
}

body.hero-reference-effect #page-header.full_page #site-info,
body.hero-reference-effect #page-header.full_page #scroll-down {
  will-change: transform, opacity;
}

/* 单一、均匀的底色层；不存在空间色阶或正文边界。 */
#web_bg .hero-background-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--global-bg);
  opacity: var(--hero-wash-opacity, 0);
  pointer-events: none;
  will-change: opacity;
}

/*
 * Atmospheric motion is intentionally slow and low contrast. It adds life to
 * the still artwork without competing with the title or making the background
 * look like a looping video.
 */
#web_bg .hero-atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#web_bg .hero-horizon-glow,
#web_bg .hero-sea-shimmer,
#web_bg .hero-stars {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

#web_bg .hero-horizon-glow {
  inset: 34% -10% 14%;
  background:
    radial-gradient(
      ellipse at 73% 54%,
      rgba(255, 196, 176, 0.16) 0%,
      rgba(116, 190, 255, 0.08) 23%,
      transparent 58%
    );
  filter: saturate(1.12);
  animation: heroHorizonBreathe 7s ease-in-out infinite alternate;
}

#web_bg .hero-sea-shimmer {
  inset: 55% -8% -12%;
  opacity: 0.68;
  background:
    radial-gradient(
      ellipse at 68% 8%,
      rgba(215, 239, 255, 0.28) 0%,
      transparent 23%
    ),
    repeating-linear-gradient(
      102deg,
      transparent 0 11%,
      rgba(157, 218, 255, 0.09) 12%,
      transparent 13% 24%
    );
  mix-blend-mode: screen;
  animation: heroSeaShimmer 8s ease-in-out infinite alternate;
}

#web_bg .hero-stars {
  inset: 55% 0 0;
  opacity: 0.62;
  background-image:
    radial-gradient(circle at 8% 28%, rgba(187, 231, 255, 0.95) 0 1.5px, transparent 3px),
    radial-gradient(circle at 19% 68%, rgba(118, 211, 255, 0.9) 0 1.2px, transparent 2.8px),
    radial-gradient(circle at 31% 39%, rgba(224, 245, 255, 0.95) 0 1.6px, transparent 3.2px),
    radial-gradient(circle at 46% 79%, rgba(108, 204, 255, 0.85) 0 1.3px, transparent 3px),
    radial-gradient(circle at 59% 24%, rgba(223, 245, 255, 0.95) 0 1.5px, transparent 3px),
    radial-gradient(circle at 76% 62%, rgba(117, 210, 255, 0.9) 0 1.4px, transparent 3px),
    radial-gradient(circle at 91% 35%, rgba(226, 247, 255, 0.95) 0 1.5px, transparent 3px);
  filter: drop-shadow(0 0 4px rgba(112, 207, 255, 0.9));
  mix-blend-mode: screen;
  animation: heroWaterLights 5.5s ease-in-out infinite alternate;
}

[data-theme='dark'] #web_bg .hero-horizon-glow,
[data-theme='dark'] #web_bg .hero-sea-shimmer {
  display: none;
}

[data-theme='dark'] #web_bg .hero-stars {
  inset: 0 0 37%;
  opacity: 0.82;
  background-image:
    radial-gradient(circle at 8% 18%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 17% 42%, #b9d9ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 27% 13%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 36% 34%, #d5e9ff 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 46% 19%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 57% 39%, #bcdcff 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 68% 12%, #fff 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 78% 31%, #d8ebff 0 1.2px, transparent 2px),
    radial-gradient(circle at 88% 17%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 94% 43%, #b9d9ff 0 0.9px, transparent 1.6px);
  background-size: 71% 83%, 83% 77%, 91% 89%, 79% 93%, 87% 81%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 3px rgba(143, 198, 255, 0.8));
  animation: heroStarsTwinkle 3.8s ease-in-out infinite alternate;
}

[data-theme='dark'] #web_bg .hero-stars::after {
  position: absolute;
  inset: 5% 2% 0;
  background-image:
    radial-gradient(circle at 13% 24%, #fff 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 31% 46%, #9fcaff 0 1px, transparent 1.8px),
    radial-gradient(circle at 49% 11%, #fff 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 64% 27%, #bedcff 0 1px, transparent 1.8px),
    radial-gradient(circle at 83% 44%, #fff 0 0.8px, transparent 1.5px);
  content: '';
  animation: heroStarsTwinkle 2.9s ease-in-out -1.4s infinite alternate-reverse;
}

[data-theme='dark'] #web_bg .hero-stars::before {
  position: absolute;
  top: 15%;
  left: 17%;
  width: 170px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(208, 231, 255, 0.2) 28%,
      rgba(255, 255, 255, 0.95)
    );
  box-shadow: 45px 0 12px rgba(167, 211, 255, 0.28);
  content: '';
  opacity: 0;
  transform: rotate(-20deg) translate3d(-28vw, -8vh, 0);
  animation: heroShootingStar 9s ease-in-out 1.8s infinite;
}

@keyframes heroHorizonBreathe {
  from {
    opacity: 0.52;
    transform: translate3d(-1.1%, 0.5%, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(1.2%, -0.55%, 0) scale(1.045);
  }
}

@keyframes heroSeaShimmer {
  from {
    opacity: 0.38;
    transform: translate3d(-2.5%, 0.5%, 0) skewX(-1deg);
  }
  to {
    opacity: 0.85;
    transform: translate3d(2.5%, -1%, 0) skewX(1deg);
  }
}

@keyframes heroStarsTwinkle {
  0% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0.58;
    transform: translate3d(0.35%, -0.22%, 0);
  }
}

@keyframes heroWaterLights {
  from {
    opacity: 0.38;
    transform: translate3d(-1.5%, 1%, 0);
  }
  to {
    opacity: 0.9;
    transform: translate3d(1.8%, -1.2%, 0);
  }
}

@keyframes heroShootingStar {
  0%,
  71% {
    opacity: 0;
    transform: rotate(-20deg) translate3d(-28vw, -8vh, 0);
  }
  74% {
    opacity: 1;
  }
  82% {
    opacity: 0;
    transform: rotate(-20deg) translate3d(72vw, 18vh, 0);
  }
  100% {
    opacity: 0;
    transform: rotate(-20deg) translate3d(72vw, 18vh, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #web_bg {
    transition: none;
  }

  #web_bg .hero-horizon-glow,
  #web_bg .hero-sea-shimmer,
  #web_bg .hero-stars,
  #web_bg .hero-stars::before,
  #web_bg .hero-stars::after {
    animation: none !important;
  }

  body.hero-reference-effect #page-header.full_page #site-info,
  body.hero-reference-effect #page-header.full_page #scroll-down {
    transform: none !important;
  }
}