/* ==========================================================================
   Fastkava — animated page background ("bgfx")
   Adapted from the design project's Animation.dc.html.

   One fixed, layered field behind the whole document: base gradient → drifting
   blurred orbs → dust canvas → bottom glow → vignette → grain.
   Scroll drives it: theme.js interpolates between keyframes (smoothstep, with
   inertia) and publishes the per-layer intensities as custom properties.

   It sits at z-index -1, BEHIND every element's own background. That is what
   keeps the hero (B1) untouched — the hero paints an opaque photo over it — while
   the flow (B2–B13) and the footer (B14) are transparent, so the field shows
   through and the footer reads as part of the same animation.
   ========================================================================== */

.fk-bgfx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Defaults so the field looks right before the first scroll frame lands,
     and stays sane if JS never runs at all. */
  --fk-glow: .20;
  --fk-vig: .72;
  --fk-grain: .045;
}

/* ---- Base surface -------------------------------------------------------- */
.fk-bgfx__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(176deg, #040303 0%, #080605 52%, #040303 100%);
}
:root[data-theme="light"] .fk-bgfx__base {
  background: linear-gradient(176deg, #F5EFE6 0%, #EFE6D8 52%, #F5EFE6 100%);
}

/* ---- Orbs: removed -------------------------------------------------------
   The drifting circles are gone. They were the field's whole animation and also
   its whole cost history: blurred layers with animated transforms, re-rasterised
   every frame. The dust canvas is the only moving element now, and it draws
   itself — nothing here to declare. */

/* ---- Dust ---------------------------------------------------------------- */
.fk-bgfx__dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Bottom glow — this is what the footer sits on ------------------------ */
.fk-bgfx__glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30vh;
  opacity: var(--fk-glow);
  background: linear-gradient(to top,
    rgba(251, 83, 0, .60) 0%,
    rgba(251, 83, 0, .10) 46%,
    transparent 100%);
}

/* ---- Vignette + grain ---------------------------------------------------- */
.fk-bgfx__vignette {
  position: absolute; inset: 0;
  opacity: var(--fk-vig);
  background: radial-gradient(ellipse at 50% 45%,
    rgba(0,0,0,0) 26%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.94) 100%);
}
:root[data-theme="light"] .fk-bgfx__vignette {
  opacity: calc(var(--fk-vig) * .28);
  background: radial-gradient(ellipse at 50% 45%,
    rgba(120,90,60,0) 30%, rgba(120,90,60,.16) 66%, rgba(90,66,44,.30) 100%);
}

.fk-bgfx__grain {
  position: absolute; inset: 0;
  opacity: var(--fk-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---- Cost control -------------------------------------------------------- */
@media (max-width: 900px) {
  /* The orb overrides that used to live here went with the orbs themselves.
     The dust canvas is skipped below 900px by theme.js, not by CSS — see
     wantsDust() — so a phone now paints the base, glow and vignette and nothing
     else. */

  /* Blending a full-viewport noise texture over the whole stack forces the
     entire field into one composited group on every paint. Not worth it here. */
  .fk-bgfx__grain { display: none; }
}

/* No reduced-motion block is needed any more: the only moving part left is the
   dust canvas, and theme.js already skips its whole loop when motion is off. */