<section class="ba-stk" aria-label="Sticky top announcement banner demo">
  <div class="banner-stack">
    <div class="banner banner--system" data-ba-stk-banner="b-system">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">SYS</span>
          <span class="banner-msg"><strong>DEGRADED:</strong> API latency elevated — P95 response times +340ms · Engineers paged · Tracking INC-8821</span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Status page ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-system" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>

    <div class="banner banner--promo" data-ba-stk-banner="b-promo">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">PROMO</span>
          <span class="banner-msg"><strong>40% OFF</strong> Pro tier — expires 23:59 UTC tonight · Code <strong>LAUNCH40</strong></span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Claim offer ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-promo" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>

    <div class="banner banner--warning" data-ba-stk-banner="b-warning">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">WARN</span>
          <span class="banner-msg"><strong>Browser outdated —</strong> some features require Chrome 120+ or Firefox 121+ to function correctly</span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Update now ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-warning" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>
  </div>

  <nav class="page-nav" aria-label="Demo navigation">
    <span class="nav-logo">NEXUS</span>
    <ul class="nav-links">
      <li><a href="#">Dashboard</a></li><li><a href="#">Analytics</a></li><li><a href="#">Deploy</a></li><li><a href="#">Docs</a></li>
    </ul>
  </nav>

  <div class="page-content">
    <h2>Sticky Top<br>Announcement<br>Banner CSS</h2>
    <p>Scroll the surrounding page to see the banners remain pinned. Dismiss each one to watch the stack collapse gracefully.</p>
    <div class="card-grid" aria-hidden="true">
      <div class="card"><span>Panel 01</span></div><div class="card"><span>Panel 02</span></div><div class="card"><span>Panel 03</span></div>
      <div class="card"><span>Panel 04</span></div><div class="card"><span>Panel 05</span></div><div class="card"><span>Panel 06</span></div>
    </div>
  </div>
</section>

/* ─── 02 Sticky Top Announcement Banner — neon terminal ──────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&display=swap');

.ba-stk {
  --ba-stk-bg: #060810;
  --ba-stk-surface: #0c1020;
  --ba-stk-cyan: #00f5d4;
  --ba-stk-magenta: #f500a0;
  --ba-stk-amber: #ffb800;
  --ba-stk-text: #e0e8ff;
  --ba-stk-muted: rgba(224,232,255,0.45);

  position: relative;
  width: 100%;
  height: 560px;
  background: var(--ba-stk-bg);
  background-image: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,245,212,0.08) 0%, transparent 60%), linear-gradient(180deg, #060810 0%, #080d18 100%);
  font-family: 'Space Mono', monospace;
  color: var(--ba-stk-text);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.ba-stk *, .ba-stk *::before, .ba-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-stk .banner-stack { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; }
.ba-stk .banner { width: 100%; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; max-height: 80px; }
.ba-stk .banner.hidden { max-height: 0; opacity: 0; pointer-events: none; }
.ba-stk .banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; height: 48px; border-bottom: 1px solid; position: relative; overflow: hidden; }
.ba-stk .banner-inner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px); pointer-events: none; }
.ba-stk .banner-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; overflow: hidden; }
.ba-stk .banner-badge { font-family: 'Bebas Neue', sans-serif; font-size: 11px; letter-spacing: 0.15em; padding: 3px 8px; border: 1px solid currentColor; flex-shrink: 0; line-height: 1.4; }
.ba-stk .banner-msg { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ba-stk .banner-msg strong { font-weight: 700; margin-right: 6px; }
.ba-stk .banner-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ba-stk .banner-cta { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border: 1px solid currentColor; background: transparent; cursor: pointer; text-decoration: none; transition: all 0.2s ease; }
.ba-stk .banner-close { background: transparent; border: none; cursor: pointer; padding: 4px; display: flex; opacity: 0.5; transition: opacity 0.2s; color: currentColor; }
.ba-stk .banner-close:hover { opacity: 1; }
.ba-stk .banner-close svg { width: 14px; height: 14px; }
.ba-stk .blink { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; animation: ba-stk-blink 1.2s step-end infinite; flex-shrink: 0; }
@keyframes ba-stk-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.ba-stk .banner--system { background: rgba(0,245,212,0.06); border-bottom-color: rgba(0,245,212,0.3); }
.ba-stk .banner--system .banner-inner { border-bottom-color: rgba(0,245,212,0.3); }
.ba-stk .banner--system .banner-badge, .ba-stk .banner--system .banner-msg, .ba-stk .banner--system .blink, .ba-stk .banner--system .banner-close, .ba-stk .banner--system .banner-cta { color: var(--ba-stk-cyan); }
.ba-stk .banner--system .banner-cta { border-color: rgba(0,245,212,0.6); }
.ba-stk .banner--system .banner-cta:hover { background: rgba(0,245,212,0.12); }

.ba-stk .banner--promo { background: rgba(245,0,160,0.06); border-bottom-color: rgba(245,0,160,0.3); }
.ba-stk .banner--promo .banner-inner { border-bottom-color: rgba(245,0,160,0.3); }
.ba-stk .banner--promo .banner-badge, .ba-stk .banner--promo .banner-msg, .ba-stk .banner--promo .blink, .ba-stk .banner--promo .banner-close, .ba-stk .banner--promo .banner-cta { color: var(--ba-stk-magenta); }
.ba-stk .banner--promo .banner-cta { border-color: rgba(245,0,160,0.6); }
.ba-stk .banner--promo .banner-cta:hover { background: rgba(245,0,160,0.1); }

.ba-stk .banner--warning { background: rgba(255,184,0,0.05); border-bottom-color: rgba(255,184,0,0.3); }
.ba-stk .banner--warning .banner-inner { border-bottom-color: rgba(255,184,0,0.3); }
.ba-stk .banner--warning .banner-badge, .ba-stk .banner--warning .banner-msg, .ba-stk .banner--warning .blink, .ba-stk .banner--warning .banner-close, .ba-stk .banner--warning .banner-cta { color: var(--ba-stk-amber); }
.ba-stk .banner--warning .banner-cta { border-color: rgba(255,184,0,0.6); }
.ba-stk .banner--warning .banner-cta:hover { background: rgba(255,184,0,0.1); }

.ba-stk .page-nav { background: rgba(12,16,32,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); height: 56px; display: flex; align-items: center; padding: 0 24px; gap: 24px; }
.ba-stk .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.12em; color: var(--ba-stk-cyan); text-shadow: 0 0 12px rgba(0,245,212,0.6); }
.ba-stk .nav-links { display: flex; gap: 20px; list-style: none; }
.ba-stk .nav-links a { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ba-stk-muted); text-decoration: none; transition: color 0.2s; }
.ba-stk .nav-links a:hover { color: var(--ba-stk-text); }

.ba-stk .page-content { padding: 64px 24px; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.ba-stk .page-content h2 { font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 0.05em; line-height: 1; color: var(--ba-stk-text); }
.ba-stk .page-content p { font-size: 13px; line-height: 1.9; color: var(--ba-stk-muted); max-width: 520px; }
.ba-stk .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ba-stk .card { background: var(--ba-stk-surface); border: 1px solid rgba(255,255,255,0.06); padding: 20px; height: 100px; display: flex; align-items: flex-end; }
.ba-stk .card span { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.25); }

@media (prefers-reduced-motion: reduce) { .ba-stk .blink { animation: none; } .ba-stk .banner { transition: opacity 0.2s; } }

(() => {
  const root = document.querySelector('.ba-stk');
  if (!root) return;
  root.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-ba-stk-close]');
    if (!btn) return;
    const id = btn.dataset.baStkClose;
    const el = root.querySelector('[data-ba-stk-banner="' + id + '"]');
    if (el) el.classList.add('hidden');
  });
})();