/* Authored Clawd interpretation. Scoped SVG animation for the dashboard. */
.dt-mascot {
  width: 100%;
  max-width: 240px;
  margin-inline: auto;
  color: #e59978;
  line-height: 0;
  user-select: none;
  pointer-events: none;
}

.dt-mascot .dt-mascot__svg { display: block; width: 100%; height: auto; overflow: visible; }
.dt-mascot .dt-mascot__shell { fill: #d77a58; }
.dt-mascot .dt-mascot__highlight { fill: #e7916e; }
.dt-mascot .dt-mascot__shade { fill: #bd6246; }
.dt-mascot .dt-mascot__ink { fill: #302522; }
.dt-mascot .dt-mascot__tongue { fill: #e9a097; }
.dt-mascot .dt-mascot__shadow { fill: #05080d; opacity: .4; }
.dt-mascot .dt-mascot__mouth,
.dt-mascot .dt-mascot__brow { fill: none; stroke: #302522; stroke-width: 3; }
.dt-mascot .dt-mascot__body { transform-box: view-box; transform-origin: 80px 109px; }
.dt-mascot .dt-mascot__arm { transform-box: view-box; }
.dt-mascot .dt-mascot__arm--left { transform-origin: 43px 65px; }
.dt-mascot .dt-mascot__arm--right { transform-origin: 117px 65px; }
.dt-mascot .dt-mascot__leg { transform-box: fill-box; transform-origin: center top; }
.dt-mascot .dt-mascot__blink { transform-box: fill-box; transform-origin: center; }
.dt-mascot .dt-mascot__face--dead,
.dt-mascot .dt-mascot__ghost,
.dt-mascot .dt-mascot__face--happy,
.dt-mascot .dt-mascot__face--relaxed,
.dt-mascot .dt-mascot__lounge,
.dt-mascot .dt-mascot__drink,
.dt-mascot .dt-mascot__sparkles,
.dt-mascot .dt-mascot__career,
.dt-mascot .dt-mascot__crown,
.dt-mascot .dt-mascot__face--worried,
.dt-mascot .dt-mascot__face--paused,
.dt-mascot .dt-mascot__panic-mouth,
.dt-mascot .dt-mascot__tear,
.dt-mascot .dt-mascot__sweat,
.dt-mascot .dt-mascot__alarm,
.dt-mascot .dt-mascot__rest { display: none; }
.dt-mascot .dt-mascot__tear,
.dt-mascot .dt-mascot__sweat { fill: #8ecadd; }

.dt-mascot[data-state="ready"] .dt-mascot__body { animation: dt-clawd-breathe 3.6s ease-in-out infinite; }
.dt-mascot[data-state="ready"] .dt-mascot__blink { animation: dt-clawd-blink 5.2s linear infinite; }

.dt-mascot[data-state="happy"] .dt-mascot__face--ready,
.dt-mascot[data-state="relaxed"] .dt-mascot__face--ready,
.dt-mascot[data-state="low"] .dt-mascot__face--ready,
.dt-mascot[data-state="empty"] .dt-mascot__face--ready,
.dt-mascot[data-state="paused"] .dt-mascot__face--ready { display: none; }
.dt-mascot[data-state="low"] .dt-mascot__face--worried,
.dt-mascot[data-state="empty"] .dt-mascot__face--worried { display: inline; }
.dt-mascot[data-state="low"] .dt-mascot__body { animation: dt-clawd-worry 2.4s ease-in-out infinite; }
.dt-mascot[data-state="low"] .dt-mascot__sweat--one { display: inline; animation: dt-clawd-sweat 2.4s ease-in infinite; }
.dt-mascot[data-state="low"] .dt-mascot__arm--left { transform: rotate(18deg); }
.dt-mascot[data-state="low"] .dt-mascot__arm--right { transform: rotate(-18deg); }

.dt-mascot[data-state="empty"] .dt-mascot__body { animation: dt-clawd-panic .72s ease-in-out infinite; }
.dt-mascot[data-state="empty"] .dt-mascot__arm--left { transform: rotate(100deg); animation: dt-clawd-flail-left .6s ease-in-out infinite; }
.dt-mascot[data-state="empty"] .dt-mascot__arm--right { transform: rotate(-100deg); animation: dt-clawd-flail-right .68s ease-in-out -.22s infinite; }
.dt-mascot[data-state="empty"] .dt-mascot__leg--one,
.dt-mascot[data-state="empty"] .dt-mascot__leg--three { animation: dt-clawd-step .72s ease-in-out infinite; }
.dt-mascot[data-state="empty"] .dt-mascot__leg--two,
.dt-mascot[data-state="empty"] .dt-mascot__leg--four { animation: dt-clawd-step .72s ease-in-out -.36s infinite; }
.dt-mascot[data-state="empty"] .dt-mascot__low-mouth { display: none; }
.dt-mascot[data-state="empty"] .dt-mascot__panic-mouth,
.dt-mascot[data-state="empty"] .dt-mascot__alarm { display: inline; }
.dt-mascot[data-state="empty"] .dt-mascot__tear { display: inline; animation: dt-clawd-tears .95s ease-in infinite; }
.dt-mascot[data-state="empty"] .dt-mascot__tear--right { animation-delay: -.48s; }
.dt-mascot[data-state="empty"] .dt-mascot__sweat { display: inline; animation: dt-clawd-sweat 1.25s ease-in infinite; }
.dt-mascot[data-state="empty"] .dt-mascot__sweat--two { animation-delay: -.65s; }

.dt-mascot[data-state="paused"] .dt-mascot__face--paused,
.dt-mascot[data-state="paused"] .dt-mascot__rest { display: inline; }
.dt-mascot[data-state="paused"] .dt-mascot__body { transform: translateY(3px); }
.dt-mascot[data-state="paused"] .dt-mascot__rest { color: #8b96a8; }

/* Mood and career are independent: the same crab visibly grows with the operation. */
.dt-mascot[data-stage="growing"] .dt-mascot__career,
.dt-mascot[data-stage="empire"] .dt-mascot__career,
.dt-mascot[data-stage="empire"] .dt-mascot__crown { display: inline; }
.dt-mascot[data-state="happy"] .dt-mascot__face--happy,
.dt-mascot[data-state="happy"] .dt-mascot__sparkles { display: inline; }
.dt-mascot[data-state="happy"] .dt-mascot__body { animation: dt-clawd-happy 2.2s ease-in-out infinite; }
.dt-mascot[data-state="happy"] .dt-mascot__arm--left { transform: rotate(30deg); }
.dt-mascot[data-state="happy"] .dt-mascot__arm--right { transform: rotate(-30deg); }
.dt-mascot[data-state="happy"] .dt-mascot__sparkles { transform-origin: 80px 40px; animation: dt-clawd-sparkle 3.2s ease-in-out infinite; }
.dt-mascot[data-state="relaxed"] .dt-mascot__face--relaxed,
.dt-mascot[data-state="relaxed"] .dt-mascot__lounge,
.dt-mascot[data-state="relaxed"] .dt-mascot__drink { display: inline; }
.dt-mascot[data-state="relaxed"] .dt-mascot__body { transform: translate(-4px, 5px) rotate(-13deg); animation: dt-clawd-lounge 5s ease-in-out infinite; }
.dt-mascot[data-state="relaxed"] .dt-mascot__arm--left { transform: rotate(105deg); }
.dt-mascot[data-state="relaxed"] .dt-mascot__arm--right { transform: rotate(-8deg); }
.dt-mascot[data-state="relaxed"] .dt-mascot__leg--one,
.dt-mascot[data-state="relaxed"] .dt-mascot__leg--two { transform: rotate(-24deg); }
.dt-mascot[data-state="relaxed"] .dt-mascot__steam { animation: dt-clawd-steam 4s ease-in-out infinite; }
@keyframes dt-clawd-happy { 0%,100% { transform: translateY(0) rotate(-1deg); } 45% { transform: translateY(-4px) rotate(1deg); } }
@keyframes dt-clawd-sparkle { 0%,100% { opacity: .6; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes dt-clawd-lounge { 0%,100% { transform: translate(-4px,5px) rotate(-13deg); } 50% { transform: translate(-4px,3px) rotate(-11deg); } }
@keyframes dt-clawd-steam { 0%,100% { opacity: .35; transform: translateY(0); } 50% { opacity: .8; transform: translateY(-3px); } }

@keyframes dt-clawd-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes dt-clawd-blink { 0%, 42%, 46%, 100% { transform: scaleY(1); } 43%, 45% { transform: scaleY(.08); } }
@keyframes dt-clawd-worry { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes dt-clawd-panic { 0%, 100% { transform: translate(-1.5px, 0) rotate(-3deg); } 50% { transform: translate(1.5px, -3px) rotate(3deg); } }
@keyframes dt-clawd-flail-left { 0%, 100% { transform: rotate(80deg); } 50% { transform: rotate(128deg); } }
@keyframes dt-clawd-flail-right { 0%, 100% { transform: rotate(-80deg); } 50% { transform: rotate(-128deg); } }
@keyframes dt-clawd-step { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(5deg); } }
@keyframes dt-clawd-tears { 0% { opacity: 0; transform: translateY(-2px); } 12%, 65% { opacity: .95; } 100% { opacity: 0; transform: translateY(27px); } }
@keyframes dt-clawd-sweat { 0% { opacity: 0; transform: translateY(-3px); } 15%, 55% { opacity: .85; } 100% { opacity: 0; transform: translateY(12px); } }

/* A service outage has its own unmistakable, slightly overdramatic obituary. */
.dt-mascot[data-state="dead"] .dt-mascot__face { display: none; }
.dt-mascot[data-state="dead"] .dt-mascot__face--dead,
.dt-mascot[data-state="dead"] .dt-mascot__ghost { display: inline; }
.dt-mascot[data-state="dead"] .dt-mascot__shell { fill: #a88a78; }
.dt-mascot[data-state="dead"] .dt-mascot__highlight { fill: #c4a58b; }
.dt-mascot[data-state="dead"] .dt-mascot__shade { fill: #876e63; }
.dt-mascot[data-state="dead"] .dt-mascot__body { transform: translateY(9px) scale(.92,.55); animation: dt-clawd-last-twitch 5s ease-in-out infinite; }
.dt-mascot[data-state="dead"] .dt-mascot__arm--left { transform: rotate(-18deg); }
.dt-mascot[data-state="dead"] .dt-mascot__arm--right { transform: rotate(18deg); }
.dt-mascot[data-state="dead"] .dt-mascot__ghost { animation: dt-clawd-ghost-rise 2.8s ease-in-out infinite; }
.dt-mascot[data-state="dead"] .dt-mascot__ghost-tail { animation: dt-clawd-ghost-tail 2.8s ease-in-out infinite; }
.dt-mascot[data-state="dead"] .dt-mascot__shadow { rx: 48px; opacity: .5; }
@keyframes dt-clawd-ghost-rise { 0%,100% { opacity: .65; transform: translateY(7px); } 50% { opacity: 1; transform: translateY(-5px); } }
@keyframes dt-clawd-ghost-tail { 0%,100% { opacity: .7; } 50% { opacity: .2; } }
@keyframes dt-clawd-last-twitch { 0%,90%,100% { transform: translateY(9px) scale(.92,.55); } 93% { transform: translate(1px,9px) scale(.92,.55); } 96% { transform: translate(-1px,9px) scale(.92,.55); } }

@media (prefers-reduced-motion: reduce) {
  .dt-mascot *, .dt-mascot *::before, .dt-mascot *::after { animation: none !important; transition: none !important; }
  .dt-mascot[data-state="dead"] .dt-mascot__body { transform: translateY(9px) scale(.92,.55); }
  .dt-mascot[data-state="dead"] .dt-mascot__ghost { opacity: .85; transform: none; }
  .dt-mascot[data-state="empty"] .dt-mascot__body { transform: rotate(-2deg); }
  .dt-mascot[data-state="empty"] .dt-mascot__arm--left { transform: rotate(100deg); }
  .dt-mascot[data-state="empty"] .dt-mascot__arm--right { transform: rotate(-100deg); }
  .dt-mascot .dt-mascot__tear, .dt-mascot .dt-mascot__sweat { opacity: .85; }
  .dt-mascot[data-state="happy"] .dt-mascot__body { transform: translateY(-2px); }
  .dt-mascot[data-state="relaxed"] .dt-mascot__body { transform: translate(-4px,5px) rotate(-13deg); }
}