/* ============================================================
   ambience.css — brand background system for lifedesignbox pages
   Kills the flat-ink void under the hero: a living warm base, a faint
   pixel grid + film grain, a scroll-following warm glow, drifting pixel
   motes, alternating section bands for rhythm, and reusable darkened
   pixel-art "scene bands" as breather backdrops.
   All layers are fixed/behind content (z-index negative) and text-safe.
   Static layers render for everyone; motion layers gate on html.motion.
   ============================================================ */

/* let the fixed ambient show through: html carries the fallback ink,
   body goes transparent so the z-index:-N layers are visible behind flow content */
html { background-color: #100d09; }
body { background: transparent; }

/* --- fixed ambient stack (injected by ambience.js) --- */
.amb-layer { position: fixed; inset: 0; pointer-events: none; }

.amb-base {
  z-index: -4;
  background:
    radial-gradient(125% 85% at 50% -12%, #1d1811 0%, #14110c 46%, #100d09 100%),
    radial-gradient(90% 45% at 50% 112%, rgba(201, 109, 67, 0.10), transparent 62%);
}

.amb-grid {
  z-index: -3;
  opacity: 0.045;
  background-image:
    linear-gradient(rgba(246, 240, 223, 0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 240, 223, 0.32) 1px, transparent 1px);
  background-size: 24px 24px;
  mix-blend-mode: soft-light;
}

.amb-grain {
  z-index: -2;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the scroll-following warm glow; ambience.js moves + tints it */
.amb-glow {
  z-index: -3;
  width: 78vw;
  height: 78vw;
  max-width: 60rem;
  max-height: 60rem;
  left: 50%;
  top: 30%;
  margin-left: -39vw;
  margin-top: -39vw;
  border-radius: 50%;
  opacity: 0;
  filter: blur(40px);
  background: radial-gradient(circle at center, rgba(215, 181, 109, 0.16), rgba(215, 181, 109, 0.05) 42%, transparent 70%);
  will-change: transform, opacity;
  transition: opacity 900ms var(--ease);
}

/* drifting pixel motes canvas */
.amb-motes { z-index: -2; }

/* --- alternating section bands (rhythm / chunking, full-bleed) --- */
.lp-section { position: relative; }
.lp-section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: linear-gradient(180deg, rgba(28, 21, 13, 0) 0%, rgba(28, 21, 13, 0.55) 12%, rgba(28, 21, 13, 0.55) 88%, rgba(28, 21, 13, 0) 100%);
  border-top: 1px solid rgba(215, 181, 109, 0.06);
  border-bottom: 1px solid rgba(215, 181, 109, 0.06);
  pointer-events: none;
}

/* --- reusable pixel-art scene band (a darkened world backdrop breather) --- */
.scene-band {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: clamp(15rem, 40vh, 24rem);
  margin: clamp(1.5rem, 5vh, 3.5rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.scene-band__img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: saturate(0.82) contrast(0.96) brightness(0.46);
  will-change: transform;
}
.scene-band__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(20, 17, 12, 0.28) 26%, rgba(20, 17, 12, 0.28) 74%, var(--ink) 100%),
    radial-gradient(70% 60% at 50% 50%, transparent, rgba(20, 17, 12, 0.35) 100%);
}
.scene-band__line {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(1.1rem, 4vh, 2.2rem);
  transform: translateX(-50%);
  margin: 0;
  width: min(46.4rem, calc(100vw - 2.4rem));
  color: rgba(246, 240, 223, 0.9);
  font: 500 clamp(0.78rem, 1.1vw, 0.95rem)/1.4 var(--mono);
  text-transform: lowercase;
  text-align: center;
  text-shadow: 0 0.2rem 1.4rem rgba(0, 0, 0, 0.6);
}
.scene-band__line b { color: var(--code); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .amb-motes { display: none; }
  .amb-glow { display: none; }
}