/* The front page's own type and brand, on top of kit/kit.css (f.css lays out the page and the box): the toolbox's logo,
   whose lid lifts now and then, and the big button. Motion is transforms and opacity only. */

/* the brand: the toolbox */
.lp-logo svg { width: 42px; height: 44px; flex: none; }
.lp-logo .lid { transform-box: fill-box; transform-origin: 50% 100%; animation: lpLid 7s ease-in-out infinite; }
@keyframes lpLid { 0%, 86%, 100% { transform: none; } 90% { transform: translateY(-2px) rotate(-4deg); } 94% { transform: translateY(-1px) rotate(2deg); } }
.lp-logo .cell { animation: bob 3.2s ease-in-out infinite; }
.lp-logo .cell:nth-of-type(2) { animation-delay: -.8s; } .lp-logo .cell:nth-of-type(3) { animation-delay: -1.6s; } .lp-logo .cell:nth-of-type(4) { animation-delay: -2.4s; }

/* the big button */
.lp-go { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: var(--fox); color: var(--on-fox); font-weight: 900; text-decoration: none; box-shadow: 0 4px 0 var(--press); transition: transform .2s cubic-bezier(.2,.9,.3,1.3); }
.lp-go svg { width: 20px; height: 20px; transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.lp-go:hover svg, a:hover .lp-go svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .lp-logo * { animation: none !important; }
}