@use '../../assets/scss/variables' as *;

// 装饰层随主内容滚动；宽度铺满视口（main 仅约束正文列宽，背景需 full-bleed）
.ntq-page-background {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: $ntq-page-bg-height;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

// Photo layer (::before equivalent): full-bleed image with blur.
.ntq-page-background__photo {
  position: absolute;
  inset: -24px;
  background-image: var(--ntq-page-bg-url);
  background-size: cover;
  background-position: center;
  filter: blur(22px);
  transform: scale(1.05);
  opacity: 0.42;
}

// Veil layer (::after equivalent): extra blur + ink fade for blending into page base.
.ntq-page-background__veil {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(
    180deg,
    var(--ntq-ink) 0%,
    rgba(6, 6, 18, 0.55) 14%,
    rgba(6, 6, 18, 0.12) 48%,
    rgba(6, 6, 18, 0.55) 86%,
    var(--ntq-ink) 100%
  );
}

@media (max-width: $ntq-body-min-width) {
  .ntq-page-background {
    width: max(100vw, #{$ntq-body-min-width});
  }
}
