/* ============================================================
   Atmospheric background - layered, slow, candlelit
   Sits behind all content (.bg-atmos, z-index:-1, fixed).
   - two pattern depths, larger + fainter, gentle drift
   - warm wandering glow (candlelight / incense)
   - veil that fades the texture behind text for legibility
   - scroll parallax applied via --par* by bg.js
   ============================================================ */

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

.bg-layer {
  position: absolute; inset: -30%;
  background-repeat: repeat;
  will-change: transform, background-position;
}

/* Two pattern depths - large repeats, very low contrast */
.bg-geo {
  background-image: var(--pat-geo);
  background-size: 460px 460px;
  opacity: 0.13;
  transform: translate3d(0, var(--par1, 0px), 0);
  animation: bgDrift1 140s linear infinite;
}
.bg-geo2 {
  background-image: var(--pat-geo);
  background-size: 760px 760px;
  opacity: 0.08;
  transform: translate3d(0, var(--par2, 0px), 0);
  animation: bgDrift2 200s linear infinite;
}
@keyframes bgDrift1 {
  from { background-position: 0px 0px; }
  to   { background-position: 560px 280px; }
}
@keyframes bgDrift2 {
  from { background-position: 0px 0px; }
  to   { background-position: -920px 460px; }
}

/* Warm candlelight pools - slowly wander and breathe */
.bg-glow {
  position: absolute; border-radius: 50%; filter: blur(24px);
  will-change: transform;
}
.bg-glow.a {
  width: 92vmax; height: 92vmax; left: 58%; top: 6%;
  background: radial-gradient(circle at center, rgba(202,166,74,0.13), rgba(202,166,74,0) 60%);
  animation: bgGlowA 52s ease-in-out infinite alternate;
}
.bg-glow.b {
  width: 74vmax; height: 74vmax; left: 8%; top: 72%;
  background: radial-gradient(circle at center, rgba(31,79,67,0.10), rgba(31,79,67,0) 62%);
  animation: bgGlowB 68s ease-in-out infinite alternate; animation-delay: -12s;
}
@keyframes bgGlowA {
  0%   { transform: translate(-6%, -4%) scale(1); }
  50%  { transform: translate(7%, 7%) scale(1.16); }
  100% { transform: translate(-2%, 11%) scale(1.05); }
}
@keyframes bgGlowB {
  0%   { transform: translate(4%, 3%) scale(1.05); }
  50%  { transform: translate(-7%, -6%) scale(1.18); }
  100% { transform: translate(3%, -2%) scale(1); }
}

/* Legibility veil - softly lifts the central content band without
   erasing the texture. Gentle, so the pattern still reads. */
.bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 34%, rgba(246,242,233,0.62), rgba(246,242,233,0) 66%),
    linear-gradient(180deg, rgba(246,242,233,0.35) 0%, rgba(246,242,233,0) 18%, rgba(246,242,233,0) 82%, rgba(246,242,233,0.4) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .bg-geo, .bg-geo2, .bg-glow { animation: none; }
}

/* On small screens, ease the work the GPU does */
@media (max-width: 600px) {
  .bg-glow { filter: blur(16px); }
  .bg-geo { opacity: 0.11; }
}