/* The oogmi oogmi: idle, happy, thinking and peeking. Only transform and opacity are animated (cheap on phones). */
.hz{display:block;overflow:visible;background:none}
.hz-head,.hz-face{clip-path:inset(-90px -40px 0 -40px)}
.hz g{transform-box:view-box}
.hz .hz-lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
/* Breathing only where Oogmi is big enough to notice (the splash and the peeks); small logos stay still (cheaper). */
.hz-full .hz-b,.hz-peek .hz-b{animation:hzBreathe 3s ease-in-out infinite}
.hz-er{will-change:auto}

/* Idle: breathing from the bottom centre, blink and an ear twitch (the blink and the twitch are triggered from oogmi.js) */
@keyframes hzBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.015)}}
.hz-lid.blink{animation:hzBlink .16s linear 1!important}
@keyframes hzBlink{0%,100%{transform:scaleY(0)}50%{transform:scaleY(1)}}
.hz-ee.twitch{animation:hzEar .55s ease-in-out 1}
@keyframes hzEar{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}65%{transform:rotate(-5deg)}}

/* Happy: a small bounce with a squash on landing, and the paws wiggle (1.5 s) */
.hz.is-happy .hz-b{animation:hzHappy 1.5s cubic-bezier(.3,.7,.4,1) 1}
@keyframes hzHappy{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(0) scale(1.04,.94)}42%{transform:translateY(-70px) scale(.97,1.04)}62%{transform:translateY(0) scale(1.06,.92)}78%{transform:translateY(-14px) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
.hz.is-happy .hz-pl{animation:hzPawL .3s ease-in-out 4}
.hz.is-happy .hz-pr{animation:hzPawR .3s ease-in-out 4}
@keyframes hzPawL{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg) translateY(-8px)}}
@keyframes hzPawR{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg) translateY(-8px)}}

/* Thinking / checking prices: head tilt and three dots pulsing above his head */
.hz.is-think .hz-b{animation:hzThink 3s ease-in-out infinite}
@keyframes hzThink{0%,100%{transform:rotate(4deg) scaleY(1)}50%{transform:rotate(4deg) scaleY(1.015)}}
.hz-dots{opacity:0}
.hz.is-think .hz-dots{opacity:1}
.hz-dots circle{fill:#C15F3C;transform-box:fill-box;transform-origin:50% 50%}
.hz.is-think .hz-dots circle{animation:hzDot 1.1s ease-in-out infinite}
.hz.is-think .hz-dots circle:nth-child(2){animation-delay:.18s}
.hz.is-think .hz-dots circle:nth-child(3){animation-delay:.36s}
@keyframes hzDot{0%,100%{transform:scale(.55);opacity:.45}50%{transform:scale(1);opacity:1}}

/* Peeks: he slides in from an edge with a short speech bubble, then slides back out. Clipped so only his head shows. */
.hz-peek{position:absolute;z-index:40;pointer-events:none;overflow:hidden;display:flex;align-items:flex-end}
.hz-peek .hz-wrap{display:flex;align-items:center;gap:8px;transition:transform .55s cubic-bezier(.2,.9,.3,1.15)}
.hz-peek-r{right:0;flex-direction:row}
.hz-peek-r .hz-wrap{transform:translateX(100%)}
.hz-peek-r.in .hz-wrap{transform:none}
.hz-peek-l{left:0}
.hz-peek-l .hz-wrap{transform:translateX(-100%);flex-direction:row-reverse}
.hz-peek-l.in .hz-wrap{transform:none}
.hz-peek-b{left:50%;margin-left:-110px;bottom:0;width:220px;justify-content:center}
.hz-peek-b .hz-wrap{transform:translateY(100%);flex-direction:column;align-items:center;gap:4px}
.hz-peek-b.in .hz-wrap{transform:none}
.hz-bubble{max-width:150px;padding:8px 12px;border-radius:14px;background:#FFFFFF;color:#2A1A12;font:500 12.5px/1.3 'Google Sans','Outfit',system-ui,sans-serif;box-shadow:0 10px 22px -10px rgba(90,40,20,.55);position:relative}
.hz-peek-r .hz-bubble::after,.hz-peek-l .hz-bubble::after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.hz-peek-r .hz-bubble::after{right:-4px}
.hz-peek-l .hz-bubble::after{left:-4px}
.hz-peek-b .hz-bubble::after{content:"";position:absolute;left:50%;bottom:-4px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);border-radius:2px}

@media (prefers-reduced-motion:reduce){
  .hz-b,.hz.is-happy .hz-b,.hz.is-think .hz-b,.hz.is-happy .hz-paw,.hz-ee.twitch,.hz.is-think .hz-dots circle{animation:none!important}
  .hz-peek{display:none}
}

/* Logo marks: the half oogmi fills the round tile from the bottom, the same everywhere */
.lg-logo-mark .hz,.vz-consent-ic .hz,.vza-logo .hz,.mn-logo .hz{width:92%;height:auto}

/* Admin > Site config switches */
[data-vz-off]{display:none!important}
.no-mascot .hz-peek,.no-mascot .hm-bpeek,.no-mascot .hm-tp,.no-mascot #vz-peek,.no-mascot .xp-peek{display:none!important}