/* FTG "Candlelit manuscript" body background. Tier 1: CSS light pools (transform/opacity only)
   plus a small 2D canvas of gold motes. The layer element is created by ftg-bg.js.
   Tuning knobs are the --ftg-bg-* custom properties on .ftg-bg below. */

/* Page content must paint above the fixed layer. A positioned #page with z-index:auto
   creates no stacking context; the layer is the first child of <body>, so it paints first. */
body.ftg-theme #page { position: relative; }

.ftg-bg {
  --ftg-bg-amp: 1;        /* drift distance multiplier (0 = pools still) */
  --ftg-bg-slow: 1;       /* period multiplier: 1 = 26-39 s, 2 = 52-78 s */
  --ftg-bg-glow: 1;       /* light pool strength multiplier */
  --ftg-bg-motes: 14;     /* gold motes on desktop (0 = none) */
  --ftg-bg-motes-phone: 0;/* motes under 700 px wide; 0 = none (4 costs ~8% of a 4x-throttled main thread for a 35 px strip) */
  --ftg-bg-fps: 24;       /* mote draw rate cap */
  --ftg-bg-rise: 1;       /* mote rise speed multiplier */
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict;
}

/* A faint static vignette so the pools have an edge to light against. */
.ftg-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(143,109,21,0) 55%, rgba(143,109,21,.075) 100%);
}

.ftg-bg__pool {
  position: absolute; border-radius: 50%; will-change: transform, opacity;
  width: var(--s); height: var(--s); left: var(--x); top: var(--y); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  /* gaussian-shaped falloff: many stops, so no visible rings */
  background: radial-gradient(circle closest-side,
    rgba(246, 226, 160, calc(.50 * var(--ftg-bg-glow))) 0%,
    rgba(246, 226, 160, calc(.44 * var(--ftg-bg-glow))) 14%,
    rgba(244, 222, 152, calc(.31 * var(--ftg-bg-glow))) 30%,
    rgba(242, 218, 146, calc(.18 * var(--ftg-bg-glow))) 46%,
    rgba(240, 214, 140, calc(.09 * var(--ftg-bg-glow))) 62%,
    rgba(238, 212, 136, calc(.035 * var(--ftg-bg-glow))) 80%,
    rgba(238, 212, 136, 0) 100%);
  /* resting frame (reduced motion, or before the animation attaches): pool at mid-drift */
  transform: translate3d(calc(var(--dx) * var(--ftg-bg-amp) * .5), calc(var(--dy) * var(--ftg-bg-amp) * .5), 0) scale(1.04);
  animation: ftg-bg-drift calc(var(--p) * var(--ftg-bg-slow)) ease-in-out var(--d) infinite alternate;
}
.ftg-bg__pool:nth-of-type(1) { --s: 78vmax; --x: 18%; --y: 22%; --dx: 9vw;  --dy: 6vh;  --p: 29s; --d: -9s; }
.ftg-bg__pool:nth-of-type(2) { --s: 66vmax; --x: 84%; --y: 58%; --dx: -8vw; --dy: -7vh; --p: 37s; --d: -21s; }
.ftg-bg__pool:nth-of-type(3) { --s: 54vmax; --x: 46%; --y: 96%; --dx: 7vw;  --dy: -9vh; --p: 41s; --d: -4s; }

@keyframes ftg-bg-drift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .78; }
  to   { transform: translate3d(calc(var(--dx) * var(--ftg-bg-amp)), calc(var(--dy) * var(--ftg-bg-amp)), 0) scale(1.08); opacity: 1; }
}

/* one canvas per margin; ftg-bg.js sets left and width */
.ftg-bg__motes { position: absolute; top: 0; height: 100%; display: block; }

/* Pause: hidden tab, off-screen, or the Motion control is off. */
.ftg-bg.is-paused .ftg-bg__pool { animation-play-state: paused; }

/* Reduced motion: still, warm frame. No animation, no motes. */
@media (prefers-reduced-motion: reduce) {
  .ftg-bg__pool { animation: none; }
  .ftg-bg__motes { display: none; }
}
.ftg-bg.tier-0 .ftg-bg__pool { animation: none; }
.ftg-bg.tier-0 .ftg-bg__motes { display: none; }

/* Motion control (WCAG 2.2.2). Lives in the footer; fixed bottom-right if there is no footer. */
.wf-motion-toggle {
  font: 600 .9375rem/1.2 var(--ftg-font-body, system-ui, sans-serif); letter-spacing: .02em;
  display: block; min-height: 44px; min-width: 44px; padding: 8px 14px; margin: .75rem auto 0; cursor: pointer;
  color: var(--ftg-gold-light, #E8CD7C); background: transparent;
  border: 1px solid var(--ftg-gold, #C9A227); border-radius: 2px;
}
.wf-motion-toggle[hidden] { display: none; }
.wf-motion-toggle:hover { background: rgba(232, 205, 124, .12); }
.wf-motion-toggle:focus-visible { outline: 3px solid var(--ftg-gold-light, #E8CD7C); outline-offset: 3px; }
.wf-motion-toggle.is-floating {
  position: fixed; right: 12px; bottom: 12px; z-index: 901; margin: 0;
  color: var(--ftg-navy, #1F3A5F); background: var(--ftg-folio, #FBF8F1); border-color: var(--ftg-gold-dark, #8F6D15);
}