<?php /* STB Pulse — animated atmosphere widget, no numbers */ ?>
<section class="pls-wrap" id="pulse" aria-label="STB global trading network">
<style>
/* ═══════════════════════════════════════════
   STB PULSE — Pure motion / atmosphere
   No numbers, no repeated topics
   Concept: global market connectivity
═══════════════════════════════════════════ */
.pls-wrap{
  background:#060809;
  padding:96px 0;
  position:relative;overflow:hidden;
}

/* ── Canvas layer — particle network ── */
.pls-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:.7;
  pointer-events:none;
}

/* ── Horizontal glow bars (the thing you liked) ── */
.pls-bars{
  position:absolute;
  inset:0;
  display:flex;flex-direction:column;
  justify-content:space-evenly;
  pointer-events:none;
  padding:40px 0;
}
.pls-bar{
  width:100%;height:1px;
  position:relative;overflow:hidden;
  opacity:.35;
}
/* Each bar: a glowing comet sweeping across */
.pls-bar::after{
  content:'';
  position:absolute;
  top:-1px;height:3px;
  width:25%;
  background:linear-gradient(90deg,transparent,var(--c1),var(--c2),transparent);
  border-radius:2px;
  animation:pls-sweep var(--dur,4s) var(--delay,0s) linear infinite;
  filter:blur(.5px);
}
/* Alternate direction for some bars */
.pls-bar.rev::after{
  animation-name:pls-sweep-rev;
}
@keyframes pls-sweep    {0%{left:-25%}100%{left:110%}}
@keyframes pls-sweep-rev{0%{right:-25%;left:auto}100%{right:110%;left:auto}}

/* Occasional second comet on same bar, offset */
.pls-bar.double::before{
  content:'';
  position:absolute;
  top:-1px;height:2px;
  width:12%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  border-radius:2px;
  animation:pls-sweep calc(var(--dur,4s) * 1.3) calc(var(--delay,0s) + 1.8s) linear infinite;
  opacity:.5;
}
.pls-bar.rev.double::before{animation-name:pls-sweep-rev}

/* ── Vertical pulse columns ── */
.pls-cols{
  position:absolute;inset:0;
  display:flex;justify-content:space-evenly;
  pointer-events:none;
}
.pls-col{
  width:1px;height:100%;
  position:relative;overflow:hidden;
  opacity:.18;
}
.pls-col::after{
  content:'';
  position:absolute;
  left:-1px;width:3px;
  height:20%;
  background:linear-gradient(180deg,transparent,rgba(200,16,46,.8),transparent);
  animation:pls-drop var(--dur,6s) var(--delay,0s) ease-in-out infinite;
}
@keyframes pls-drop{0%{top:-20%}100%{top:120%}}

/* ── Glow orbs drifting ── */
.pls-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(60px);
  animation:pls-drift var(--dur,12s) var(--delay,0s) ease-in-out infinite alternate;
}
@keyframes pls-drift{
  0%  {transform:translate(0,0) scale(1)}
  50% {transform:translate(var(--tx,20px),var(--ty,-20px)) scale(1.1)}
  100%{transform:translate(var(--tx2,-10px),var(--ty2,15px)) scale(.95)}
}

/* ── Centre focal element ── */
.pls-focal{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:2;
}
/* Rings radiating outward */
.pls-ring{
  position:absolute;
  top:50%;left:50%;
  border-radius:50%;
  border:1px solid rgba(200,16,46,.25);
  transform:translate(-50%,-50%) scale(0);
  animation:pls-ring var(--dur,4s) var(--delay,0s) ease-out infinite;
}
@keyframes pls-ring{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:.7}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
/* Core dot */
.pls-core{
  width:12px;height:12px;
  background:#C8102E;border-radius:50%;
  box-shadow:0 0 20px rgba(200,16,46,.8),0 0 40px rgba(200,16,46,.4);
  animation:pls-core-beat 2s ease-in-out infinite;
}
@keyframes pls-core-beat{
  0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(200,16,46,.8),0 0 40px rgba(200,16,46,.4)}
  50%    {transform:scale(1.4);box-shadow:0 0 30px rgba(200,16,46,1),0 0 60px rgba(200,16,46,.6)}
}

/* ── Signal arcs — SVG overlay ── */
.pls-svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;z-index:1;
  overflow:visible;
}

/* ── Content overlay ── */
.pls-content{
  position:relative;z-index:10;
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
  gap:0;
}
.pls-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,16,46,.7);margin-bottom:24px;
  display:flex;align-items:center;gap:10px;
}
.pls-eyebrow::before,.pls-eyebrow::after{
  content:'';display:block;
  width:40px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,16,46,.4));
}
.pls-eyebrow::after{background:linear-gradient(270deg,transparent,rgba(200,16,46,.4))}

.pls-headline{
  font-size:clamp(36px,5vw,72px);font-weight:700;
  color:#fff;line-height:1.05;
  letter-spacing:-.02em;margin-bottom:0;
  text-shadow:0 0 60px rgba(200,16,46,.2);
}
.pls-headline em{
  font-style:normal;
  background:linear-gradient(135deg,#C8102E,#ff4060);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Divider glow line under headline */
.pls-divider{
  width:120px;height:2px;margin:32px auto;
  background:linear-gradient(90deg,transparent,#C8102E,transparent);
  position:relative;
  animation:pls-div-pulse 3s ease-in-out infinite;
}
.pls-divider::after{
  content:'';position:absolute;
  top:-4px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;
  background:#C8102E;border-radius:50%;
  box-shadow:0 0 12px rgba(200,16,46,.8);
  animation:pls-core-beat 2s ease-in-out infinite;
}
@keyframes pls-div-pulse{
  0%,100%{width:80px;opacity:.6}
  50%    {width:160px;opacity:1}
}

.pls-sub{
  font-size:16px;line-height:1.8;
  color:rgba(255,255,255,.45);
  max-width:520px;
  margin-bottom:40px;
}

/* Floating status chips */
.pls-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
}
.pls-chip{
  display:flex;align-items:center;gap:8px;
  padding:9px 18px;
  border-radius:24px;
  background:rgba(13,15,17,.65);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75);
  animation:pls-chip-float var(--dur,4s) var(--delay,0s) ease-in-out infinite alternate;
}
.pls-chip-dot{
  width:6px;height:6px;border-radius:50%;
  flex-shrink:0;
}
@keyframes pls-chip-float{0%{transform:translateY(0)}100%{transform:translateY(-6px)}}

/* ── Bottom bar — streaming signal line ── */
.pls-signal-bar{
  width:100%;height:2px;
  position:relative;overflow:hidden;
  margin-top:64px;
}
.pls-signal-bar::before{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.04);
}
.pls-signal-bar::after{
  content:'';position:absolute;
  top:0;height:100%;
  width:40%;
  background:linear-gradient(90deg,transparent,rgba(200,16,46,.6),rgba(200,16,46,.9),rgba(20,224,163,.6),transparent);
  animation:pls-sweep 3s linear infinite;
  filter:blur(.5px);
}
/* Second sweep offset */
.pls-signal-bar-2{
  width:100%;height:1px;
  position:relative;overflow:hidden;
  margin-top:4px;
  opacity:.5;
}
.pls-signal-bar-2::after{
  content:'';position:absolute;
  top:0;height:100%;width:25%;
  background:linear-gradient(90deg,transparent,rgba(20,224,163,.5),transparent);
  animation:pls-sweep-rev 4.5s linear infinite;
}

/* ── Pulse RTL ── */
body.rtl .pulse-wrap{direction:rtl}
body.rtl .pulse-header{text-align:right}
body.rtl .pulse-kicker{flex-direction:row-reverse;justify-content:flex-end}
body.rtl .pulse-title{text-align:right}
body.rtl .pulse-desc{text-align:right}
/* Status chips: flow right to left */
body.rtl .pulse-chips{flex-direction:row-reverse;flex-wrap:wrap-reverse}
body.rtl .pulse-chip{flex-direction:row-reverse}
body.rtl .pulse-chip-dot{margin-right:0;margin-left:6px}
</style>

<!-- Background layers -->
<!-- Glow orbs -->
<div class="pls-orb" style="width:500px;height:500px;top:-100px;left:-150px;background:radial-gradient(circle,rgba(200,16,46,.12),transparent 65%);--dur:14s;--delay:0s;--tx:40px;--ty:-30px;--tx2:-20px;--ty2:40px" aria-hidden="true"></div>
<div class="pls-orb" style="width:400px;height:400px;bottom:-80px;right:-100px;background:radial-gradient(circle,rgba(20,224,163,.07),transparent 65%);--dur:11s;--delay:-5s;--tx:-30px;--ty:20px;--tx2:15px;--ty2:-25px" aria-hidden="true"></div>
<div class="pls-orb" style="width:300px;height:300px;top:40%;left:55%;background:radial-gradient(circle,rgba(200,16,46,.08),transparent 65%);--dur:9s;--delay:-2s;--tx:20px;--ty:30px;--tx2:-15px;--ty2:-10px" aria-hidden="true"></div>

<!-- Horizontal glow bars -->
<div class="pls-bars" aria-hidden="true">
  <div class="pls-bar double" style="--c1:rgba(200,16,46,.9);--c2:rgba(255,80,100,.6);--dur:3.2s;--delay:0s"></div>
  <div class="pls-bar rev"   style="--c1:rgba(20,224,163,.7);--c2:rgba(20,224,163,.4);--dur:4.8s;--delay:-1.2s"></div>
  <div class="pls-bar double" style="--c1:rgba(200,16,46,.6);--c2:rgba(200,16,46,.3);--dur:5.5s;--delay:-0.8s"></div>
  <div class="pls-bar rev double" style="--c1:rgba(255,255,255,.3);--c2:rgba(200,16,46,.4);--dur:3.8s;--delay:-2.1s"></div>
  <div class="pls-bar"       style="--c1:rgba(200,16,46,.5);--c2:rgba(20,224,163,.5);--dur:6.2s;--delay:-3s"></div>
  <div class="pls-bar rev"   style="--c1:rgba(200,16,46,.8);--c2:rgba(200,16,46,.4);--dur:4.1s;--delay:-0.4s"></div>
  <div class="pls-bar double" style="--c1:rgba(20,224,163,.5);--c2:rgba(255,255,255,.2);--dur:7s;--delay:-1.8s"></div>
</div>

<!-- Vertical drop columns -->
<div class="pls-cols" aria-hidden="true">
  <div class="pls-col" style="--dur:5.0s;--delay:-0.0s"></div>
  <div class="pls-col" style="--dur:5.7s;--delay:-0.5s"></div>
  <div class="pls-col" style="--dur:6.4s;--delay:-1.0s"></div>
  <div class="pls-col" style="--dur:7.1s;--delay:-1.5s"></div>
  <div class="pls-col" style="--dur:7.8s;--delay:-2.0s"></div>
  <div class="pls-col" style="--dur:8.5s;--delay:-2.5s"></div>
  <div class="pls-col" style="--dur:9.2s;--delay:-3.0s"></div>
  <div class="pls-col" style="--dur:9.9s;--delay:-3.5s"></div>
  <div class="pls-col" style="--dur:10.6s;--delay:-4.0s"></div>
  <div class="pls-col" style="--dur:11.3s;--delay:-4.5s"></div>
  <div class="pls-col" style="--dur:12.0s;--delay:-5.0s"></div>
  <div class="pls-col" style="--dur:12.7s;--delay:-5.5s"></div>
</div>

<!-- Focal rings -->
<div class="pls-focal" aria-hidden="true">
  <div class="pls-core"></div>
  <div class="pls-ring" style="width:80px;height:80px;--dur:3s;--delay:0s"></div>
  <div class="pls-ring" style="width:160px;height:160px;--dur:4s;--delay:-0.6s"></div>
  <div class="pls-ring" style="width:260px;height:260px;--dur:5s;--delay:-1.2s"></div>
  <div class="pls-ring" style="width:380px;height:380px;--dur:6s;--delay:-1.8s"></div>
  <div class="pls-ring" style="width:520px;height:520px;--dur:7s;--delay:-2.4s"></div>
</div>

<!-- SVG signal arcs -->
<svg class="pls-svg" viewBox="0 0 1440 520" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
  <defs>
    <linearGradient id="arc-red" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="rgba(200,16,46,0)"/>
      <stop offset="50%"  stop-color="rgba(200,16,46,0.6)"/>
      <stop offset="100%" stop-color="rgba(200,16,46,0)"/>
    </linearGradient>
    <linearGradient id="arc-green" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="rgba(20,224,163,0)"/>
      <stop offset="50%"  stop-color="rgba(20,224,163,0.4)"/>
      <stop offset="100%" stop-color="rgba(20,224,163,0)"/>
    </linearGradient>
    <!-- Moving dash pattern for arcs -->
    <linearGradient id="arc-dash" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="rgba(200,16,46,0)"/>
      <stop offset="40%"  stop-color="rgba(200,16,46,0)"/>
      <stop offset="50%"  stop-color="rgba(200,16,46,0.8)"/>
      <stop offset="60%"  stop-color="rgba(200,16,46,0)"/>
      <stop offset="100%" stop-color="rgba(200,16,46,0)"/>
    </linearGradient>
  </defs>
  <!-- Subtle arc curves connecting distant points -->
  <path d="M 100,400 Q 400,80 720,260 Q 1040,440 1340,200" fill="none" stroke="url(#arc-red)" stroke-width="1" opacity="0.4">
    <animate attributeName="stroke-dashoffset" from="0" to="-600" dur="6s" repeatCount="indefinite"/>
  </path>
  <path d="M 200,100 Q 500,380 720,260 Q 940,140 1200,380" fill="none" stroke="url(#arc-green)" stroke-width="1" opacity="0.35">
    <animate attributeName="stroke-dashoffset" from="-400" to="0" dur="8s" repeatCount="indefinite"/>
  </path>
  <path d="M 50,260 Q 360,60 720,260 Q 1080,460 1390,260" fill="none" stroke="rgba(200,16,46,0.12)" stroke-width="1.5" stroke-dasharray="6 12">
    <animate attributeName="stroke-dashoffset" from="0" to="-36" dur="2s" repeatCount="indefinite"/>
  </path>
  <path d="M 0,200 Q 360,400 720,260 Q 1080,120 1440,320" fill="none" stroke="rgba(20,224,163,0.08)" stroke-width="1" stroke-dasharray="4 16">
    <animate attributeName="stroke-dashoffset" from="-40" to="0" dur="3s" repeatCount="indefinite"/>
  </path>
  <!-- Travelling bright dots along arcs -->
  <circle r="3" fill="#C8102E" filter="url(#glow-red)" opacity="0.9">
    <animateMotion dur="6s" repeatCount="indefinite" path="M 100,400 Q 400,80 720,260 Q 1040,440 1340,200"/>
  </circle>
  <circle r="2.5" fill="#14e0a3" opacity="0.8">
    <animateMotion dur="8s" repeatCount="indefinite" begin="-3s" path="M 200,100 Q 500,380 720,260 Q 940,140 1200,380"/>
  </circle>
  <circle r="2" fill="#C8102E" opacity="0.6">
    <animateMotion dur="5s" repeatCount="indefinite" begin="-1.5s" path="M 50,260 Q 360,60 720,260 Q 1080,460 1390,260"/>
  </circle>
  <circle r="1.5" fill="#fff" opacity="0.5">
    <animateMotion dur="10s" repeatCount="indefinite" begin="-6s" path="M 0,200 Q 360,400 720,260 Q 1080,120 1440,320"/>
  </circle>
</svg>

<!-- Canvas for particle network -->
<canvas class="pls-canvas" id="pls-canvas" aria-hidden="true"></canvas>

<!-- Foreground content -->
<div class="brk-inner" style="position:relative;z-index:10">
  <div class="pls-content">

    <div class="pls-eyebrow">STB BROKERS</div>

    <h2 class="pls-headline">
      <?php echo stb_lang()==='fa'
        ? 'همیشه متصل.<br><em>همیشه آنلاین.</em>'
        : 'Always Connected.<br><em>Always Live.</em>'; ?>
    </h2>

    <div class="pls-divider"></div>

    <p class="pls-sub">
      <?php echo stb_lang()==='fa'
        ? 'بازارها هرگز نمی‌خوابند. زیرساخت ما هم همینطور. اتصال مستمر به نقدینگی جهانی — بدون وقفه، بدون تأخیر، در هر شرایطی.'
        : 'Markets never sleep. Neither does our infrastructure. Continuous connection to global liquidity — no downtime, no delay, under any market condition.'; ?>
    </p>

    <!-- Floating status chips — atmospheric, no numbers -->
    <div class="pls-chips">
      <div class="pls-chip" style="--dur:3.0s;--delay:0.0s">
        <span class="pls-chip-dot" style="background:#14e0a3;box-shadow:0 0 8px #14e0a3"></span>
        Live Connection
      </div>
      <div class="pls-chip" style="--dur:3.4s;--delay:-0.6s">
        <span class="pls-chip-dot" style="background:#C8102E;box-shadow:0 0 8px #C8102E"></span>
        Global Liquidity
      </div>
      <div class="pls-chip" style="--dur:3.8s;--delay:-1.2s">
        <span class="pls-chip-dot" style="background:#14e0a3;box-shadow:0 0 8px #14e0a3"></span>
        Zero Downtime
      </div>
      <div class="pls-chip" style="--dur:4.2s;--delay:-1.8s">
        <span class="pls-chip-dot" style="background:#C8102E;box-shadow:0 0 8px #C8102E"></span>
        Real Execution
      </div>
      <div class="pls-chip" style="--dur:4.6s;--delay:-2.4s">
        <span class="pls-chip-dot" style="background:#14e0a3;box-shadow:0 0 8px #14e0a3"></span>
        Secured & Trusted
      </div>
    </div>

    <!-- Bottom signal bars -->
    <div class="pls-signal-bar"></div>
    <div class="pls-signal-bar-2"></div>

  </div>
</div>

<script>
(function(){
  var canvas = document.getElementById('pls-canvas');
  if(!canvas) return;
  var ctx = canvas.getContext('2d');
  var animId = null;
  var isVisible = false;

  var observer = new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      isVisible = entry.isIntersecting;
      if(isVisible){
        if(!animId) animId = requestAnimationFrame(draw);
      } else {
        if(animId) {
          cancelAnimationFrame(animId);
          animId = null;
        }
      }
    });
  }, {threshold:0.01});

  function resize(){
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
  }
  resize();
  window.addEventListener('resize', resize);

  // Particles
  var isMobile = window.innerWidth <= 768;
  var N = isMobile ? 12 : 60;
  var particles = [];
  var W, H;

  function init(){
    W = canvas.width; H = canvas.height;
    particles = [];
    for(var i=0;i<N;i++){
      particles.push({
        x: Math.random()*W,
        y: Math.random()*H,
        vx:(Math.random()-.5)*.4,
        vy:(Math.random()-.5)*.4,
        r: Math.random()*1.5+.5,
        alpha: Math.random()*.5+.2,
      });
    }
  }
  init();
  observer.observe(canvas);
  window.addEventListener('resize', init);

  var RED  = '200,16,46';
  var GRN  = '20,224,163';
  var CONN = 140; // max connection distance

  function draw(){
    W = canvas.width; H = canvas.height;
    ctx.clearRect(0,0,W,H);

    // Move
    particles.forEach(function(p){
      p.x += p.vx; p.y += p.vy;
      if(p.x<0||p.x>W) p.vx*=-1;
      if(p.y<0||p.y>H) p.vy*=-1;
    });

    // Connections
    for(var i=0;i<N;i++){
      for(var j=i+1;j<N;j++){
        var dx = particles[i].x - particles[j].x;
        var dy = particles[i].y - particles[j].y;
        var dist = Math.sqrt(dx*dx+dy*dy);
        if(dist < CONN){
          var alpha = (1-dist/CONN)*.25;
          // Alternate red/green connections by index
          var col = (i+j)%3===0 ? GRN : RED;
          ctx.beginPath();
          ctx.moveTo(particles[i].x, particles[i].y);
          ctx.lineTo(particles[j].x, particles[j].y);
          ctx.strokeStyle = 'rgba('+col+','+alpha+')';
          ctx.lineWidth = .6;
          ctx.stroke();
        }
      }
    }

    // Dots
    particles.forEach(function(p){
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
      ctx.fillStyle = 'rgba(255,255,255,'+p.alpha+')';
      ctx.fill();
    });

    if(!isVisible) {
      animId = null;
      return;
    }
    animId = requestAnimationFrame(draw);
  }
})();
</script>
</section>
