/* ==========================================================================
   YAHCHEH BACKGROUND ENGINE
   Layered atmospheric system, fixed behind content:
   base artwork -> gradient -> nebula -> particles -> geometric symbols
   -> fog/light (breathing) -> content -> UI
   ========================================================================== */

.yah-bg {
  position: fixed;
  inset: 0;
  z-index: var(--yah-z-bg);
  overflow: hidden;
  pointer-events: none;
  background: var(--yah-bg);
}

.yah-bg__layer {
  position: absolute;
  inset: -6%;
  will-change: transform;
}

/* base artwork, real photo where available, gradient fallback otherwise */
.yah-bg__art {
  background-position: center 40%;
  background-size: cover;
  opacity: 0.85;
  transition: opacity var(--yah-transition-slow);
}

.skin-cosmic .yah-bg__art {
  background-image: linear-gradient(180deg, rgba(3, 5, 11, 0.15), rgba(3, 5, 11, 0.9) 85%),
    image-set(
      url("../assets/backgrounds/yahcheh-cosmic.webp") 1x
    );
}

.skin-ancient .yah-bg__art {
  background-image: linear-gradient(180deg, rgba(14, 9, 6, 0.15), rgba(14, 9, 6, 0.9) 85%),
    image-set(url("../assets/backgrounds/yahcheh-ancient.webp") 1x);
}

.skin-void .yah-bg__art {
  background-image: linear-gradient(180deg, rgba(3, 3, 3, 0.15), rgba(3, 3, 3, 0.9) 85%),
    image-set(url("../assets/backgrounds/yahcheh-void.webp") 1x);
}

.skin-psychedelic .yah-bg__art {
  background-image: linear-gradient(180deg, rgba(10, 4, 20, 0.15), rgba(10, 4, 20, 0.9) 85%),
    image-set(url("../assets/backgrounds/yahcheh-psychedelic.webp") 1x);
}

/* atmospheric gradient */
.yah-bg__gradient {
  background: radial-gradient(60% 50% at 50% 0%, var(--yah-glow), transparent 70%),
    linear-gradient(180deg, transparent 0%, var(--yah-bg) 92%);
}

/* nebula / cloud layer, soft drifting blurred blobs */
.yah-bg__nebula {
  filter: blur(60px);
  opacity: 0.55;
  animation: yah-drift 60s ease-in-out infinite alternate;
}

.yah-bg__nebula::before,
.yah-bg__nebula::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, var(--yah-accent-2), transparent 70%);
}

.yah-bg__nebula::before {
  top: -10%;
  left: -8%;
}

.yah-bg__nebula::after {
  bottom: -14%;
  right: -6%;
  background: radial-gradient(circle, var(--yah-accent), transparent 70%);
}

/* particle canvas */
.yah-bg__particles {
  inset: 0;
  z-index: 1;
}

/* geometric symbols, thin gold sacred-geometry motifs */
.yah-bg__geo {
  inset: 0;
  z-index: 2;
  opacity: 0.35;
  color: var(--yah-gold);
}

.yah-bg__geo svg {
  position: absolute;
}

.yah-bg__geo .geo-ring {
  top: 8%;
  left: 50%;
  width: min(60vw, 620px);
  height: min(60vw, 620px);
  transform: translateX(-50%);
}

.yah-bg__geo .geo-cross {
  bottom: 6%;
  right: 6%;
  width: 90px;
  height: 90px;
}

/* fog / breathing light layer */
.yah-bg__breath {
  z-index: 3;
  background: radial-gradient(70% 60% at 50% 20%, var(--yah-glow), transparent 72%);
  animation: yah-breathe var(--yah-breath-duration) ease-in-out infinite;
}

@keyframes yah-breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes yah-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(2%, -3%, 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yah-bg__nebula,
  .yah-bg__breath {
    animation: none;
  }
}