.site-header {
    position: relative;
}

.site-header [data-mascot-nav] {
    position: relative;
    z-index: 2;
}

.mouse-mascot-fence {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
}

.mouse-mascot-fence.is-perched {
    z-index: 3;
}

.mouse-mascot {
    position: absolute;
    top: 0;
    left: 0;
    width: 68px;
    height: 40px;
    transform-origin: center bottom;
    will-change: transform;
    filter: drop-shadow(0 3px 2px rgba(28, 68, 95, .2));
}

.mouse-mascot-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mouse-mascot-body,
.mouse-mascot-head {
    transform-box: fill-box;
    transform-origin: center bottom;
}

.mouse-mascot-tail {
    fill: none;
    stroke: #d49d9f;
    stroke-width: 3.5;
    stroke-linecap: round;
}

.mouse-mascot-back-foot {
    fill: #d6b2b0;
    stroke: #b99494;
    stroke-width: 1;
}

.mouse-mascot-torso {
    fill: url(#mascot-fur);
    stroke: #c9c3bd;
    stroke-width: 1.2;
}

.mouse-mascot-belly {
    fill: #faf7f3;
    opacity: .8;
}

.mouse-mascot-fur-line {
    fill: none;
    stroke: #ccc7c1;
    stroke-width: .8;
    stroke-linecap: round;
    opacity: .65;
}

.mouse-mascot-face {
    fill: url(#mascot-face);
    stroke: #c8c1ba;
    stroke-width: 1.2;
}

.mouse-mascot-ear-back,
.mouse-mascot-ear {
    fill: url(#mascot-ear);
    stroke: #bd9192;
    stroke-width: 1;
}

.mouse-mascot-ear-back {
    opacity: .7;
}

.mouse-mascot-ear-inner {
    fill: #d59b9d;
    opacity: .75;
}

.mouse-mascot-cheek,
.mouse-mascot-whiskers {
    fill: none;
    stroke-linecap: round;
}

.mouse-mascot-cheek {
    stroke: #c9bbb5;
    stroke-width: 1;
}

.mouse-mascot-whiskers {
    stroke: #8e8884;
    stroke-width: .9;
}

.mouse-mascot-eye {
    fill: #7b343d;
}

.mouse-mascot-eye-glint {
    fill: #fff;
}

.mouse-mascot-nose,
.mouse-mascot-lick {
    fill: #d79099;
}

.mouse-mascot-lick {
    opacity: 0;
}

.mouse-mascot-paws {
    fill: url(#mascot-fur);
    stroke: #c8b8b5;
    stroke-width: 1.3;
    opacity: 0;
}

.mouse-mascot[data-state="running"] .mouse-mascot-body,
.mouse-mascot[data-state="following"] .mouse-mascot-body,
.mouse-mascot[data-state="returning"] .mouse-mascot-body {
    animation: mascot-run .24s ease-in-out infinite alternate;
}

.mouse-mascot[data-state="running"] .mouse-mascot-head,
.mouse-mascot[data-state="following"] .mouse-mascot-head,
.mouse-mascot[data-state="returning"] .mouse-mascot-head {
    animation: mascot-run .24s ease-in-out infinite alternate-reverse;
}

.mouse-mascot[data-state="grooming"] .mouse-mascot-head {
    animation: mascot-groom .55s ease-in-out 3;
}

.mouse-mascot[data-state="grooming"] .mouse-mascot-lick {
    animation: mascot-tongue .55s ease-in-out 3;
}

.mouse-mascot[data-state="perching"] .mouse-mascot-body,
.mouse-mascot[data-state="resting"] .mouse-mascot-body {
    opacity: 0;
}

.mouse-mascot[data-state="perching"] .mouse-mascot-body {
    transition: opacity .35s ease-out;
}

.mouse-mascot[data-state="perching"] .mouse-mascot-paws,
.mouse-mascot[data-state="resting"] .mouse-mascot-paws {
    opacity: 1;
}

.mouse-mascot[data-state="perching"] .mouse-mascot-head,
.mouse-mascot[data-state="perching"] .mouse-mascot-paws {
    animation: mascot-climb .38s ease-out both;
}

.mouse-mascot[data-state="resting"] .mouse-mascot-head {
    animation: mascot-look 4s ease-in-out infinite;
}

.mouse-mascot[data-state="resting"] .mouse-mascot-nose {
    animation: mascot-nose 1.6s ease-in-out infinite;
}

@keyframes mascot-run {
    to { transform: translateY(-2px); }
}

@keyframes mascot-groom {
    50% { transform: rotate(-9deg) translateY(1px); }
}

@keyframes mascot-tongue {
    45% { opacity: 1; transform: translateY(3px); }
    70% { opacity: 0; }
}

@keyframes mascot-look {
    25% { transform: rotate(-10deg) translateX(-2px); }
    65% { transform: rotate(9deg) translateX(2px); }
}

@keyframes mascot-climb {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes mascot-nose {
    50% { opacity: .65; }
}

@media (max-width: 991.98px), (prefers-reduced-motion: reduce) {
    .mouse-mascot-fence {
        display: none;
    }
}