/* ZeroWeb logo: sizes in each place, and the "sticker slaps on" entrance on the home page. */
.zw-logo{display:block;width:auto;overflow:visible}
.d-brand{display:inline-flex!important;align-items:center}
.d-brand .zw-logo{height:24px}
.sf-brand .zw-logo{height:32px}
.foot-logo .zw-logo{height:44px}
.hero-brand{display:flex!important;align-items:center;gap:14px;flex-wrap:wrap}
.hero-brand .zw-logo{height:clamp(30px,3.4vw,40px)}
[data-variant="g"] .hero-brand .chip{margin:0}
@media (max-width:520px){.hero-brand>span:last-child{display:none}}

/* entrance: the sticker drops on with a spring, then the browser dots light up one by one */
.zw-anim .zw-m{transform-box:fill-box;transform-origin:50% 55%;animation:zw-slap .75s cubic-bezier(.34,1.56,.64,1) .2s both}
.zw-anim .zw-d{animation:zw-dot .32s ease both}
.zw-anim .zw-d:nth-of-type(1){animation-delay:.85s}
.zw-anim .zw-d:nth-of-type(2){animation-delay:1s}
.zw-anim .zw-d:nth-of-type(3){animation-delay:1.15s}
@keyframes zw-slap{0%{transform:translateY(-28%) scale(1.7) rotate(16deg);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
@keyframes zw-dot{from{opacity:.12;transform:scale(.4)}to{opacity:1;transform:none}}
.zw-anim .zw-d{transform-box:fill-box;transform-origin:center}
/* a little wiggle when you hover the logo in the dock */
@media (hover:hover){.d-brand:hover .zw-m{transform-box:fill-box;transform-origin:50% 55%;animation:zw-wiggle .5s ease}}
@keyframes zw-wiggle{30%{transform:rotate(-8deg) scale(1.06)}65%{transform:rotate(5deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.zw-anim .zw-m,.zw-anim .zw-d,.d-brand:hover .zw-m{animation:none!important}}