/* ===================================================================== YOOZIT animated wordmark — single source of truth. Needs Poppins 800 loaded in . Customise per placement with inline custom properties on the .yoozit span: --size : overall size, e.g. 120px (hero), 30px (nav), 1em (inline) --yooz : "Yooz" colour (#1f3d2b on light bgs, #f7f4ee on dark) --it : "it" colour (#e0853b / #f0a866) --pin-x / --pin-y : fine-tune the pin onto the i Three states share this one base — pick exactly one on the span: .go HERO — "it" bounces in, pin drops, beacon pings twice. Once. .body BODY — full word + pin static; beacon pings twice, then rests. .static — fully motionless (no ping at all). ===================================================================== */ .yoozit{--size:48px;--yooz:#f7f4ee;--it:#f0a866;--pin:#e0853b;--pin-x:.022em;--pin-y:-.12em; display:inline-flex;align-items:flex-end;line-height:1;font-weight:800; letter-spacing:-.045em;font-size:var(--size); font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased} .yoozit .yooz,.yoozit .it{display:inline-flex;align-items:flex-end} .yoozit .glyph{position:relative;display:inline-block} .yoozit .inner{display:inline-block} .yoozit .yooz .inner{color:var(--yooz)} .yoozit .yooz .inner:first-child{margin-right:-.08em} /* tighten Y to the o */ .yoozit .it .inner{color:var(--it)} .yoozit .it{opacity:0;transform-origin:50% 100%} .yoozit .pinwrap{position:absolute;left:50%;top:-.06em;transform:translate(calc(-50% + var(--pin-x,0em)),var(--pin-y,0em));z-index:5;pointer-events:none} .yoozit .pin{position:absolute;left:50%;top:0;transform:translate(-50%,-1.25em) scale(.5);opacity:0} .yoozit .pin svg{width:.4em;height:auto;display:block;filter:drop-shadow(0 .05em .07em rgba(0,0,0,.4))} /* ping ring locked to the pin's white circle (~.19em from the pin top) */ .yoozit .ping{position:absolute;left:50%;top:.19em;width:.16em;height:.16em;border-radius:50%; border:.014em solid var(--pin);transform:translate(-50%,-50%) scale(.5);opacity:0} /* ---- HERO (.go): full reveal, plays once on load, beacon pings twice ---- */ .yoozit.go .it{animation:yz-bounce 1.05s cubic-bezier(.2,.7,.3,1) .35s both} .yoozit.go .pin{animation:yz-drop .85s cubic-bezier(.3,1.4,.5,1) 1.35s both} .yoozit.go .ping{animation:yz-ping 1.7s ease-out 2.2s 1 forwards} .yoozit.go .ping.ping2{animation-delay:3.05s} /* ---- BODY (.body): word + pin static; beacon pings twice, then rests ---- */ .yoozit.body .it{opacity:1} .yoozit.body .pin{opacity:1;transform:translate(-50%,0) scale(1)} .yoozit.body .ping{animation:yz-ping 1.7s ease-out .6s 1 forwards} .yoozit.body .ping.ping2{animation-delay:1.45s} /* ---- STATIC: fully motionless, no beacon ---- */ .yoozit.static .it{opacity:1;animation:none} .yoozit.static .pin{opacity:1;transform:translate(-50%,0) scale(1);animation:none} .yoozit.static .ping{display:none} @keyframes yz-bounce{0%{opacity:0;transform:translateY(-1.2em) scale(.86)}42%{opacity:1;transform:translateY(0) scale(1)} 60%{opacity:1;transform:translateY(-.24em) scale(1.05,.96)}74%{opacity:1;transform:translateY(0) scale(1)} 86%{opacity:1;transform:translateY(-.09em) scale(1.02,.99)}100%{opacity:1;transform:translateY(0) scale(1)}} @keyframes yz-drop{0%{opacity:0;transform:translate(-50%,-1.25em) scale(.5)}60%{opacity:1} 78%{transform:translate(-50%,.06em) scale(1.06)}100%{opacity:1;transform:translate(-50%,0) scale(1)}} @keyframes yz-ping{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}18%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(5.5)}} @media(prefers-reduced-motion:reduce){ .yoozit .it{opacity:1;animation:none} .yoozit .pin{opacity:1;transform:translate(-50%,0) scale(1);animation:none} .yoozit .ping{display:none}}