Logo Reveal Intro

Build a logo-reveal intro section: each letter of the wordmark rises from below with a slight rotation and springy overshoot, staggered 80ms, then a coloured dot pops in with a scale bounce. Total under 1.5s. Plays once on load and respects prefers-reduced-motion.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#111;height:100vh;display:grid;place-items:center}.l{display:flex;font:900 70px system-ui;color:#fff;letter-spacing:-.05em}.l span{display:inline-block;animation:u .9s cubic-bezier(.2,.9,.2,1.2) both}
.d{width:16px;height:16px;border-radius:50%;background:#ff4d1a;align-self:end;margin:0 0 16px 6px;animation:p .5s 1s both}@keyframes u{from{transform:translateY(110%) rotate(8deg);opacity:0}}@keyframes p{from{transform:scale(0)}}</style>
<div class="l"><span>k</span><span style="animation-delay:.08s">i</span><span style="animation-delay:.16s">l</span><span style="animation-delay:.24s">n</span><div class="d"></div></div>