/* ==========================================================================
   FOREMAN — Animated Brand Backgrounds
   Drop-in, CSS-only. Apply a class to any container (give it position/overflow).
   All motion is gated behind prefers-reduced-motion: the static look is the
   base, animation is additive — so reduced-motion users get a clean still.
   ========================================================================== */

[class^="fm-bg-"], [class*=" fm-bg-"] { position: relative; overflow: hidden; }

/* 1 ── HAZARD TAPE — sliding diagonal caution stripes -----------------------
   Best for: alert banners, accent strips, "stop / attention" headers.        */
.fm-bg-hazard{
  background-image: repeating-linear-gradient(45deg,
    #16140F 0 24px, #FFD400 24px 48px);
}

/* 2 ── BLUEPRINT — ink grid with a slow drift + diagonal survey sweep --------
   Best for: dark heroes, login / splash, empty dashboards.                    */
.fm-bg-blueprint{
  background-color:#16140F;
  background-image:
    linear-gradient(rgba(255,212,0,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,212,0,.09) 1px, transparent 1px);
  background-size: 44px 44px;
}
.fm-bg-blueprint::after{
  content:""; position:absolute; inset:-50%;
  background: linear-gradient(115deg, transparent 42%,
    rgba(255,212,0,.10) 50%, transparent 58%);
}

/* 3 ── CHEVRONS — directional markers flowing forward -----------------------
   Best for: progress / loading states, section dividers, "in motion".         */
.fm-bg-chevrons{
  background-color:#211E17;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='26'%3E%3Cpath d='M0 20 L24 6 L48 20' fill='none' stroke='rgba(255,212,0,0.16)' stroke-width='4'/%3E%3C/svg%3E");
  background-size: 48px 26px;
}

/* 4 ── SURVEY — warm dotted grid with a drifting spotlight ------------------
   Best for: light heroes, empty states, onboarding on paper.                  */
.fm-bg-survey{
  background-color:#FAF7F2;
  background-image: radial-gradient(circle, #D8D0C2 1.4px, transparent 1.7px);
  background-size: 24px 24px;
}
.fm-bg-survey::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(280px 280px at 30% 40%, rgba(255,212,0,.18), transparent 70%);
}

/* 5 ── DUST — sparks / site dust drifting upward on ink ---------------------
   Best for: ambient panels, modal backdrops, splash screens.                  */
.fm-bg-dust{
  background-color:#16140F;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23FFD400'%3E%3Ccircle cx='18' cy='30' r='1.6' opacity='.9'/%3E%3Ccircle cx='66' cy='12' r='1' opacity='.5'/%3E%3Ccircle cx='104' cy='44' r='1.8' opacity='.7'/%3E%3Ccircle cx='130' cy='90' r='1' opacity='.45'/%3E%3Ccircle cx='40' cy='78' r='1.3' opacity='.65'/%3E%3Ccircle cx='86' cy='104' r='1' opacity='.5'/%3E%3Ccircle cx='12' cy='120' r='1.5' opacity='.7'/%3E%3Ccircle cx='58' cy='62' r='.9' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* 6 ── SIGNAL GLOW — warm light blobs slowly pulsing on ink -----------------
   Best for: cards, feature backdrops, calmer dark surfaces.                   */
.fm-bg-glow{ background-color:#16140F; }
.fm-bg-glow::before,
.fm-bg-glow::after{
  content:""; position:absolute; border-radius:50%; filter: blur(46px);
}
.fm-bg-glow::before{
  width:46%; padding-bottom:46%; left:-6%; top:-18%;
  background: radial-gradient(circle, rgba(255,212,0,.20), transparent 70%);
}
.fm-bg-glow::after{
  width:50%; padding-bottom:50%; right:-10%; bottom:-22%;
  background: radial-gradient(circle, rgba(255,212,0,.12), transparent 70%);
}

/* ── MOTION (additive; off when the user prefers reduced motion) ──────────── */
@media (prefers-reduced-motion: no-preference){
  /* hazard: animate a transform on an oversized layer (GPU-smooth), not
     background-position (snaps to whole px). 67.8823px = 48px stripe
     period × √2 = exactly one horizontal repeat, so the loop is seamless. */
  .fm-bg-hazard::before{
    content:""; position:absolute; top:0; bottom:0; left:-136px; right:0;
    background-image: repeating-linear-gradient(45deg,
      #16140F 0 24px, #FFD400 24px 48px);
    animation: fm-hazard 2.4s linear infinite;
    will-change: transform;
  }
  .fm-bg-blueprint{ animation: fm-drift 18s linear infinite; }
  .fm-bg-blueprint::after{ animation: fm-sweep 7s ease-in-out infinite; }
  .fm-bg-chevrons { animation: fm-flow 1.4s linear infinite; }
  .fm-bg-survey::after{ animation: fm-spotlight 16s ease-in-out infinite alternate; }
  .fm-bg-dust     { animation: fm-rise 9s linear infinite; }
  .fm-bg-glow::before{ animation: fm-glowA 11s ease-in-out infinite alternate; }
  .fm-bg-glow::after { animation: fm-glowB 13s ease-in-out infinite alternate; }
}

@keyframes fm-hazard   { to { transform: translateX(67.8823px); } }
@keyframes fm-drift    { to { background-position: 44px 44px, 44px 44px; } }
@keyframes fm-sweep    { 0%,100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
@keyframes fm-flow     { to { background-position: 0 26px; } }
@keyframes fm-spotlight{ to { background: radial-gradient(280px 280px at 78% 66%, rgba(255,212,0,.18), transparent 70%); } }
@keyframes fm-rise     { to { background-position: 0 -140px; } }
@keyframes fm-glowA    { 0%{ transform: translate(0,0) scale(1); opacity:.9 } 100%{ transform: translate(14%,10%) scale(1.15); opacity:1 } }
@keyframes fm-glowB    { 0%{ transform: translate(0,0) scale(1.05); opacity:.8 } 100%{ transform: translate(-12%,-8%) scale(1); opacity:1 } }