/* ─── Celebration banners ─────────────────────────────────────────────────────
   Ported verbatim from captap-underwriting (public/index.html <style>). Three
   tiers: Offer Accepted (compact toast), Contract Signed (drop-in card +
   confetti), Deal Funded (full-width emerald bar). Keep in sync with the
   underwriting copy — do not restyle. */

  /* ── Shared banner keyframes ── */
  /* Marquee-light: 2s cycle → 0.5 Hz — well under 3/s photosensitivity limit */
  @keyframes cel-marquee   { 0% { background-position: 0 0; } 100% { background-position: 200px 0; } }
  @keyframes cel-fadein    { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
  @keyframes cel-fadeout   { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
  /* Contract Signed — centered drop-in card (mid tier) */
  @keyframes cs-dropin  { from { opacity: 0; transform: translateX(-50%) translateY(-110%); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
  @keyframes cs-dropout { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-110%); } }
  /* Funded — full-width top bar slides down from above */
  @keyframes funded-dropin  { from { transform: translateY(-100%); opacity: 0.9; } to { transform: translateY(0); opacity: 1; } }
  @keyframes funded-dropout { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }

  /* ── Offer Accepted — compact top-center toast (lightest tier) ── */
  #celebrationBanner {
    position: fixed; top: 16px; left: 50%; z-index: 9989;
    transform: translateX(-50%);
    width: max-content; max-width: min(90vw, 320px);
    padding: 9px 13px;
    background: #0f1f2e; color: #f8fafc;
    border-radius: 10px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(5,150,105,0.18);
    border-top: 2px solid transparent;
    background-image:
      linear-gradient(#0f1f2e, #0f1f2e),
      repeating-linear-gradient(90deg,
        #059669 0px,   #059669 24px,  #047857 24px, #047857 28px,
        #34d399 28px,  #34d399 52px,  #10b981 52px, #10b981 56px,
        #22d3ee 56px,  #22d3ee 80px,  #06b6d4 80px, #06b6d4 84px,
        #059669 84px,  #059669 108px, #047857 108px,#047857 112px,
        #34d399 112px, #34d399 136px, #10b981 136px,#10b981 140px,
        transparent 140px, transparent 168px);
    background-origin: border-box; background-clip: padding-box, border-box;
    background-size: 100% 100%, 168px 100%;
    animation: cel-fadein 0.3s ease-out, cel-marquee 2s linear infinite;
  }
  #celebrationBanner.cel-dismissing { animation: cel-fadeout 0.3s ease-in forwards; }
  @media (prefers-reduced-motion: reduce) {
    #celebrationBanner                { animation: none; transform: translateX(-50%); }
    #celebrationBanner.cel-dismissing { animation: none; }
  }
  .cel-icon  { font-size: 20px; line-height: 1; flex-shrink: 0; }
  .cel-body  { flex: 1 1 120px; min-width: 0; }
  .cel-hed   { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #34d399; }
  .cel-deal  { font-size: 13px; font-weight: 700; margin-top: 1px; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cel-amt   { font-size: 11px; font-weight: 600; color: #6ee7b7; margin-top: 1px; }
  .cel-close { margin-left: 4px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: #f8fafc; font-size: 13px; width: 24px; height: 24px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
  .cel-close:hover { background: rgba(5,150,105,0.25); }

  /* ── Contract Signed — drop-in centered card + confetti (mid tier) ── */
  #contractSignedBanner {
    position: fixed; top: 0; left: 50%; z-index: 9990;
    transform: translateX(-50%);
    width: max-content; max-width: min(92vw, 520px);
    padding: 20px 24px 18px;
    background: linear-gradient(160deg, #071a26 0%, #0f1f2e 100%);
    color: #f8fafc;
    border-radius: 0 0 18px 18px;
    display: flex; align-items: flex-start; gap: 16px;
    box-shadow: 0 12px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(34,211,238,0.2), 0 6px 32px rgba(34,211,238,0.07);
    border-bottom: 4px solid #22d3ee;
    animation: cs-dropin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #contractSignedBanner.cs-dismissing { animation: cs-dropout 0.4s ease-in forwards; }
  @media (prefers-reduced-motion: reduce) {
    #contractSignedBanner                { animation: none; transform: translateX(-50%); }
    #contractSignedBanner.cs-dismissing { animation: none; }
  }
  .cs-icon  { font-size: 44px; line-height: 1; flex-shrink: 0; align-self: center; }
  .cs-body  { flex: 1 1 200px; min-width: 0; }
  .cs-hed   { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #22d3ee; }
  .cs-deal  { font-size: 22px; font-weight: 800; margin-top: 4px; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-amt   { font-size: 17px; font-weight: 700; color: #67e8f9; margin-top: 3px; }
  .cs-iso   { font-size: 12px; font-weight: 500; color: #94a3b8; margin-top: 4px; }
  .cs-close { margin-left: 8px; background: rgba(255,255,255,0.1); border: none; border-radius: 8px; color: #f8fafc; font-size: 18px; width: 34px; height: 34px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
  .cs-close:hover { background: rgba(34,211,238,0.2); }

  /* ── Deal Funded — full-width top bar, centered content (largest tier) ── */
  #fundedBanner {
    position: fixed; top: 0; left: 0; z-index: 9991;
    width: 100%;
    min-height: 100px;
    padding: 16px 60px;
    background: linear-gradient(135deg, #061c11 0%, #0b2318 40%, #0f1f2e 75%, #0a1a2a 100%);
    color: #f8fafc;
    border-bottom: 5px solid #059669;
    display: flex; align-items: center; justify-content: center; gap: 24px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.65), 0 4px 32px rgba(5,150,105,0.18), 0 0 80px rgba(5,150,105,0.07);
    animation: funded-dropin 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #fundedBanner.funded-dismissing { animation: funded-dropout 0.5s ease-in forwards; }
  @media (prefers-reduced-motion: reduce) {
    #fundedBanner                { animation: none; }
    #fundedBanner.funded-dismissing { animation: none; }
  }
  .fn-logo  { height: 80px; width: auto; flex-shrink: 0; object-fit: contain; }
  .fn-body  { min-width: 0; text-align: center; }
  .fn-hed   { font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: #34d399; }
  .fn-deal  { font-size: 26px; font-weight: 800; margin-top: 4px; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(55vw, 640px); }
  .fn-amt   { font-size: 18px; font-weight: 700; color: #6ee7b7; margin-top: 3px; }
  .fn-iso   { font-size: 12px; font-weight: 500; color: #94a3b8; margin-top: 4px; }
  .fn-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; border-radius: 8px; color: #f8fafc; font-size: 18px; width: 36px; height: 36px; cursor: pointer; display: grid; place-items: center; }
  .fn-close:hover { background: rgba(5,150,105,0.3); }