/**
 * Living background system — global scene + section overlays.
 * Multi-plane scroll parallax + per-layer cursor parallax on .ks-living-layer--back|mid|front.
 * Depends on Forge / product tokens (--fs-* when forgesdlc-theme loads; --forge-* fallback in showcase).
 * Pair with ks-animated-backgrounds.css and KsAmbientBg for inlined SVG.
 */

:root {
  --ks-living-scroll: 0;
  --ks-living-parallax-x: 0;
  --ks-living-parallax-y: 0;
}

/* Parallax distances (px-equivalent); reduced mode halves via [data-ks-living-parallax-depth] */
#ks-living-scene {
  --ks-parallax-back: -16px;
  --ks-parallax-mid: -36px;
  --ks-parallax-front: -58px;
}

#ks-living-scene[data-ks-living-parallax-depth="reduced"] {
  --ks-parallax-back: -8px;
  --ks-parallax-mid: -18px;
  --ks-parallax-front: -28px;
}

html[data-bs-theme="light"] #ks-living-scene {
  --ks-parallax-back: -12px;
  --ks-parallax-mid: -28px;
  --ks-parallax-front: -44px;
}

html[data-bs-theme="light"] #ks-living-scene[data-ks-living-parallax-depth="reduced"] {
  --ks-parallax-back: -6px;
  --ks-parallax-mid: -14px;
  --ks-parallax-front: -22px;
}

/* Cursor-driven parallax on each SVG plane (front moves more than back) */
#ks-living-scene {
  --ks-cursor-shift-back: 6px;
  --ks-cursor-shift-mid: 11px;
  --ks-cursor-shift-front: 18px;
}

#ks-living-scene[data-ks-living-parallax-depth="reduced"] {
  --ks-cursor-shift-back: 3px;
  --ks-cursor-shift-mid: 5px;
  --ks-cursor-shift-front: 9px;
}

html[data-bs-theme="light"] #ks-living-scene {
  --ks-cursor-shift-back: 5px;
  --ks-cursor-shift-mid: 9px;
  --ks-cursor-shift-front: 14px;
}

html[data-bs-theme="light"] #ks-living-scene[data-ks-living-parallax-depth="reduced"] {
  --ks-cursor-shift-back: 2px;
  --ks-cursor-shift-mid: 4px;
  --ks-cursor-shift-front: 7px;
}

/* Global fixed field: below sticky header (z-index 30), above aurora */
body.ks-living-enabled .ks-living-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  pointer-events: none;
  z-index: 0;
}

body.ks-living-enabled .ks-living-scene__global.ks-ambient-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

body.ks-living-enabled .ks-living-scene__global.ks-ambient-bg > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Opacity tied to scroll narrative (subtle): mid-page slightly more structure */
body.ks-living-enabled .ks-living-scene__global.ks-ambient-bg {
  opacity: calc(0.4 + var(--ks-living-scroll, 0) * 0.2);
}

/* Multi-plane scroll + cursor parallax (GPU: transform on SVG groups) */
@media (prefers-reduced-motion: no-preference) {
  body.ks-living-enabled .ks-living-scene__global svg .ks-living-layer--back {
    transform: translate3d(
        calc(var(--ks-living-parallax-x, 0) * var(--ks-cursor-shift-back)),
        calc(
          var(--ks-living-scroll, 0) * var(--ks-parallax-back) +
            var(--ks-living-parallax-y, 0) * var(--ks-cursor-shift-back)
        ),
        0
      )
      scale(calc(1 + var(--ks-living-scroll, 0) * 0.022));
    transform-box: fill-box;
    transform-origin: center center;
    will-change: transform;
  }

  body.ks-living-enabled .ks-living-scene__global svg .ks-living-layer--mid {
    transform: translate3d(
      calc(var(--ks-living-parallax-x, 0) * var(--ks-cursor-shift-mid)),
      calc(
        var(--ks-living-scroll, 0) * var(--ks-parallax-mid) +
          var(--ks-living-parallax-y, 0) * var(--ks-cursor-shift-mid)
      ),
      0
    );
    transform-box: fill-box;
    transform-origin: center center;
    will-change: transform;
  }

  body.ks-living-enabled .ks-living-scene__global svg .ks-living-layer--front {
    transform: translate3d(
      calc(var(--ks-living-parallax-x, 0) * var(--ks-cursor-shift-front)),
      calc(
        var(--ks-living-scroll, 0) * var(--ks-parallax-front) +
          var(--ks-living-parallax-y, 0) * var(--ks-cursor-shift-front)
      ),
      0
    );
    transform-box: fill-box;
    transform-origin: center center;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ks-living-enabled .ks-living-scene__global svg .ks-living-layer--back,
  body.ks-living-enabled .ks-living-scene__global svg .ks-living-layer--mid,
  body.ks-living-enabled .ks-living-scene__global svg .ks-living-layer--front {
    transform: none !important;
    will-change: auto;
  }
}

/* Slow drift on inner groups (nested so parallax transform stays on parent layer) */
@media (prefers-reduced-motion: no-preference) {
  body.ks-living-enabled .ks-living-drift-layer {
    animation: ks-living-drift 52s ease-in-out infinite alternate;
    transform-origin: 50% 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ks-living-enabled .ks-living-drift-layer {
    animation: none !important;
  }
}

@keyframes ks-living-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(0.8%, -1.1%) scale(1.02);
  }
}

/* Section-local ambient: sits under prose, above section ::before wash */
.ks-living-section {
  position: relative;
  overflow: hidden;
}

.ks-living-section > .ks-section-bg.ks-ambient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--ks-living-section-opacity, 0.5);
}

.ks-living-section > .ks-section-bg.ks-ambient-bg > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ks-living-section > .container-fluid,
.ks-living-section > .container {
  position: relative;
  z-index: 1;
}

/* Reduce double-fill when global field + section gradients both active */
body.ks-living-enabled .fs-home-section::before {
  opacity: 0.28;
}

/* Showcase / handbook: hero band archetype hint */
body.ks-living-enabled .landing-hero.fs-landing-hero-band {
  position: relative;
}

html[data-bs-theme="light"] body.ks-living-enabled .ks-living-scene__global.ks-ambient-bg {
  opacity: calc(0.26 + var(--ks-living-scroll, 0) * 0.14);
}