/* ============================================================================
   SlakBot — Live feature demos (vanilla, self-contained, no deps)
   Ported from the "Feature Spotlight" React studio to looping CSS animations.

   - Every demo is scoped under .sb-demo and never touches global styles.
   - Animations only run while a demo carries .sb-play (added by demos.js when
     the demo scrolls into view) — zero CPU off-screen.
   - prefers-reduced-motion OR .sb-static  →  frozen on the meaningful end-state
     (blocked / removed / filled), no motion at all.
   - Tuned for a card width of ~440px; fully fluid down to mobile.
   Bump cache-bust ?v= when this file changes.
   ============================================================================ */

.sb-demo{
  --sb-chat:#313338; --sb-chan:#2b2d31; --sb-border:#3a3c43;
  --sb-blurple:#5865F2; --sb-purple:#a78bfa; --sb-emerald:#34d399; --sb-emerald-deep:#10b981;
  --sb-rose:#f43f5e; --sb-red:#ef4444; --sb-amber:#fbbf24; --sb-pink:#ec4899; --sb-cyan:#22d3ee;
  --sb-yt:#ff0000; --sb-tw:#9146ff; --sb-tt:#ec4899;
  --sb-text:#e7e9ee; --sb-muted:#9aa0ad;
  font-family:'Inter',system-ui,sans-serif;
  width:100%; max-width:460px; margin:0 auto;
  color:var(--sb-text); -webkit-font-smoothing:antialiased; line-height:1.4;
}

/* ── Discord chrome ─────────────────────────────────────────────────────── */
.sb-chat{
  background:var(--sb-chat); border-radius:8px; overflow:hidden;
  box-shadow:0 24px 60px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
}
.sb-chan{
  background:var(--sb-chan); border-bottom:1px solid rgba(255,255,255,.06);
  padding:8px 12px; display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--sb-muted);
}
.sb-chan b{ color:#c7ccd6; font-weight:600; }
.sb-bot{ display:flex; gap:12px; padding:11px 14px; background:rgba(88,101,242,.05); }
.sb-user{ display:flex; gap:12px; padding:7px 14px; }
.sb-ava{ width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#ef4444,#a78bfa 50%,#5865F2); }
.sb-body{ flex:1; min-width:0; }
.sb-head{ display:flex; align-items:baseline; gap:7px; margin-bottom:4px; flex-wrap:wrap; }
.sb-name{ font-weight:700; color:#fff; font-size:14px; }
.sb-app{ font-size:9px; line-height:1.4; padding:0 5px; border-radius:4px;
  background:var(--sb-blurple); color:#fff; font-weight:800; letter-spacing:.02em; }
.sb-time{ font-size:11px; color:var(--sb-muted); }
.sb-text{ font-size:14px; color:var(--sb-text); }
.sb-mut{ color:var(--sb-muted); }
.sb-mention{ color:#c9cdfb; background:rgba(88,101,242,.3); padding:0 3px; border-radius:3px; font-weight:500; }

.sb-embed{ background:var(--sb-chan); border-left:4px solid var(--sb-blurple);
  border-radius:4px; overflow:hidden; margin-top:6px; }
.sb-embed--yt{ border-left-color:var(--sb-yt); }
.sb-embed--tw{ border-left-color:var(--sb-tw); }
.sb-embed--tt{ border-left-color:var(--sb-tt); }
.sb-embed--scam{ border-left-color:var(--sb-red); }
.sb-embed--welcome{ border-left-color:var(--sb-amber); }
.sb-embed--ai{ border-left-color:var(--sb-purple); }
.sb-embed--eco{ border-left-color:var(--sb-emerald); }
.sb-embed--goal{ border-left-color:var(--sb-pink); }
.sb-ein{ padding:13px 15px; }
.sb-etitle{ font-weight:800; font-size:15px; color:#fff; }
.sb-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; margin-top:11px; font-size:12px; }
.sb-grid2 .k{ color:var(--sb-muted); font-weight:600; display:block; margin-bottom:2px; }
.sb-grid2 .v{ color:#fff; font-weight:700; }

.sb-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  padding:4px 11px; border-radius:999px; white-space:nowrap; }

/* progress bar shell (level + goals) */
.sb-bar{ height:14px; border-radius:999px; background:#23232e; overflow:hidden; }
.sb-bar > i{ display:block; height:100%; border-radius:999px; width:var(--from,20%); }

/* Caption under a demo */
.sb-cap{ margin-top:10px; text-align:center; font-size:12px; color:var(--sb-muted); }

/* ── Generic staggered reveal (opacity+rise), gated by .sb-play ──────────── */
.sb-reveal{ opacity:0; transform:translateY(14px); }
.sb-play .sb-reveal{ animation:sbReveal .55s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--d,0)*1s); }
@keyframes sbReveal{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ════════════════════════════════════════════════════════════════════════
   1. ANTI-SCAM SCANNER  (.sb-demo--scam)   ~6s loop
   ════════════════════════════════════════════════════════════════════════ */
.sb-scam{ position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 28px 70px -16px rgba(0,0,0,.7); }
.sb-scam-card{ background:linear-gradient(160deg,#1b1d29,#241620); padding:22px 24px; }
.sb-scam-from{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sb-scam-pfp{ width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,#f59e0b,#ef4444); flex-shrink:0; }
.sb-scam-name{ font-size:17px; font-weight:800; color:#fff; }
.sb-scam-sub{ font-size:12px; color:var(--sb-muted); }
.sb-scam-big{ font-size:27px; font-weight:900; color:#ffd84d; line-height:1.1; letter-spacing:-.01em; }
.sb-scam-line{ font-size:14px; color:#e7e9ee; margin-top:8px; }
.sb-scam-btn{ margin-top:14px; display:inline-block; background:#22d3ee; color:#03121a;
  font-size:14px; font-weight:900; padding:9px 20px; border-radius:9px; }
.sb-play .sb-scam-card{ animation:sbScamCard 6s linear infinite; }
@keyframes sbScamCard{
  0%,33%{ filter:none; } 41%,82%{ filter:grayscale(.6) brightness(.62); }
  92%,100%{ filter:none; }
}

/* sweeping scan line */
.sb-scanline{ position:absolute; left:0; right:0; top:0; height:3px; opacity:0;
  background:var(--sb-blurple); box-shadow:0 0 22px 5px var(--sb-blurple); }
.sb-play .sb-scanline{ animation:sbScan 6s linear infinite; }
@keyframes sbScan{
  0%,7%{ top:0; opacity:0; } 9%{ opacity:1; }
  33%{ top:100%; opacity:1; } 35%,100%{ top:100%; opacity:0; }
}
/* scan grid wash */
.sb-scangrid{ position:absolute; inset:0; opacity:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(88,101,242,.10) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,rgba(88,101,242,.10) 0 1px,transparent 1px 22px); }
.sb-play .sb-scangrid{ animation:sbScanGrid 6s linear infinite; }
@keyframes sbScanGrid{ 0%,7%{opacity:0} 12%,32%{opacity:1} 40%,100%{opacity:0} }

/* OCR token chips */
.sb-ocr{ position:absolute; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; font-weight:800; color:#fff; background:rgba(88,101,242,.92);
  padding:3px 9px; border-radius:6px; opacity:0; transform:scale(.6);
  box-shadow:0 6px 18px rgba(0,0,0,.4); white-space:nowrap; }
.sb-play .sb-ocr{ animation:sbOcr 6s linear infinite both;
  animation-delay:calc(.55s + var(--i,0)*.13s); }
@keyframes sbOcr{
  0%{opacity:0;transform:scale(.6)} 3%{opacity:1;transform:scale(1)}
  22%{opacity:1;transform:scale(1)} 27%{opacity:0;transform:scale(.85)} 100%{opacity:0} }

/* GEBLOKKEERD stamp */
.sb-stamp{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; }
.sb-stamp > span{ border:5px solid var(--sb-red); color:var(--sb-red);
  font-size:clamp(22px,7vw,34px); font-weight:900; letter-spacing:.04em;
  padding:8px 22px; border-radius:12px; background:rgba(20,8,10,.55);
  transform:rotate(-9deg) scale(.4); opacity:0; }
.sb-play .sb-stamp > span{ animation:sbStamp 6s linear infinite; }
@keyframes sbStamp{
  0%,33%{ opacity:0; transform:rotate(-9deg) scale(.4); }
  39%{ opacity:1; transform:rotate(-9deg) scale(1.08); }
  43%,82%{ opacity:1; transform:rotate(-9deg) scale(1); }
  90%,100%{ opacity:0; transform:rotate(-9deg) scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   2. AI MODERATOR  (.sb-demo--ai)   ~6s loop
   ════════════════════════════════════════════════════════════════════════ */
.sb-ai-msg{ position:relative; }
.sb-play .sb-ai-msg{ animation:sbAiDim 6s linear infinite; }
@keyframes sbAiDim{ 0%,28%{opacity:1} 36%,82%{opacity:.4} 92%,100%{opacity:1} }
.sb-ai-strike{ position:absolute; left:54px; right:14px; top:50%; height:2px;
  background:var(--sb-rose); opacity:0; transform:scaleX(0); transform-origin:left; }
.sb-play .sb-ai-strike{ animation:sbStrike 6s linear infinite; }
@keyframes sbStrike{ 0%,30%{opacity:0;transform:scaleX(0)} 34%,82%{opacity:.85;transform:scaleX(1)} 90%,100%{opacity:0;transform:scaleX(0)} }
.sb-ai-badge{ position:absolute; right:6px; top:4px; opacity:0; transform:scale(.7); }
.sb-ai-badge .sb-pill{ background:var(--sb-purple); color:#1a1030; }
.sb-play .sb-ai-badge{ animation:sbBadge 6s linear infinite; }
@keyframes sbBadge{ 0%,17%{opacity:0;transform:scale(.7)} 22%{opacity:1;transform:scale(1)} 80%{opacity:1} 88%,100%{opacity:0} }
.sb-ai-verdict{ opacity:0; transform:translateY(12px); margin-top:10px; }
.sb-play .sb-ai-verdict{ animation:sbVerdict 6s linear infinite; }
@keyframes sbVerdict{ 0%,36%{opacity:0;transform:translateY(12px)} 44%,82%{opacity:1;transform:none} 90%,100%{opacity:0;transform:translateY(12px)} }

/* ════════════════════════════════════════════════════════════════════════
   3. LIVE ALERTS  (.sb-demo--alerts)   slide-in feed, ~6s loop
   ════════════════════════════════════════════════════════════════════════ */
.sb-alerts{ display:flex; flex-direction:column; gap:12px; }
.sb-alert{ display:flex; align-items:center; gap:12px; padding:13px 15px; opacity:0; transform:translateX(60px); }
.sb-alert .t{ flex:1; min-width:0; }
.sb-alert .lbl{ font-size:12px; color:var(--sb-muted); font-weight:700; }
.sb-alert .ttl{ font-size:15px; font-weight:700; color:#cdd6ff; margin-top:3px; }
.sb-play .sb-alert{ animation:sbAlertIn 6s cubic-bezier(.2,.7,.2,1) infinite both;
  animation-delay:calc(.2s + var(--i,0)*.55s); }
@keyframes sbAlertIn{
  0%{opacity:0;transform:translateX(60px)} 9%{opacity:1;transform:none}
  80%{opacity:1;transform:none} 90%,100%{opacity:0;transform:translateX(60px)} }

/* ════════════════════════════════════════════════════════════════════════
   4. LEVELING  (.sb-demo--level)   XP bar fill, ~6s loop
   ════════════════════════════════════════════════════════════════════════ */
.sb-lvl-bar > i{ background:linear-gradient(90deg,var(--sb-amber),#f59e0b); }
.sb-play .sb-lvl-bar > i{ animation:sbFill 6s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes sbFill{
  0%,7%{ width:var(--from,18%); } 38%,82%{ width:var(--to,74%); } 95%,100%{ width:var(--from,18%); } }

/* ════════════════════════════════════════════════════════════════════════
   5. ECONOMY — slot machine  (.sb-demo--eco)   ~6s loop
   ════════════════════════════════════════════════════════════════════════ */
.sb-slots{ display:flex; justify-content:center; gap:13px; }
.sb-reel{ --cell:74px; width:var(--cell); height:var(--cell); border-radius:14px;
  background:#0a0a0f; border:2px solid var(--sb-border); overflow:hidden; position:relative; }
.sb-reel ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center; }
.sb-reel li{ height:var(--cell); width:var(--cell); display:flex; align-items:center; justify-content:center; font-size:40px; }
/* each strip is 7 cells; the last (index 6) is 🍒 — all three land on it = jackpot */
.sb-play .sb-reel.r1 ul{ animation:sbSpin1 6s cubic-bezier(.18,.85,.3,1) infinite; }
.sb-play .sb-reel.r2 ul{ animation:sbSpin2 6s cubic-bezier(.18,.85,.3,1) infinite; }
.sb-play .sb-reel.r3 ul{ animation:sbSpin3 6s cubic-bezier(.18,.85,.3,1) infinite; }
@keyframes sbSpin1{ 0%{transform:translateY(0)} 20%,82%{transform:translateY(calc(var(--cell)*-6))} 93%,100%{transform:translateY(0)} }
@keyframes sbSpin2{ 0%{transform:translateY(0)} 25%,82%{transform:translateY(calc(var(--cell)*-6))} 93%,100%{transform:translateY(0)} }
@keyframes sbSpin3{ 0%{transform:translateY(0)} 30%,82%{transform:translateY(calc(var(--cell)*-6))} 93%,100%{transform:translateY(0)} }
.sb-eco-win{ margin-top:14px; text-align:center; font-size:19px; font-weight:900; color:var(--sb-emerald);
  opacity:0; transform:scale(.7); }
.sb-play .sb-reel{ animation:sbReelGlow 6s linear infinite; }
@keyframes sbReelGlow{ 0%,33%{border-color:var(--sb-border); box-shadow:none}
  40%,82%{border-color:var(--sb-emerald); box-shadow:0 0 22px rgba(52,211,153,.35)}
  92%,100%{border-color:var(--sb-border); box-shadow:none} }
.sb-play .sb-eco-win{ animation:sbWin 6s linear infinite; }
@keyframes sbWin{ 0%,35%{opacity:0;transform:scale(.7)} 42%{opacity:1;transform:scale(1.06)}
  47%,82%{opacity:1;transform:scale(1)} 90%,100%{opacity:0;transform:scale(.7)} }

/* ════════════════════════════════════════════════════════════════════════
   6. TICKETS  (.sb-demo--ticket)   claim flip, ~6s loop
   ════════════════════════════════════════════════════════════════════════ */
.sb-tk-btns{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.sb-tk-btn{ font-size:13px; font-weight:800; padding:9px 18px; border-radius:9px; position:relative; }
.sb-tk-claim{ color:#06210f; background:var(--sb-emerald-deep); }
.sb-tk-claim .done{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:#2b2d31; color:var(--sb-muted); border:1px solid var(--sb-border);
  opacity:0; white-space:nowrap; }
.sb-tk-close{ color:var(--sb-muted); background:#2b2d31; border:1px solid var(--sb-border); }
.sb-play .sb-tk-claim{ animation:sbClaimBase 6s linear infinite; }
@keyframes sbClaimBase{ 0%,32%{color:#06210f} 40%,100%{color:transparent} }
.sb-play .sb-tk-claim .done{ animation:sbClaimDone 6s linear infinite; }
@keyframes sbClaimDone{ 0%,32%{opacity:0} 40%,86%{opacity:1} 94%,100%{opacity:0} }

/* ════════════════════════════════════════════════════════════════════════
   7. WELCOME  (.sb-demo--welcome)   ~6s loop (uses .sb-reveal + wave)
   ════════════════════════════════════════════════════════════════════════ */
.sb-wc-banner{ margin-top:13px; height:118px; border-radius:11px;
  background:linear-gradient(115deg,rgba(251,191,36,.35),rgba(236,72,153,.30) 60%,rgba(88,101,242,.30));
  display:flex; align-items:center; justify-content:center; font-size:52px; }
.sb-play .sb-wc-wave{ display:inline-block; transform-origin:70% 70%; animation:sbWave 2.4s ease-in-out infinite; }
@keyframes sbWave{ 0%,60%,100%{transform:rotate(0)} 70%{transform:rotate(16deg)} 80%{transform:rotate(-8deg)} 90%{transform:rotate(12deg)} }
.sb-wc-role{ margin-top:12px; font-size:13px; color:var(--sb-muted); opacity:0; transform:translateY(10px); }
.sb-play .sb-wc-role{ animation:sbRole 6s linear infinite; }
@keyframes sbRole{ 0%,16%{opacity:0;transform:translateY(10px)} 24%,86%{opacity:1;transform:none} 94%,100%{opacity:0;transform:translateY(10px)} }

/* ════════════════════════════════════════════════════════════════════════
   8. STREAM GOALS  (.sb-demo--goal)   bar fill, ~6s loop
   ════════════════════════════════════════════════════════════════════════ */
.sb-goal-bar{ height:22px; }
.sb-goal-bar > i{ background:linear-gradient(90deg,var(--sb-pink),#f472b6);
  box-shadow:0 0 20px rgba(236,72,153,.55); }
.sb-play .sb-goal-bar > i{ animation:sbFill 6s cubic-bezier(.2,.7,.2,1) infinite; }
.sb-goal-bump{ color:var(--sb-emerald); font-weight:800; opacity:0; }
.sb-play .sb-goal-bump{ animation:sbBump 6s linear infinite; }
@keyframes sbBump{ 0%,30%{opacity:0;transform:translateY(4px)} 40%{opacity:1;transform:none}
  46%{transform:translateY(-2px)} 52%,82%{opacity:1;transform:none} 92%,100%{opacity:0} }

/* ════════════════════════════════════════════════════════════════════════
   9. YOUTUBE ALERT  (.sb-demo--yt)   reveal + looping play-pulse/progress
   ════════════════════════════════════════════════════════════════════════ */
.sb-yt-thumb{ position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:linear-gradient(135deg,rgba(127,29,29,.5),#1e2330 55%,rgba(88,28,135,.4));
  display:flex; align-items:center; justify-content:center; margin-top:4px; }
.sb-yt-play{ width:54px; height:38px; border-radius:9px; background:#ff0000;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(255,0,0,.4); }
.sb-yt-play::after{ content:''; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff; margin-left:3px; }
.sb-play .sb-yt-play{ animation:sbPulse 2.4s ease-in-out infinite; }
.sb-yt-prog{ position:absolute; left:0; bottom:0; height:4px; background:#ff0000; width:0; }
.sb-play .sb-yt-prog{ animation:sbYtProg 6s linear infinite; }
@keyframes sbYtProg{ 0%,7%{width:0} 78%{width:62%} 92%,100%{width:0} }
.sb-yt-badge{ position:absolute; top:8px; left:8px; font-size:10px; font-weight:800; color:#fff;
  background:#ff0000; padding:3px 9px; border-radius:6px; opacity:0; transform:translateY(-6px); }
.sb-play .sb-yt-badge{ animation:sbReveal .5s cubic-bezier(.2,.7,.2,1) both .55s; }
@keyframes sbPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

/* ════════════════════════════════════════════════════════════════════════
   10. TWITCH LIVE  (.sb-demo--twitch)   reveal + looping LIVE pulse
   ════════════════════════════════════════════════════════════════════════ */
.sb-tw-stats{ display:flex; gap:20px; margin:4px 0 10px; }
.sb-tw-stats .k{ font-size:11px; color:var(--sb-muted); font-weight:600; }
.sb-tw-stats .v{ font-size:15px; color:#fff; font-weight:800; }
.sb-tw-preview{ position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:linear-gradient(135deg,rgba(88,28,135,.6),#1e2330 55%,rgba(190,24,93,.35)); }
.sb-tw-live{ position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:800; color:#fff; background:#ef4444; padding:3px 9px; border-radius:6px; }
.sb-tw-live i{ width:6px; height:6px; border-radius:50%; background:#fff; display:inline-block; }
.sb-play .sb-tw-live{ animation:sbLive 1.8s ease-in-out infinite; }
@keyframes sbLive{ 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── tiny "spin" used as fallback continuous reel (unused stops) ─────────── */
@keyframes sbSpin{ from{transform:translateY(0)} to{transform:translateY(-370px)} }

/* ════════════════════════════════════════════════════════════════════════
   STATIC / reduced-motion  →  freeze on the meaningful resolved state
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .sb-demo *, .sb-demo *::before, .sb-demo *::after{ animation:none !important; transition:none !important; }
}
.sb-static *, .sb-static *::before, .sb-static *::after{ animation:none !important; }

/* resolved end-states for static demos */
.sb-static .sb-scam-card{ filter:grayscale(.6) brightness(.62); }
.sb-static .sb-stamp > span{ opacity:1; transform:rotate(-9deg) scale(1); }
.sb-static .sb-scanline, .sb-static .sb-scangrid, .sb-static .sb-ocr{ opacity:0; }
.sb-static .sb-ai-msg{ opacity:.4; }
.sb-static .sb-ai-strike{ opacity:.85; transform:scaleX(1); }
.sb-static .sb-ai-badge{ opacity:1; transform:none; }
.sb-static .sb-ai-verdict{ opacity:1; transform:none; }
.sb-static .sb-alert{ opacity:1; transform:none; }
.sb-static .sb-reveal{ opacity:1; transform:none; }
.sb-static .sb-lvl-bar > i, .sb-static .sb-goal-bar > i{ width:var(--to,74%); }
.sb-static .sb-reel.r1 ul{ transform:translateY(-1554px); }
.sb-static .sb-reel.r2 ul{ transform:translateY(-1924px); }
.sb-static .sb-reel.r3 ul{ transform:translateY(-2294px); }
.sb-static .sb-reel{ border-color:var(--sb-emerald); box-shadow:0 0 22px rgba(52,211,153,.35); }
.sb-static .sb-eco-win{ opacity:1; transform:none; }
.sb-static .sb-tk-claim{ color:transparent; }
.sb-static .sb-tk-claim .done{ opacity:1; }
.sb-static .sb-wc-role, .sb-static .sb-goal-bump{ opacity:1; transform:none; }
.sb-static .sb-yt-prog{ width:62%; }
.sb-static .sb-yt-badge{ opacity:1; transform:none; }