Big Number Slide

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <p class="para" id="para"></p>
  <div class="hero">
    <span class="num" id="num">0%</span>
    <span class="cap" id="cap"></span>
  </div>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;padding:8vmin}
.badge{position:absolute;top:4%;right:4%;z-index:2;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent-2)}
.slide.good .badge{color:var(--accent-3)}
.para{margin:0;font:500 clamp(9px,2.2vmin,12px)/1.5 -apple-system,sans-serif;color:var(--fg);display:block}
.slide.good .para{display:none}
.hero{display:none;flex-direction:column;align-items:center;gap:4%}
.slide.good .hero{display:flex}
.num{font:900 clamp(30px,11vmin,64px)/1 -apple-system,sans-serif;color:var(--accent-3);letter-spacing:-.02em}
.cap{font:600 clamp(9px,2.2vmin,12px)/1.3 -apple-system,sans-serif;color:var(--muted)}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { para: '이번 분기 매출은 지난 분기 대비 34% 증가했으며 신규 고객과 재구매가 함께 늘었습니다', cap: '전 분기 대비 매출 성장', badge: ['✕ 파묻힘', '✓ 강조'] },
  en: { para: 'Revenue this quarter grew 34% over last quarter, driven by both new customers and repeat purchases', cap: 'Revenue growth, quarter over quarter', badge: ['✕ Buried', '✓ Highlighted'] },
};
let n = 0, countTimer = null;
function countUp() {
  clearInterval(countTimer);
  let v = 0;
  el('num').textContent = '0%';
  countTimer = setInterval(() => {
    v += 2;
    if (v >= 34) { v = 34; clearInterval(countTimer); }
    el('num').textContent = v + '%';
  }, 40);
}
function render() {
  const good = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('good', good);
  el('badge').textContent = good ? t.badge[1] : t.badge[0];
  el('para').textContent = t.para;
  el('cap').textContent = t.cap;
  if (good) countUp();
}
render();
setInterval(() => { n++; render(); }, 2400);