로고 락업

<div class="lockup" id="lockup">
  <div class="mark">◆</div>
  <div class="word">Halcyon</div>
</div>

.lockup{display:flex;align-items:center;gap:12px;transition:opacity .25s,transform .25s}
.lockup.stacked{flex-direction:column;gap:6px}
.lockup.fade{opacity:0;transform:scale(.94)}
.mark{color:var(--accent);font-size:clamp(24px,8vmin,36px);line-height:1}
.word{font-size:clamp(18px,6vmin,28px);font-weight:800;letter-spacing:-.01em;color:var(--fg)}

const el = document.getElementById('lockup');
let stacked = false;
setInterval(() => {
  el.classList.add('fade');
  setTimeout(() => {
    stacked = !stacked;
    el.classList.toggle('stacked', stacked);
    el.classList.remove('fade');
  }, 260);
}, 2000);