/* Тапир Таппси — фигурка, прогулка, реплики. Один в один из мини-аппа (cabinet.html, блок «МАСКОТ»).
   Цвета берутся из переменных: переопределите их под тему сайта. */
.tapir-mascot{
  --tapir:#1e2a36;          /* заливка и контур фигурки */
  --tapirEye:#ffffff;       /* белок глаза */
  --tapir-bub-bg:#ffffff;   /* фон пузыря */
  --tapir-bub-edge:#e6e2da; /* рамка пузыря */
  --tapir-bub-ink:#26211c;  /* текст в пузыре */
  position:fixed; z-index:35; left:14px; bottom:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  background:0; border:0; padding:0; pointer-events:none; transition:left .3s linear;
}
.tapir-mascot[hidden]{display:none}
.tapir-mascot .tap{pointer-events:auto;cursor:pointer;touch-action:manipulation;padding:10px;margin:-10px;display:block}
.tapir-mascot .bub{pointer-events:auto;cursor:pointer;touch-action:manipulation;width:max-content;max-width:240px;
  font-size:12px;line-height:1.35;text-align:left;padding:5px 9px;border-radius:10px;
  background:var(--tapir-bub-bg);border:1px solid var(--tapir-bub-edge);color:var(--tapir-bub-ink);
  animation:tapir-bubble 4.4s ease-out forwards}

.tapir{animation:tapir-breathe 4.2s ease-in-out infinite;transform-origin:50% 88%;display:block}
.tapir .eye{animation:tapir-blink 6.5s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.tapir .ear{animation:tapir-ear 7.8s ease-in-out infinite;transform-origin:80% 100%;transform-box:fill-box}
.tapir .lg{transform-origin:50% 0;transform-box:fill-box}
.tapir .tail{transform-origin:0% 50%;transform-box:fill-box}
.tapir[data-act="wag"] .tail{animation:tapir-tail 1.2s ease-in-out}
.tapir[data-act="hop"]{animation:tapir-breathe 4.2s ease-in-out infinite,tapir-hop 1.1s ease-in-out}
.tapir[data-act="nod"]{animation:tapir-breathe 4.2s ease-in-out infinite,tapir-nod 1.3s ease-in-out}
.tapir[data-walk="1"]{animation:tapir-bob .34s ease-in-out infinite}
.tapir[data-walk="1"] .lg1,.tapir[data-walk="1"] .lg4{animation:tapir-step .34s ease-in-out infinite}
.tapir[data-walk="1"] .lg2,.tapir[data-walk="1"] .lg3{animation:tapir-step .34s ease-in-out infinite reverse}

@keyframes tapir-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes tapir-step{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
@keyframes tapir-breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1.1px) scaleY(1.035)}}
@keyframes tapir-blink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.1)}}
@keyframes tapir-ear{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-15deg)}94%{transform:rotate(6deg)}}
@keyframes tapir-tail{0%,100%{transform:rotate(0)}40%{transform:rotate(17deg)}70%{transform:rotate(-9deg)}}
@keyframes tapir-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-7px)}55%{transform:translateY(0)}70%{transform:translateY(-3px)}}
@keyframes tapir-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}65%{transform:rotate(-3deg)}}
@keyframes tapir-bubble{0%{opacity:0;transform:translateY(5px) scale(.9)}12%{opacity:1;transform:translateY(0) scale(1)}82%{opacity:1}100%{opacity:0;transform:translateY(-3px)}}

@media (prefers-reduced-motion:reduce){
  .tapir-mascot{transition:none!important}
  .tapir,.tapir *,.tapir-mascot .bub{animation:none!important}
}