/* Animated Homesket H logo (shared by the home page and the login page) */
.logo-h { overflow: visible; cursor: pointer; animation: none !important; -webkit-tap-highlight-color: transparent; }
#hero-svg.logo-h { display: block; width: min(230px, 60vw, 28vh); min-width: 170px; height: auto; margin-top: 6px; }
.lh-lean { transform-origin: 32px 58px; transition: transform 0.3s ease-out; }
.lh-bob { transform-origin: 32px 58px; animation: lh-float 3.2s ease-in-out infinite; }
.lh-bob.jump { animation: lh-jump 0.7s ease-out; }
.lh-bob.shake { animation: lh-shake 0.5s ease-in-out; }
.lh-roof { transform-origin: 32px 30px; }
.lh-bob.jump .lh-roof { animation: lh-roof 0.7s ease-out; }
@keyframes lh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes lh-jump { 0% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(0) scale(1.07, 0.91); } 50% { transform: translateY(-8px) scale(0.96, 1.05); } 80% { transform: translateY(0) scale(1.05, 0.95); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes lh-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1.5px); } 80% { transform: translateX(1.5px); } }
@keyframes lh-roof { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } }
.lh-eyes { transition: transform 0.14s ease-out, opacity 0.12s ease; }
.lh-eye { transform-box: fill-box; transform-origin: center; transition: transform 0.09s ease; }
.logo-h.blink .lh-eye { transform: scaleY(0.1); }
.lh-s1, .lh-s2, .lh-s3, .lh-happy { transition: opacity 0.12s ease; }
.lh-s2, .lh-s3, .lh-happy { opacity: 0; }
.logo-h[data-mood="happy"] .lh-s1, .logo-h[data-mood="cheer"] .lh-s1, .logo-h[data-mood="worry"] .lh-s1 { opacity: 0; }
.logo-h[data-mood="happy"] .lh-s2, .logo-h[data-mood="cheer"] .lh-s2 { opacity: 1; }
.logo-h[data-mood="worry"] .lh-s3 { opacity: 1; }
.logo-h[data-mood="cheer"] .lh-eyes { opacity: 0; }
.logo-h[data-mood="cheer"] .lh-happy { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lh-bob, .lh-bob.jump, .lh-bob.shake, .lh-bob.jump .lh-roof { animation: none !important; } .lh-lean, .lh-eyes, .lh-eye { transition: none !important; } }