조건부 노출

<div class="card">
  <label>Email<div class="inp"><span id="t"></span><i class="caret"></i></div></label>
  <div class="opt" id="opt"><span class="box" id="box"></span>메일로 사본 받기</div>
  <button>Submit</button>
</div>

.card{width:min(86%,360px);padding:5%;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:10px;font:600 clamp(10px,3.4vmin,14px) sans-serif;color:var(--fg)}
.inp{margin-top:4px;height:2.4em;border:1px solid var(--line);border-radius:8px;background:var(--bg);display:flex;align-items:center;padding:0 10px;font-weight:500}
.caret{width:1px;height:1.2em;background:var(--fg);margin-left:1px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.opt{display:flex;align-items:center;gap:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .4s ease;font-weight:500}
.opt.on{max-height:3em;opacity:1}
.box{width:1.1em;height:1.1em;border:1.5px solid var(--accent);border-radius:4px;display:inline-block;transition:background .3s}
.box.on{background:var(--accent)}
button{align-self:flex-start;border:0;border-radius:8px;padding:.6em 1.2em;background:var(--accent);color:#fff;font:inherit}

const text='hello@atlas.dev',t=document.getElementById('t'),opt=document.getElementById('opt'),box=document.getElementById('box');
const wait=ms=>new Promise(r=>setTimeout(r,ms));
(async()=>{for(;;){t.textContent='';opt.classList.remove('on');box.classList.remove('on');await wait(900);
  for(const ch of text){t.textContent+=ch;await wait(110);if(t.textContent==='hello@atlas.dev')opt.classList.add('on')}
  await wait(700);box.classList.add('on');await wait(1800);
  while(t.textContent.length){t.textContent=t.textContent.slice(0,-1);await wait(35);if(t.textContent.indexOf('@')<0)opt.classList.remove('on')}
  await wait(500)}})();