/* Same 2.4-second 2.0 shake and mud animation as the Dirty Turtle homepage. */
#dirty-turtle .art{overflow:hidden}
.dt-portfolio-brand-art{display:block;width:100%;height:100%;overflow:visible;flex-shrink:0}
.dt-portfolio-toggle{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 0 12px;padding:10px 12px;border:1px solid #555;border-radius:6px;background:#151515;color:#e7e7ec;font:600 13px/1.3 system-ui,sans-serif;cursor:pointer}
.dt-portfolio-toggle[hidden]{display:none}
.dt-portfolio-toggle:hover{background:#292929}
.dt-portfolio-toggle:focus-visible{outline:2px solid white;outline-offset:4px}
.dt-portfolio-brand-version{transform-box:view-box;transform-origin:82% 87%;animation:dt-portfolio-version-shake 2.4s ease-in-out infinite}
.dt-portfolio-logo-mud-impact,.dt-portfolio-logo-mud-drop,.dt-portfolio-logo-mud-drip{opacity:0;transform-box:view-box;transform-origin:0 0;animation-duration:2.4s;animation-iteration-count:infinite;animation-timing-function:ease-out}
.dt-portfolio-logo-mud-impact{animation-name:dt-portfolio-logo-mud-splat}
.dt-portfolio-logo-mud-drop{animation-name:dt-portfolio-logo-mud-fling}
.dt-portfolio-logo-mud-drip{animation-name:dt-portfolio-logo-mud-drip}
@keyframes dt-portfolio-logo-mud-splat{
  0%,40%,83%,100%{opacity:0;transform:scale(.12)}
  43%{opacity:1;transform:scale(.45)}
  48%{opacity:.97;transform:scale(1.2,.92)}
  54%{opacity:.92;transform:scale(1,1)}
  70%{opacity:.8;transform:scale(1.02,1.07)}
  81%{opacity:0;transform:scale(1.04,1.13)}
}
@keyframes dt-portfolio-logo-mud-fling{
  0%,40%,78%,100%{opacity:0;transform:translate(0,0) scale(.2) rotate(0deg)}
  44%{opacity:1;transform:translate(0,0) scale(.45) rotate(0deg)}
  55%{opacity:1;transform:translate(var(--mud-x),var(--mud-y)) scale(1) rotate(var(--mud-turn))}
  71%{opacity:0;transform:translate(var(--mud-end-x),var(--mud-end-y)) scale(.72) rotate(var(--mud-turn))}
}
@keyframes dt-portfolio-logo-mud-drip{
  0%,53%,86%,100%{opacity:0;transform:scaleY(.1)}
  57%{opacity:1;transform:scaleY(.45)}
  70%{opacity:.85;transform:translateY(14px) scaleY(1.1)}
  84%{opacity:0;transform:translateY(65px) scaleY(1.3)}
}
@keyframes dt-portfolio-version-shake{
  0%,40%,73%,100%{transform:translate(0,0) rotate(0deg)}
  44%{transform:translate(-18px,4px) rotate(-3deg)}
  48%{transform:translate(18px,-8px) rotate(3deg)}
  52%{transform:translate(-15px,4px) rotate(-2.5deg)}
  56%{transform:translate(12px,-4px) rotate(2deg)}
  61%{transform:translate(-8px,2px) rotate(-1.2deg)}
  66%{transform:translate(4px,0) rotate(.6deg)}
}

#dirty-turtle.dt-portfolio-paused .dt-portfolio-brand-art *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .dt-portfolio-brand-version{animation:none}
  .dt-portfolio-logo-mud-impact,.dt-portfolio-logo-mud-drop,.dt-portfolio-logo-mud-drip{animation:none;opacity:0}
}