/* Header logo (inline SVG "H" mark + wordmark), shared by the site pages and the tool pages.
   Entrance: plays once per session on the home pages (the <head> script adds .intro to <html>).
   Hover / focus: the left bar shortens and the crossbar lifts, like a bar chart updating.
   fill-mode is "backwards", not "both": a kept end state would override the hover transform. */
.logo { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.logo .brand-mark { width: 32px; height: 32px; flex: none; overflow: visible; }
.logo .wordmark { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.03em; direction: ltr; white-space: nowrap; }
.logo .wordmark span { font-weight: 400; color: var(--grey, #565B64); }

.logo .bar-l, .logo .bar-r, .logo .cross { transform-box: fill-box; }
.logo .bar-l, .logo .bar-r { transform-origin: 50% 100%; }
.logo .cross { transform-origin: 0% 50%; }
.intro .logo .bar-l, .intro .logo .bar-r { animation: logo-grow .6s cubic-bezier(.2,.8,.2,1) backwards; }
.intro .logo .bar-r { animation-delay: .12s; }
.intro .logo .cross { animation: logo-slide .5s .55s cubic-bezier(.2,.8,.2,1) backwards; }
.intro .logo .wordmark { animation: logo-rise .5s .75s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes logo-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes logo-slide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes logo-rise { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.logo .bar-l, .logo .cross { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.logo:hover .bar-l, .logo:focus-visible .bar-l { transform: scaleY(.68); }
.logo:hover .cross, .logo:focus-visible .cross { transform: translateY(-12px); }
@media (prefers-reduced-motion: reduce) {
  .intro .logo .bar-l, .intro .logo .bar-r, .intro .logo .cross, .intro .logo .wordmark { animation: none; }
  .logo .bar-l, .logo .cross { transition: none; }
  .logo:hover .bar-l, .logo:hover .cross, .logo:focus-visible .bar-l, .logo:focus-visible .cross { transform: none; }
}