/* Custom Background Logic */
.bg-layer,
.bg-orb {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.bg-layer {
  opacity: 0.9;
}

/* 仅在明确有 has-custom-bg 类时才请求背景图 */
body.has-custom-bg .bg-layer {
  background: url('/background') no-repeat center center fixed;
  background-size: cover;
  opacity: 1;
}

/* 轮播图模式下隐藏 Orb 和默认层 */
body.has-custom-bg .bg-orb,
body.has-carousel-bg .bg-orb,
body.has-carousel-bg .bg-layer { 
  display: none !important; 
}

/* 黑色遮罩层：适用于轮播图模式 */
.bg-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* 黑色遮罩，50% 透明度 */
  z-index: 10; /* 确保遮罩始终在所有图片之上 */
  pointer-events: none;
}

/* 黑色遮罩层：适用于单张固定背景模式 */
body.has-custom-bg .bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Carousel Logic */
.bg-carousel {
  position: fixed;
  inset: 0;
  z-index: -2;
}
.bg-slide {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s ease-in-out;
}
.bg-slide.active {
  opacity: 1;
  z-index: 2;
}

.bg-orb {
  z-index: -1;
  filter: blur(0px);
}

.orb-1,
.orb-2,
.orb-3 {
  position: fixed;
  border-radius: 999px;
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: float 14s ease-in-out infinite;
}

.orb-1 {
  width: 420px;
  height: 420px;
  left: -140px;
  top: 80px;
  background: radial-gradient(circle at 30% 30%, rgba(45, 212, 191, 0.5), transparent 65%);
}

.orb-2 {
  width: 360px;
  height: 360px;
  right: -120px;
  top: 120px;
  animation-delay: -4s;
  background: radial-gradient(circle at 40% 40%, rgba(34, 211, 238, 0.4), transparent 70%);
}

.orb-3 {
  width: 520px;
  height: 520px;
  right: 10%;
  bottom: -200px;
  animation-delay: -8s;
  background: radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.35), transparent 70%);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-18px);
  }
}

body.bg-gradient .bg-layer {
  background:
    radial-gradient(900px 400px at 10% 10%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(900px 360px at 90% 10%, rgba(245, 158, 11, 0.12), transparent 60%),
    linear-gradient(150deg, #05070a 0%, #0d1520 55%, #0f172a 100%);
}

body.bg-grid .bg-layer {
  background:
    linear-gradient(180deg, rgba(5, 7, 10, 0.9), rgba(15, 23, 42, 0.92)),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 100% 100%, 60px 60px, 60px 60px;
}

body.bg-mesh .bg-layer {
  background:
    radial-gradient(400px 300px at 20% 30%, rgba(45, 212, 191, 0.18), transparent 70%),
    radial-gradient(500px 380px at 70% 20%, rgba(34, 211, 238, 0.16), transparent 72%),
    radial-gradient(500px 380px at 50% 80%, rgba(245, 158, 11, 0.12), transparent 75%),
    linear-gradient(160deg, #05070a 0%, #0b1118 45%, #121a24 100%);
}

body.bg-stars .bg-layer {
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 80% 20%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(2px 2px at 40% 40%, rgba(34, 211, 238, 0.5), transparent 60%),
    linear-gradient(180deg, #05070a 0%, #0f172a 100%);
}

body.bg-noise .bg-layer {
  background:
    linear-gradient(180deg, rgba(5, 7, 10, 0.96), rgba(15, 23, 42, 0.94)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 6px);
}