/* Bark Raiders — the dog's face (face.js), on the HUD and in the model inspector. The box gets .dogface and
   .st-<state>; parts classed .x show only in the states they also name (.s-<state>). Transforms are in the
   SVG's 200-unit grid (transform-box: view-box). */
.dogface {
  overflow: hidden; border-radius: 6px;
  background: rgba(14, 17, 15, .72); box-shadow: inset 0 0 0 1px rgba(236, 226, 200, .18);
}
.dogface svg { display: block; width: 100%; height: 100%; }
.dogface text { font-family: var(--display, "Saira Stencil One", "Impact", sans-serif); }
.dogface.st-hurt { animation: face-hurt .6s ease-in-out infinite; }
@keyframes face-hurt { 50% { box-shadow: inset 0 0 0 2px var(--danger, #ff5f4a), 0 0 16px var(--danger, #ff5f4a); } }

.dogface .x { display: none; }
.st-idle .s-idle, .st-walk .s-walk, .st-creep .s-creep, .st-sprint .s-sprint, .st-sniff .s-sniff,
.st-dig .s-dig, .st-bark .s-bark, .st-swim .s-swim, .st-hurt .s-hurt, .st-balk .s-balk { display: inline; }
.dogface g, .dogface path, .dogface circle, .dogface ellipse, .dogface text { transform-box: view-box; }
.dogface .head { transform-origin: 100px 150px; }
.dogface .eyes-open { transform-origin: 100px 96px; }
.dogface .brow-l { transform-origin: 74px 72px; }
.dogface .brow-r { transform-origin: 126px 72px; }
.dogface .nose { transform-origin: 100px 114px; }
.dogface .tongue-pant { transform-origin: 100px 138px; animation: face-pant .7s ease-in-out infinite alternate; }
.dogface .tongue-loll { transform-origin: 108px 140px; animation: face-loll .3s ease-in-out infinite; }
.dogface .star, .dogface .q, .dogface .woof { transform-box: fill-box; transform-origin: center; }

/* The head, as a whole */
.st-idle .head { animation: face-bob 2.4s ease-in-out infinite; }
.st-walk .head { animation: face-bob .5s ease-in-out infinite; }
.st-creep .head { animation: face-creep 1.8s ease-in-out infinite; }
.st-sprint .head { animation: face-gallop .3s ease-in-out infinite; }
.st-sniff .head { animation: face-nudge .45s ease-in-out infinite; }
.st-dig .head { animation: face-nod .24s ease-in-out infinite; }
.st-bark .head { animation: face-jolt .9s ease-out infinite; }
.st-swim .head { animation: face-float 1.6s ease-in-out infinite; }
.st-hurt .head { animation: face-wobble .7s ease-in-out infinite; }
.st-balk .head { animation: face-tilt 1.8s ease-in-out infinite; }

/* Ears */
.st-idle .ear { animation: face-swing 2.4s ease-in-out infinite alternate; }
.st-walk .ear { animation: face-swing .5s ease-in-out infinite alternate; }
.st-swim .ear { animation: face-swing 1.6s ease-in-out infinite alternate; }
.st-sprint .ear { animation: face-swing .15s ease-in-out infinite alternate; }
.st-dig .ear { animation: face-swing .24s ease-in-out infinite alternate; }
.st-hurt .ear { animation: face-swing .35s ease-in-out infinite alternate; }
.st-sniff .ear { animation: face-perk .45s ease-in-out infinite; }
.st-bark .ear { animation: face-bark-ear .9s ease-out infinite; }
.st-creep .ear { transform: rotate(20deg); }
.st-balk .ear-l { transform: rotate(-16deg); }
.st-balk .ear-r { transform: rotate(14deg); }

/* Eyes, brows, nose, tongue */
.st-idle .eyes-open, .st-walk .eyes-open, .st-swim .eyes-open, .st-balk .eyes-open { animation: face-blink 3.4s infinite; }
.st-creep .pupil { animation: face-look 3s ease-in-out infinite; }
.st-hurt .eye-r { display: none; }
.st-balk .brow-r { transform: translateY(-6px) rotate(-10deg); }
.st-dig .brow-l { transform: translateY(3px) rotate(12deg); }
.st-dig .brow-r { transform: translateY(3px) rotate(-12deg); }
.st-bark :is(.brow-l, .brow-r), .st-sprint :is(.brow-l, .brow-r) { transform: translateY(-5px); }
.st-sniff .nose { animation: face-wiggle .12s ease-in-out infinite alternate; }
.st-walk .tongue-pant { animation-duration: .25s; }

/* Effects */
.dogface .drool { animation: face-drool .6s ease-out infinite; }
.dogface .drool2 { animation: face-drool2 .6s ease-out .3s infinite; }
.dogface .scent { stroke-dasharray: 4 10; animation: face-scent .6s linear infinite; }
.dogface .puff { animation: face-flicker .3s linear infinite; }
.dogface .ca { animation: face-clod-a .6s ease-out infinite; }
.dogface .cb { animation: face-clod-b .6s ease-out .15s infinite; }
.dogface .cc { animation: face-clod-c .6s ease-out .3s infinite; }
.dogface .cd { animation: face-clod-d .6s ease-out .45s infinite; }
.dogface .speed { stroke-dasharray: 18 16; animation: face-speed .25s linear infinite; }
.dogface .arcs { transform-origin: 100px 100px; animation: face-pulse .9s ease-out infinite; }
.dogface .woof { animation: face-pop .9s ease-out infinite; }
.dogface .wave { animation: face-wave 1.4s linear infinite; }
.dogface .wave2 { animation: face-wave 1.1s linear infinite reverse; }
.dogface .splash { animation: face-splash 1s ease-out infinite; }
.dogface .splash.d2 { animation-delay: .5s; }
.dogface .star { animation: face-twinkle .8s ease-in-out infinite; }
.dogface .star.d2 { animation-delay: .27s; }
.dogface .star.d3 { animation-delay: .54s; }
.dogface .q { animation: face-q 1.2s ease-in-out infinite; }
.dogface .sweat { animation: face-sweat 1.4s ease-in infinite; }
/* The Sixth Sense's monocle: the sweep goes round, the dial turns slowly back the other way, the light blinks */
.dogface .monocle :is(.sweep, .dial) { transform-origin: 74px 96px; }
.dogface .monocle .sweep { animation: face-spin 2.2s linear infinite; }
.dogface .monocle .dial { animation: face-spin 7s linear infinite reverse; }
.dogface .monocle .led { animation: face-led 1.1s steps(1) infinite; }

@keyframes face-bob { 50% { transform: translateY(3px); } }
@keyframes face-gallop { 0%, 100% { transform: translateY(2px) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes face-creep { 0%, 100% { transform: translate(-3px, 9px); } 50% { transform: translate(3px, 9px); } }
@keyframes face-nudge { 50% { transform: translateY(-3px) scale(1.03); } }
@keyframes face-nod { 50% { transform: translateY(8px) rotate(3deg); } }
@keyframes face-jolt { 12% { transform: translateY(-4px) scale(1.1); } 30% { transform: none; } }
@keyframes face-float { 0%, 100% { transform: rotate(-3deg); } 50% { transform: translateY(5px) rotate(3deg); } }
@keyframes face-wobble { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes face-tilt { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(-8deg); } }
@keyframes face-swing { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes face-perk { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-4deg); } }
@keyframes face-bark-ear { 12% { transform: rotate(-18deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-4deg); } 60% { transform: none; } }
@keyframes face-blink { 0%, 90%, 100% { transform: none; } 94% { transform: scaleY(.1); } }
@keyframes face-look { 0%, 35%, 100% { transform: translateX(-4px); } 50%, 85% { transform: translateX(4px); } }
@keyframes face-wiggle { to { transform: scale(1.14, .9); } }
@keyframes face-pant { to { transform: scaleY(1.18); } }
@keyframes face-loll { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(10deg) scaleY(1.08); } }
@keyframes face-drool { 0% { opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(48px, -34px); opacity: 0; } }
@keyframes face-drool2 { 0% { opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(30px, -50px); opacity: 0; } }
@keyframes face-scent { to { stroke-dashoffset: -42; } }
@keyframes face-flicker { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes face-clod-a { to { transform: translate(-70px, -120px); opacity: 0; } }
@keyframes face-clod-b { to { transform: translate(64px, -130px); opacity: 0; } }
@keyframes face-clod-c { to { transform: translate(-26px, -150px); opacity: 0; } }
@keyframes face-clod-d { to { transform: translate(90px, -92px); opacity: 0; } }
@keyframes face-speed { to { stroke-dashoffset: -34; } }
@keyframes face-pulse { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes face-pop { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 30% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes face-wave { to { transform: translateX(-50px); } }
@keyframes face-splash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes face-twinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: none; opacity: 1; } }
@keyframes face-q { 0%, 100% { transform: rotate(8deg); } 50% { transform: translateY(-5px) rotate(16deg); } }
@keyframes face-sweat { 0% { opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes face-spin { to { transform: rotate(360deg); } }
@keyframes face-led { 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) { .dogface, .dogface * { animation: none !important; } }