/* Living header logo (js/logo-cat.js): same size as .brand-mark in css/style.css */
.brand-mark.lc-hidden { display: none; }
.brand-anim { width: 46px; height: 46px; flex: none; margin-block: -4px; overflow: visible; filter: drop-shadow(0 2px 4px rgb(16 21 42 / .2)); }
@media (max-width: 640px) { .brand-anim { width: 38px; height: 38px; } }
.brand-anim .lc-cat, .brand-anim .lc-head, .brand-anim .lc-lid-s { transform-box: view-box; }
.brand-anim .lc-cat { transform-origin: 50px 100px; animation: lc-breathe 3.6s ease-in-out infinite; }
.brand-anim .lc-head { transform-origin: 50px 60px; }
.brand-anim .lc-lid-s { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 0; }
.brand-anim.lc-blink .lc-lid-s { animation: lc-shut .26s ease-in-out; }
.brand-anim.lc-wink .lc-lid-1 .lc-lid-s { animation: lc-wink .9s ease-in-out; }
.brand-anim.lc-wink .lc-head { animation: lc-tiltw .9s ease-in-out; }
.brand-anim.lc-tilt .lc-head { animation: lc-tilt 1.6s ease-in-out; }
.brand-anim.lc-peek .lc-cat { animation: lc-peek 3.6s cubic-bezier(.45,0,.3,1); }
.brand-anim.lc-peek .lc-lid-1 .lc-lid-s { animation: lc-wink .8s 2.6s ease-in-out; }
.brand-anim .lc-spark { transform-box: fill-box; transform-origin: center; animation: lc-twinkle 2.8s ease-in-out infinite; }
.brand-anim .lc-spark-2 { animation-delay: 1.1s; }
@keyframes lc-breathe { 50% { transform: translateY(.6px) scale(1.012, .99); } }
@keyframes lc-shut { 0%, 100% { transform: scaleY(0); } 45%, 55% { transform: scaleY(1); } }
@keyframes lc-wink { 0%, 100% { transform: scaleY(0); } 20%, 75% { transform: scaleY(1); } }
@keyframes lc-tiltw { 0%, 100% { transform: rotate(0); } 25%, 70% { transform: rotate(-6deg); } }
@keyframes lc-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(7deg); } 65% { transform: rotate(-4deg); } }
/* ducks down into the circle, waits, then peeks up eyes first and pops back */
@keyframes lc-peek { 0% { transform: translateY(0); } 18% { transform: translateY(62px); } 40% { transform: translateY(62px); } 58% { transform: translateY(30px) rotate(-5deg); } 72% { transform: translateY(30px) rotate(4deg); } 90%, 100% { transform: translateY(0); } }
@keyframes lc-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(25deg); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .brand-anim *, .brand-anim { animation: none !important; } }
html.pref-calm .brand-anim * { animation: none !important; }