/* fx-bg · per-section interactive backgrounds. Pair with fx-bg.js.
   Everything sits under the content (z-index -1 inside an isolated section). */
.fx-bg-host { position: relative; isolation: isolate; }
.fx-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.fx-bg canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
/* every background fades out at the section edges so neighbours never collide */
.fx-bg { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }

/* ---- spotlight (modes): fine grid lit around the cursor --------------------- */
.fx-bg--spotlight { --mx: 50%; --my: 40%; }
.fx-bg--spotlight::before, .fx-bg--spotlight::after { content: ""; position: absolute; inset: 0; }
.fx-bg--spotlight::before {
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center;
  -webkit-mask-image: radial-gradient(circle 380px at var(--mx) var(--my), #000, transparent 75%);
  mask-image: radial-gradient(circle 380px at var(--mx) var(--my), #000, transparent 75%);
}
.fx-bg--spotlight::after {
  background: radial-gradient(circle 300px at var(--mx) var(--my), rgba(255,106,0,.13), transparent 70%);
  opacity: calc(.55 + .45 * var(--on, 0)); transition: opacity .6s;
}

/* ---- shield (privacy): hexes with a few locks, drifting, under a vignette -- */
.fx-bg--shield { --mx: 50%; --my: 50%; }
.fx-bg--shield::before {
  content: ""; position: absolute; inset: -104px; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M30 2h60l30 50-30 50H30L0 52z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff6a00' stroke-opacity='.22' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='53' y='50' width='14' height='11' rx='2.5'/%3E%3Cpath d='M56 50v-3.5a4 4 0 0 1 8 0V50'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 104px;
  animation: fx-bg-drift 60s linear infinite;
  -webkit-mask-image: radial-gradient(circle 520px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.12) 100%);
  mask-image: radial-gradient(circle 520px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.12) 100%);
}
.fx-bg--shield::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%); }
@keyframes fx-bg-drift { to { transform: translate3d(120px, 104px, 0); } }

/* ---- mesh (FAQ): three soft fields breathing very slowly ------------------- */
.fx-bg--mesh { --mx: 50%; --my: 50%; }
.fx-bg--mesh::before, .fx-bg--mesh::after { content: ""; position: absolute; border-radius: 50%; will-change: transform; }
.fx-bg--mesh::before {
  inline-size: 70vmax; aspect-ratio: 1; inset-block-start: -30%; inset-inline-start: -15%;
  background: radial-gradient(closest-side, rgba(255,106,0,.16), rgba(217,79,0,.06) 55%, transparent 72%);
  animation: fx-bg-mesh1 34s ease-in-out infinite alternate;
}
.fx-bg--mesh::after {
  inline-size: 60vmax; aspect-ratio: 1; inset-block-end: -35%; inset-inline-end: -12%;
  background: radial-gradient(closest-side, rgba(255,255,255,.05), rgba(232,93,0,.07) 45%, transparent 72%);
  animation: fx-bg-mesh2 42s ease-in-out infinite alternate;
}
@keyframes fx-bg-mesh1 { to { transform: translate3d(18%, 14%, 0) scale(1.15); } }
@keyframes fx-bg-mesh2 { to { transform: translate3d(-16%, -10%, 0) scale(.9); } }

/* ---- light theme: same ideas, ink instead of white, orange a touch lower --- */
@media (prefers-color-scheme: light) {
  .fx-bg--spotlight::before { background-image: linear-gradient(rgba(20,17,14,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(20,17,14,.08) 1px, transparent 1px); }
  .fx-bg--spotlight::after { background: radial-gradient(circle 300px at var(--mx) var(--my), rgba(255,106,0,.09), transparent 70%); }
  .fx-bg--shield::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%2314110e' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M30 2h60l30 50-30 50H30L0 52z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b84a00' stroke-opacity='.28' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='53' y='50' width='14' height='11' rx='2.5'/%3E%3Cpath d='M56 50v-3.5a4 4 0 0 1 8 0V50'/%3E%3C/g%3E%3C/svg%3E"); }
  .fx-bg--shield::after { background: radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(245,243,239,.7) 100%); }
  .fx-bg--mesh::before { background: radial-gradient(closest-side, rgba(255,106,0,.10), rgba(217,79,0,.04) 55%, transparent 72%); }
  .fx-bg--mesh::after { background: radial-gradient(closest-side, rgba(20,17,14,.04), rgba(232,93,0,.05) 45%, transparent 72%); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-bg::before, .fx-bg::after { animation: none !important; transition: none !important; }
}