목표 기울기 효과

<div class="card" id="card"></div>

.card{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:72%;max-width:220px}
.slot{aspect-ratio:1;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;font:900 14px/1 monospace;color:transparent}
.slot.on{border-style:solid;border-color:var(--accent);background:var(--accent);color:#fff;animation:pop .3s ease}
@keyframes pop{0%{transform:scale(.5)}70%{transform:scale(1.2)}100%{transform:scale(1)}}

const card = document.getElementById('card');
const slots = [];
for (let i = 0; i < 8; i++) { const s = document.createElement('div'); s.className = 'slot'; s.textContent = '☕'; card.appendChild(s); slots.push(s); }
const delays = [0, 900, 1650, 2250, 2700, 3000, 3220, 3380];
function run() {
  slots.forEach(s => s.classList.remove('on'));
  delays.forEach((d, i) => setTimeout(() => slots[i].classList.add('on'), d));
}
run();
setInterval(run, 4400);