/* background_visuals.css
   Shared “playbook” motif + glassy blur + hero gradient
   ---------------------------------------------------- */

/* 1) Slow pan for the white lines/X’s/O’s */
@keyframes hv-playbook-pan { from{background-position:0 0;} to{background-position:900px 0;} }

/* 2) The page wrapper draws the SVG playbook on every page */
.page-wrap{ position:relative; }
.page-wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'>\
      <defs><marker id='arrow' viewBox='0 0 10 10' refX='6' refY='5' markerWidth='6' markerHeight='6' orient='auto-start-reverse'>\
        <path d='M0,0 L10,5 L0,10 Z' fill='rgba(255,255,255,0.28)'/></marker></defs>\
      <g fill='none' stroke='rgba(255,255,255,0.28)' stroke-width='2' stroke-linecap='round'>\
        <path d='M60,520 Q180,460 300,500' marker-end='url(%23arrow)' stroke-dasharray='14 14'/>\
        <path d='M120,160 Q240,120 360,160' marker-end='url(%23arrow)' stroke-dasharray='12 12'/>\
        <path d='M420,360 Q520,300 620,340' marker-end='url(%23arrow)' stroke-dasharray='12 12'/>\
        <path d='M520,120 Q580,160 640,140' marker-end='url(%23arrow)'/>\
        <path d='M80,300 Q160,260 240,300' marker-end='url(%23arrow)'/>\
        <path d='M340,260 Q420,220 500,260' marker-end='url(%23arrow)' stroke-dasharray='12 12'/>\
        <path d='M660,420 Q740,380 820,420' marker-end='url(%23arrow)'/>\
        <path d='M420,480 Q500,520 580,500' marker-end='url(%23arrow)' stroke-dasharray='14 14'/>\
        <path d='M260,420 Q340,380 420,420' marker-end='url(%23arrow)'/>\
        <path d='M680,220 Q760,180 840,220' marker-end='url(%23arrow)' stroke-dasharray='12 12'/>\
        <path d='M40,540 C140,500 240,540 340,500' opacity='.7'/>\
        <path d='M200,100 C260,140 320,140 380,100' opacity='.7'/>\
      </g>\
      <g stroke='rgba(255,255,255,0.28)' stroke-width='2'>\
        <path d='M250,300 l20,20 m-20,0 l20,-20'/>\
        <path d='M700,180 l18,18 m-18,0 l18,-18'/>\
        <path d='M420,420 l18,18 m-18,0 l18,-18'/>\
        <path d='M160,220 l16,16 m-16,0 l16,-16'/>\
        <path d='M560,260 l16,16 m-16,0 l16,-16'/>\
      </g>\
      <g fill='none' stroke='rgba(255,255,255,0.28)' stroke-width='2'>\
        <circle cx='620' cy='180' r='14'/>\
        <circle cx='150' cy='120' r='10'/>\
        <circle cx='560' cy='420' r='10'/>\
        <circle cx='340' cy='160' r='8'/>\
        <circle cx='760' cy='320' r='9'/>\
      </g>\
      <g fill='rgba(255,255,255,0.22)'>\
        <circle cx='120' cy='480' r='3'/>\
        <circle cx='690' cy='260' r='3'/>\
        <circle cx='520' cy='360' r='3'/>\
        <circle cx='230' cy='90' r='3'/>\
        <circle cx='810' cy='460' r='3'/>\
      </g>\
    </svg>");
  background-size:900px auto; background-repeat:repeat; background-position:0 0;
  animation: hv-playbook-pan 180s linear infinite;
  will-change: background-position;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.45));
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.45));
}
@media (prefers-reduced-motion: reduce){ .page-wrap::before{ animation:none; } }

/* 3) The cyan+lime soft spotlight that sits behind hero sections */
.hv-hero-bg{
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(33,212,253,.06), transparent 60%),
    radial-gradient(700px 500px at 110% 10%, rgba(167,244,50,.05), transparent 60%);
  background-color: transparent; /* falls back to page bg from your page CSS */
}

/* 4) Optional helper if you ever need to apply the glass look ad-hoc */
.hv-glass{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.35));
  backdrop-filter: blur(4px);
}