{{--
    Tripora — Premium 3D Payment Card Component
    Laravel 13 Blade — Tailwind CSS (CDN) + vanilla JS (requestAnimationFrame, no external libs)

    Drop into resources/views/components/payment-card.blade.php
    Use with: @include('components.payment-card', ['harga' => 500000])
    Or as a standalone page — works either way, fully self-contained.

    States this component drives:
      idle  → select payment method → processing → success
--}}
<div id="pcard-root" class="relative w-full max-w-md mx-auto" style="perspective:1400px">

  <style>
    #pcard-root{
      --blue:#3b82f6; --cyan:#06b6d4; --violet:#8b5cf6;
      --bg-deep:#0f172a; --bg-panel:#111827;
      font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
    }
    #pcard-root .mono{font-family:'JetBrains Mono',ui-monospace,monospace}

    /* ============ Outer shell: entrance + hover lift + border glow ============ */
    .pcard-shell{
      position:relative;
      opacity:0;
      transform:translateY(56px) scale(.8);
      filter:blur(20px);
      animation:pcardEnter 1s cubic-bezier(.16,1,.3,1) forwards;
      transform-style:preserve-3d;
      transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
      border-radius:28px;
      will-change:transform;
    }
    @keyframes pcardEnter{
      to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
    }
    .pcard-shell.tilting{transition:box-shadow .4s ease}
    .pcard-shell:hover{box-shadow:0 30px 60px -20px rgba(59,130,246,.45), 0 0 0 1px rgba(59,130,246,.15)}

    /* rotating gradient border */
    .pcard-border{
      position:absolute; inset:-2px; border-radius:30px; z-index:0;
      background:conic-gradient(from var(--angle,0deg), var(--blue), var(--cyan), var(--violet), var(--blue));
      animation:pcardBorderSpin 5s linear infinite;
      filter:blur(.5px);
    }
    @property --angle{syntax:'<angle>'; initial-value:0deg; inherits:false}
    @keyframes pcardBorderSpin{to{--angle:360deg}}
    /* fallback for browsers without @property: rotate the element itself */
    @supports not (background: conic-gradient(from 0deg, red, blue)){
      .pcard-border{animation:pcardBorderSpinFallback 5s linear infinite}
      @keyframes pcardBorderSpinFallback{to{transform:rotate(360deg)}}
    }

    .pcard-inner-mask{
      position:absolute; inset:2px; border-radius:26px; z-index:1;
      background:var(--bg-deep);
    }

    /* ============ Glass surface ============ */
    .pcard-glass{
      position:relative; z-index:2; border-radius:26px; overflow:hidden;
      background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%);
      backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
      border:1px solid rgba(255,255,255,.08);
      padding:28px 26px 26px;
    }

    /* moving glass reflection sheen */
    .pcard-sheen{
      position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
      background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%);
      background-size:250% 250%;
      background-position:var(--sheen-x,0%) var(--sheen-y,0%);
      transition:background-position .15s ease-out;
    }

    /* spotlight following cursor */
    .pcard-spotlight{
      position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
      background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 60%);
      opacity:0; transition:opacity .3s ease;
    }
    .pcard-shell:hover .pcard-spotlight{opacity:1}

    /* hologram sweep, every 4s */
    .pcard-hologram{
      position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; overflow:hidden;
    }
    .pcard-hologram::after{
      content:''; position:absolute; top:0; bottom:0; width:55%; left:-60%;
      background:linear-gradient(100deg, transparent, rgba(6,182,212,.22) 45%, rgba(139,92,246,.22) 55%, transparent);
      animation:hologramSweep 4s ease-in-out infinite;
      transform:skewX(-12deg);
    }
    @keyframes hologramSweep{
      0%{left:-60%}
      18%{left:120%}
      100%{left:120%}
    }

    /* ============ Credit-card flip stage ============ */
    .pcard-stage{
      position:relative; z-index:2;
      width:100%; aspect-ratio:1.586/1;
      margin-bottom:22px;
      perspective:1200px;
    }
    .pcard-flip{
      position:relative; width:100%; height:100%;
      transform-style:preserve-3d;
      transition:transform .7s cubic-bezier(.4,.2,.2,1);
    }
    .pcard-flip.flipped{transform:rotateY(180deg)}

    .pcard-face{
      position:absolute; inset:0; border-radius:18px;
      backface-visibility:hidden; -webkit-backface-visibility:hidden;
      display:flex; flex-direction:column; justify-content:space-between;
      padding:20px 22px;
      overflow:hidden;
      box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
    }
    .pcard-front{
      background:
        radial-gradient(120% 140% at 0% 0%, rgba(59,130,246,.55), transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(139,92,246,.55), transparent 55%),
        linear-gradient(135deg, #1e293b, #0f172a 60%, #111827);
    }
    .pcard-back{
      transform:rotateY(180deg);
      background:linear-gradient(135deg, #1e293b, #0f172a 60%, #111827);
    }

    /* card number shine sweep */
    .pcard-number{
      font-family:'JetBrains Mono',ui-monospace,monospace;
      font-size:18px; letter-spacing:2.5px; color:#f1f5f9; font-weight:500;
      position:relative; display:inline-block; width:fit-content;
      background:linear-gradient(110deg, #e2e8f0 30%, #ffffff 45%, #e2e8f0 60%);
      background-size:250% 100%;
      -webkit-background-clip:text; background-clip:text; color:transparent;
      animation:numberShine 3.2s linear infinite;
    }
    @keyframes numberShine{0%{background-position:200% 0}100%{background-position:-50% 0}}

    /* chip */
    .pcard-chip{
      width:42px; height:32px; border-radius:7px;
      background:linear-gradient(145deg, #fde68a, #f59e0b 55%, #d97706);
      position:relative; overflow:hidden;
      box-shadow:0 2px 6px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.3);
    }
    .pcard-chip::before, .pcard-chip::after{
      content:''; position:absolute; background:rgba(0,0,0,.25);
    }
    .pcard-chip::before{ top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%) }
    .pcard-chip::after{ left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%) }

    /* logo with light sweep */
    .pcard-logo{
      font-weight:800; font-style:italic; font-size:20px; letter-spacing:-.5px;
      position:relative; display:inline-block; color:#fff;
    }
    .pcard-logo::after{
      content:''; position:absolute; inset:0;
      background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
      background-size:300% 100%;
      -webkit-background-clip:text; background-clip:text; color:transparent;
      animation:logoShine 3.5s ease-in-out infinite;
      mix-blend-mode:overlay;
    }
    @keyframes logoShine{0%,80%{background-position:200% 0}100%{background-position:-100% 0}}

    .pcard-stripe{ height:42px; background:repeating-linear-gradient(180deg, #0a0f1c 0 2px, #1e293b 2px 4px); margin:18px -22px 0; }
    .pcard-cvv-box{
      margin-top:14px; background:rgba(255,255,255,.92); border-radius:6px;
      height:34px; display:flex; align-items:center; justify-content:flex-end; padding:0 12px;
    }
    .pcard-cvv-box span{font-family:'JetBrains Mono',monospace; color:#1e293b; font-size:13px; font-style:italic}

    /* card glow on success */
    .pcard-stage.success .pcard-face{
      animation:pcardSuccessGlow 1.4s ease;
    }
    @keyframes pcardSuccessGlow{
      0%{box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
      40%{box-shadow:0 0 50px -4px rgba(16,185,129,.85), 0 18px 40px -12px rgba(0,0,0,.55)}
      100%{box-shadow:0 18px 40px -12px rgba(0,0,0,.55), 0 0 0px rgba(16,185,129,0)}
    }
    .pcard-stage.success-shake{ animation:pcardShake .5s ease 1; }
    @keyframes pcardShake{
      0%,100%{transform:translateX(0)}
      20%{transform:translateX(-6px) rotate(-.6deg)}
      40%{transform:translateX(5px) rotate(.5deg)}
      60%{transform:translateX(-3px)}
      80%{transform:translateX(2px)}
    }

    /* ============ Payment method pills ============ */
    .pm-pill{
      position:relative; z-index:2;
      transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, background .2s ease;
    }
    .pm-pill.selected{
      transform:scale(1.04);
      border-color:rgba(6,182,212,.6) !important;
      background:rgba(6,182,212,.08) !important;
      animation:pmPulse .5s ease;
    }
    @keyframes pmPulse{0%{box-shadow:0 0 0 0 rgba(6,182,212,.5)}100%{box-shadow:0 0 0 14px rgba(6,182,212,0)}}
    .pm-check{
      width:16px; height:16px; border-radius:50%; background:#10b981;
      display:flex; align-items:center; justify-content:center;
      transform:scale(0); animation:pmCheckPop .35s cubic-bezier(.34,1.56,.64,1) forwards;
    }
    @keyframes pmCheckPop{to{transform:scale(1)}}

    /* ============ Processing state ============ */
    .pcard-scanline{
      position:absolute; left:0; right:0; height:2px; z-index:3;
      background:linear-gradient(90deg, transparent, #06b6d4, #8b5cf6, transparent);
      box-shadow:0 0 12px 2px rgba(6,182,212,.7);
      animation:scanSweep 1.6s ease-in-out infinite;
      opacity:0; pointer-events:none;
    }
    .pcard-stage.processing .pcard-scanline{opacity:1}
    @keyframes scanSweep{0%{top:0}50%{top:100%}100%{top:0}}

    .pcard-loader{
      width:46px; height:46px; position:relative;
    }
    .pcard-loader span{
      position:absolute; inset:0; border-radius:50%;
      border:3px solid transparent;
    }
    .pcard-loader span:nth-child(1){border-top-color:var(--cyan); animation:loaderSpin .9s linear infinite}
    .pcard-loader span:nth-child(2){border-right-color:var(--violet); inset:7px; animation:loaderSpin 1.3s linear infinite reverse}
    @keyframes loaderSpin{to{transform:rotate(360deg)}}

    /* ============ Success particles & confetti ============ */
    .pcard-burst{position:absolute; inset:0; z-index:5; pointer-events:none; overflow:visible}
    .pcard-burst .bit{position:absolute; left:50%; top:50%; border-radius:2px; opacity:0}
    .pcard-checkmark{
      width:64px; height:64px;
    }
    .pcard-checkmark .ring{stroke-dasharray:166; stroke-dashoffset:166; animation:ringDraw .55s ease forwards}
    .pcard-checkmark .tick{stroke-dasharray:48; stroke-dashoffset:48; animation:tickDraw .35s .5s ease forwards}
    @keyframes ringDraw{to{stroke-dashoffset:0}}
    @keyframes tickDraw{to{stroke-dashoffset:0}}

    .pcard-status-fade{transition:opacity .25s ease, transform .25s ease}

    @media (prefers-reduced-motion: reduce){
      #pcard-root *{animation-duration:.001ms !important; transition-duration:.001ms !important}
    }
  </style>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

  {{-- ============ SHELL: tilt target ============ --}}
  <div class="pcard-shell" id="pcard-shell">
    <div class="pcard-border"></div>
    <div class="pcard-inner-mask"></div>

    <div class="pcard-glass" id="pcard-glass">
      <div class="pcard-sheen" id="pcard-sheen"></div>
      <div class="pcard-spotlight" id="pcard-spotlight"></div>
      <div class="pcard-hologram"></div>

      {{-- header --}}
      <div class="relative z-10 flex items-center justify-between mb-5">
        <div>
          <p class="text-white font-semibold text-sm tracking-tight">Tripora Checkout</p>
          <p class="text-[11px] text-slate-400 mono" id="pcard-status-label">Pilih metode pembayaran</p>
        </div>
        <span class="text-[10px] mono px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-300 border border-emerald-500/20">SECURE</span>
      </div>

      {{-- 3D flip credit card --}}
      <div class="pcard-stage relative z-10" id="pcard-stage">
        <div class="pcard-flip" id="pcard-flip">

          {{-- FRONT --}}
          <div class="pcard-face pcard-front">
            <div class="flex items-start justify-between">
              <div class="pcard-chip"></div>
              <svg class="w-6 h-6 text-cyan-300/70" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/></svg>
            </div>
            <div>
              <p class="pcard-number">5412 •••• •••• 8842</p>
              <div class="flex items-end justify-between mt-3">
                <div>
                  <p class="text-[9px] text-slate-400 mono mb-0.5">CARD HOLDER</p>
                  <p class="text-white text-xs font-medium tracking-wide" id="pcard-name">PELANGGAN TRIPORA</p>
                </div>
                <div class="text-right mr-2">
                  <p class="text-[9px] text-slate-400 mono mb-0.5">EXP</p>
                  <p class="text-white text-xs font-medium mono">12/29</p>
                </div>
                <span class="pcard-logo">VISA</span>
              </div>
            </div>
          </div>

          {{-- BACK --}}
          <div class="pcard-face pcard-back">
            <div class="pcard-stripe"></div>
            <div class="flex-1 flex flex-col justify-center">
              <p class="text-[9px] text-slate-400 mono mb-1 text-right">CVV</p>
              <div class="pcard-cvv-box"><span id="pcard-cvv">•••</span></div>
            </div>
            <p class="text-[9px] text-slate-500 leading-relaxed">
              Kartu ini milik Tripora dan dilindungi enkripsi end-to-end. Hubungi admin bila terjadi transaksi tidak dikenal.
            </p>
          </div>

        </div>

        {{-- scanline overlay during processing --}}
        <div class="pcard-scanline"></div>
      </div>

      {{-- payment method pills --}}
      <div class="relative z-10 grid grid-cols-3 gap-2.5 mb-5">
        <button type="button" data-method="qris" class="pm-pill flex flex-col items-center gap-1.5 py-3 rounded-xl border border-white/10 bg-white/[.03] text-slate-300 text-[11px]">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 3h6m-3-3v6"/></svg>
          QRIS
        </button>
        <button type="button" data-method="card" class="pm-pill flex flex-col items-center gap-1.5 py-3 rounded-xl border border-white/10 bg-white/[.03] text-slate-300 text-[11px]">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
          Kartu
        </button>
        <button type="button" data-method="ewallet" class="pm-pill flex flex-col items-center gap-1.5 py-3 rounded-xl border border-white/10 bg-white/[.03] text-slate-300 text-[11px]">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a4 4 0 00-8 0v2M5 9h14l1 11H4L5 9z"/></svg>
          E-Wallet
        </button>
      </div>

      {{-- total + pay button --}}
      <div class="relative z-10">
        <div class="flex items-baseline justify-between mb-4">
          <span class="text-xs text-slate-400">Total bayar</span>
          <span class="mono text-xl font-bold text-white" id="pcard-total" data-target="{{ $harga ?? 500000 }}">Rp 0</span>
        </div>

        <button type="button" id="pcard-pay-btn" class="relative w-full rounded-xl py-3.5 font-semibold text-white text-sm overflow-hidden"
          style="background:linear-gradient(135deg, var(--blue), var(--violet)); box-shadow:0 10px 26px -8px rgba(59,130,246,.55)">
          <span class="relative z-10 flex items-center justify-center gap-2" id="pcard-pay-label">
            <span>Bayar Sekarang</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
          </span>
        </button>
      </div>

      {{-- success overlay (particles + checkmark + confetti) --}}
      <div class="absolute inset-0 z-20 hidden items-center justify-center flex-col gap-3 pcard-status-fade" id="pcard-success-overlay" style="background:rgba(15,23,42,.88); backdrop-filter:blur(6px)">
        <div class="pcard-burst" id="pcard-burst"></div>
        <svg class="pcard-checkmark relative z-10" viewBox="0 0 64 64">
          <circle class="ring" cx="32" cy="32" r="26" fill="none" stroke="#10b981" stroke-width="3"/>
          <path class="tick" d="M20 33l8 8 16-17" fill="none" stroke="#10b981" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <p class="text-white font-semibold relative z-10">Pembayaran berhasil</p>
        <p class="text-[11px] text-slate-400 relative z-10">Bukti transfer sedang diverifikasi tim kami</p>
      </div>

    </div>
  </div>
</div>

<script>
(function(){
  const root = document.getElementById('pcard-root');
  const shell = document.getElementById('pcard-shell');
  const glass = document.getElementById('pcard-glass');
  const sheen = document.getElementById('pcard-sheen');
  const spotlight = document.getElementById('pcard-spotlight');
  const stage = document.getElementById('pcard-stage');
  const flip = document.getElementById('pcard-flip');
  const statusLabel = document.getElementById('pcard-status-label');
  const payBtn = document.getElementById('pcard-pay-btn');
  const payLabel = document.getElementById('pcard-pay-label');
  const successOverlay = document.getElementById('pcard-success-overlay');
  const burstWrap = document.getElementById('pcard-burst');
  const cvvEl = document.getElementById('pcard-cvv');

  let selectedMethod = null;
  let rafId = null;
  let targetRX = 0, targetRY = 0, curRX = 0, curRY = 0;

  // ---------- 3D tilt tracking (requestAnimationFrame loop) ----------
  function loop(){
    curRX += (targetRX - curRX) * 0.12;
    curRY += (targetRY - curRY) * 0.12;
    shell.style.transform = `rotateX(${curRX}deg) rotateY(${curRY}deg) translateZ(0)`;
    rafId = requestAnimationFrame(loop);
  }
  rafId = requestAnimationFrame(loop);

  shell.addEventListener('mousemove', (e)=>{
    const r = shell.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;   // 0..1
    const py = (e.clientY - r.top) / r.height;   // 0..1
    const max = 15;
    targetRY = (px - 0.5) * max * 2;   // left/right -> rotateY
    targetRX = -(py - 0.5) * max * 2;  // up/down -> rotateX

    spotlight.style.setProperty('--mx', (px*100)+'%');
    spotlight.style.setProperty('--my', (py*100)+'%');
    sheen.style.setProperty('--sheen-x', (px*100)+'%');
    sheen.style.setProperty('--sheen-y', (py*100)+'%');

    // shadow follows cursor (depth feel)
    const shadowX = (px - 0.5) * 30;
    const shadowY = (py - 0.5) * 30;
    shell.style.boxShadow = `${-shadowX}px ${20-shadowY}px 50px -18px rgba(59,130,246,.4)`;
  });

  shell.addEventListener('mouseleave', ()=>{
    targetRX = 0; targetRY = 0;
    shell.style.boxShadow = '';
  });

  // ---------- payment method selection (flips card on "card" method) ----------
  document.querySelectorAll('.pm-pill').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      document.querySelectorAll('.pm-pill').forEach(b=>{
        b.classList.remove('selected');
        const oldCheck = b.querySelector('.pm-check');
        if(oldCheck) oldCheck.remove();
      });
      btn.classList.add('selected');
      const check = document.createElement('span');
      check.className = 'pm-check';
      check.innerHTML = '<svg class="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>';
      btn.appendChild(check);

      selectedMethod = btn.dataset.method;
      statusLabel.textContent = btn.dataset.method === 'qris' ? 'QRIS dipilih — siap bayar'
        : btn.dataset.method === 'card' ? 'Kartu dipilih — verifikasi CVV'
        : 'E-Wallet dipilih — siap bayar';

      if(selectedMethod === 'card'){
        flip.classList.add('flipped');
        cvvEl.textContent = '•••';
      } else {
        flip.classList.remove('flipped');
      }
    });
  });

  // ---------- counting total ----------
  function animateCount(el, target, duration=1200){
    const start = performance.now();
    function tick(now){
      const p = Math.min((now-start)/duration, 1);
      const eased = 1 - Math.pow(1-p, 3);
      const val = Math.floor(eased*target);
      el.textContent = 'Rp ' + val.toLocaleString('id-ID');
      if(p<1) requestAnimationFrame(tick);
      else el.textContent = 'Rp ' + target.toLocaleString('id-ID');
    }
    requestAnimationFrame(tick);
  }
  const totalEl = document.getElementById('pcard-total');
  animateCount(totalEl, parseInt(totalEl.dataset.target || '0', 10));

  // ---------- pay flow: processing -> success ----------
  payBtn.addEventListener('click', ()=>{
    if(payBtn.disabled) return;
    payBtn.disabled = true;
    stage.classList.add('processing');
    flip.classList.remove('flipped');
    statusLabel.textContent = 'Memproses…';

    payLabel.innerHTML = `
      <span class="pcard-loader inline-block align-middle" style="width:18px;height:18px">
        <span style="border-width:2px"></span><span style="border-width:2px"></span>
      </span>
      <span class="ml-2">Memproses</span>
    `;

    setTimeout(()=>{
      stage.classList.remove('processing');
      statusLabel.textContent = 'Berhasil';
      showSuccess();
    }, 2200);
  });

  function showSuccess(){
    stage.classList.add('success', 'success-shake');
    successOverlay.classList.remove('hidden');
    successOverlay.classList.add('flex');
    burstParticles();
    setTimeout(()=> stage.classList.remove('success-shake'), 550);
  }

  function burstParticles(){
    const colors = ['#10b981','#06b6d4','#3b82f6','#8b5cf6','#fbbf24'];
    for(let i=0;i<26;i++){
      const b = document.createElement('div');
      b.className = 'bit';
      const size = 4 + Math.random()*5;
      b.style.width = size+'px';
      b.style.height = size+'px';
      b.style.background = colors[i % colors.length];
      b.style.borderRadius = Math.random() > 0.5 ? '2px' : '50%';
      burstWrap.appendChild(b);

      const angle = Math.random() * Math.PI * 2;
      const dist = 80 + Math.random()*120;
      const tx = Math.cos(angle) * dist;
      const ty = Math.sin(angle) * dist - 40; // bias upward like confetti
      const rot = (Math.random()-0.5) * 480;

      b.animate([
        {transform:'translate(-50%,-50%) translate(0,0) rotate(0deg)', opacity:1},
        {transform:`translate(-50%,-50%) translate(${tx}px,${ty}px) rotate(${rot}deg)`, opacity:0}
      ], {duration:1100+Math.random()*500, easing:'cubic-bezier(.2,.7,.3,1)', fill:'forwards'});
    }
    setTimeout(()=>{ burstWrap.innerHTML = ''; }, 1700);
  }
})();
</script>