/* ===== ПИНЧИК — маскот PinMedia (PinMedia) ===== */
#pinMascot{
  --pin-a:#6E63E8;  --pin-b:#3A3FC4;  --pin-c:#232796;
  --pin-ink:#15173F;  --pin-rim:#1B1E63;
  --pin-surface:#FFFFFF;  --pin-text:#15173F;
  --pin-edge:rgba(21,23,63,.12);
  --pin-shadow:rgba(21,23,63,.22);
  --pin-halo:transparent;
  --pin-blush:rgba(255,120,150,.55);
  position:fixed; right:22px; bottom:22px; z-index:120;
  display:flex; align-items:flex-end; gap:10px;
  opacity:0; transform:translateY(34px) scale(.86) rotate(-8deg);
  transition:opacity .5s ease,
             transform .7s cubic-bezier(.2,1.35,.35,1),
             bottom .35s ease;
  pointer-events:none;
}
#pinMascot.pin-in{opacity:1; transform:none; pointer-events:auto}

[data-theme="dark"] #pinMascot{
  --pin-a:#A8B2FF;  --pin-b:#7C88FF;  --pin-c:#5C68F0;
  --pin-ink:#0B0C1E;  --pin-rim:#2A3090;
  --pin-surface:#1C1F45;  --pin-text:#ECEEFF;
  --pin-edge:rgba(255,255,255,.14);
  --pin-shadow:rgba(0,0,0,.6);
  --pin-halo:rgba(124,136,255,.32);
  --pin-blush:rgba(255,140,170,.4);
}

/* ---------- цвета SVG: только через CSS ---------- */
#pinMascot .pin-s1{stop-color:var(--pin-a)}
#pinMascot .pin-s2{stop-color:var(--pin-b)}
#pinMascot .pin-s3{stop-color:var(--pin-c)}
#pinMascot .pin-wire{stroke-linecap:round; stroke-linejoin:round; fill:none}
#pinMascot .pin-rim{stroke:var(--pin-rim)}
#pinMascot .pin-core{stroke:url(#pinWireGrad)}
#pinMascot .pin-shine{stroke:rgba(255,255,255,.5); stroke-linecap:round; opacity:.8}
#pinMascot .pin-shadow{fill:rgba(21,23,63,.2)}
[data-theme="dark"] #pinMascot .pin-shadow{fill:rgba(0,0,0,.5)}
#pinMascot .pin-brow{stroke:var(--pin-ink); fill:none; stroke-linecap:round}
#pinMascot .pin-eyew{fill:url(#pinSclera); stroke:none}
#pinMascot .pin-eyeline{fill:none; stroke:var(--pin-ink); stroke-width:3}
#pinMascot .pin-eyeshade{fill:rgba(21,23,63,.16)}
#pinMascot .pin-sc1{stop-color:#FFFFFF}
#pinMascot .pin-sc2{stop-color:#DCE0F2}
#pinMascot .pin-iris{fill:url(#pinIris)}
#pinMascot .pin-ir1{stop-color:var(--pin-a)}
#pinMascot .pin-ir2{stop-color:var(--pin-c)}
#pinMascot .pin-pupil{fill:var(--pin-ink)}
#pinMascot .pin-glint{fill:#fff}
#pinMascot .pin-glint-b{opacity:.75}
#pinMascot .pin-blush{fill:var(--pin-blush); opacity:0; transition:opacity .35s ease}
#pinMascot .pin-mag-h{stroke:var(--pin-c); stroke-linecap:round}
#pinMascot .pin-mag-o{fill:rgba(255,255,255,.3); stroke:var(--pin-c)}
#pinMascot .pin-mag-s{stroke:rgba(255,255,255,.85); stroke-linecap:round}
#pinMascot .pin-arm{stroke:var(--pin-b); fill:none; stroke-linecap:round}
#pinMascot .pin-tip{fill:var(--pin-b)}
#pinMascot .pin-dot{fill:var(--pin-b)}
#pinMascot .pin-sp-a{fill:var(--pin-a)}
#pinMascot .pin-sp-b{fill:var(--pin-c)}
#pinMascot .pin-acc-zzz text{fill:var(--pin-b)}

/* ---------- тело ---------- */
.pin-body{
  position:relative; border:none; background:none; padding:0;
  cursor:pointer; line-height:0;
  filter:drop-shadow(0 12px 24px var(--pin-shadow)) drop-shadow(0 0 20px var(--pin-halo));
  animation:pinIdle 5.2s ease-in-out infinite;
  transform-origin:50% 92%;
  transition:filter .3s ease;
}
.pin-body:hover{filter:drop-shadow(0 16px 30px var(--pin-shadow)) drop-shadow(0 0 26px var(--pin-halo))}
.pin-body:focus-visible{outline:3px solid var(--pin-b); outline-offset:6px; border-radius:16px}
.pin-body svg{overflow:visible}
@keyframes pinIdle{
  0%,100%{transform:rotate(-2.2deg) translateY(0) scale(1)}
  50%    {transform:rotate(2.2deg) translateY(-6px) scale(1.012,.988)}
}

/* хвост качается сам по себе — пружинка */
.pin-tail-g{transform-box:fill-box; transform-origin:50% 0%;
  animation:pinTail 3.1s ease-in-out infinite; animation-delay:-.45s}
@keyframes pinTail{
  0%,100%{transform:rotate(-5deg) translateY(0)}
  50%    {transform:rotate(6deg) translateY(2px)}
}

/* тень дышит вместе с телом */
.pin-shadow{transform-box:fill-box; transform-origin:center; animation:pinShadow 5.2s ease-in-out infinite}
@keyframes pinShadow{
  0%,100%{transform:scale(1); opacity:1}
  50%    {transform:scale(.86); opacity:.65}
}

/* глаза: подъём бровей при наведении */
.pin-body:hover .pin-brow{transform:translateY(-4px)}
.pin-brow{transform-box:fill-box; transform-origin:center; transition:transform .25s ease}

/* глаза отстают от корпуса — инерция */
.pin-eyeball{transform-box:fill-box; transform-origin:center;
  animation:pinEyeLag 5.2s ease-in-out infinite; animation-delay:-.22s}
@keyframes pinEyeLag{
  0%,100%{transform:translate(.9px,.5px)}
  50%{transform:translate(-.9px,-.5px)}
}

/* ---------- НАСТРОЕНИЯ ---------- */
.pin-acc{opacity:0; transition:opacity .3s ease; transform-box:fill-box; transform-origin:center}

/* лупа */
#pinMascot.mood-look .pin-acc-mag{opacity:1; animation:pinMag 2.8s ease-in-out infinite}
@keyframes pinMag{
  0%,100%{transform:translate(0,0) rotate(0)}
  30%{transform:translate(-8px,-7px) rotate(-13deg)}
  65%{transform:translate(-3px,-2px) rotate(-4deg)}
}
#pinMascot.mood-look .pin-body{animation:pinIdle 5.2s ease-in-out infinite, pinLean 3.6s ease-in-out infinite}
@keyframes pinLean{0%,100%{transform:skewX(0)} 50%{transform:skewX(-4.5deg)}}

/* показывает */
#pinMascot.mood-point .pin-acc-point{opacity:1; animation:pinTap 1.05s cubic-bezier(.4,0,.3,1) infinite}
@keyframes pinTap{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(6px,-8px) rotate(-7deg)}
}

/* думает */
#pinMascot.mood-think .pin-acc-think{opacity:1}
#pinMascot.mood-think .pin-dot{animation:pinDot 1.5s ease-in-out infinite}
#pinMascot.mood-think .pin-dot:nth-of-type(2){animation-delay:.2s}
#pinMascot.mood-think .pin-dot:nth-of-type(3){animation-delay:.4s}
@keyframes pinDot{
  0%,100%{transform:translateY(0) scale(.85); opacity:.45}
  45%{transform:translateY(-5px) scale(1.12); opacity:1}
}
#pinMascot.mood-think .pin-body{animation:pinIdle 5.2s ease-in-out infinite, pinThinkTilt 4s ease-in-out infinite}
@keyframes pinThinkTilt{0%,100%{transform:rotate(0)} 50%{transform:rotate(7deg)}}

/* радуется */
#pinMascot.mood-happy .pin-acc-spark{opacity:1; animation:pinSpark 1.4s ease-out infinite}
@keyframes pinSpark{
  0%{opacity:0; transform:scale(.35) translateY(8px) rotate(-20deg)}
  35%{opacity:1; transform:scale(1.2) translateY(-6px) rotate(0)}
  100%{opacity:0; transform:scale(.85) translateY(-24px) rotate(18deg)}
}
#pinMascot.mood-happy .pin-blush{opacity:1}
#pinMascot.mood-happy .pin-body{animation:pinHop .85s cubic-bezier(.28,1.5,.4,1) infinite}
@keyframes pinHop{
  0%,100%{transform:translateY(0) scale(1)}
  18%{transform:translateY(-3px) scale(1.06,.92)}
  40%{transform:translateY(-24px) scale(.94,1.1)}
  70%{transform:translateY(0) scale(1.08,.9)}
  85%{transform:translateY(0) scale(.98,1.02)}
}
#pinMascot.mood-happy .pin-shadow{animation:pinShadowHop .85s cubic-bezier(.28,1.5,.4,1) infinite}
@keyframes pinShadowHop{
  0%,100%{transform:scale(1); opacity:.9}
  40%{transform:scale(.6); opacity:.35}
}

/* спит */
#pinMascot.mood-sleep .pin-acc-zzz{opacity:1}
#pinMascot.mood-sleep .pin-acc-zzz text{animation:pinZzz 3.2s ease-out infinite}
#pinMascot.mood-sleep .pin-acc-zzz text:nth-child(2){animation-delay:1s}
#pinMascot.mood-sleep .pin-acc-zzz text:nth-child(3){animation-delay:2s}
@keyframes pinZzz{
  0%{opacity:0; transform:translate(0,0) scale(.55)}
  25%{opacity:.95}
  100%{opacity:0; transform:translate(18px,-38px) scale(1.3)}
}
#pinMascot.mood-sleep .pin-body{animation:pinBreathe 4.4s ease-in-out infinite}
@keyframes pinBreathe{
  0%,100%{transform:rotate(8deg) translateY(3px) scale(1)}
  50%{transform:rotate(8deg) translateY(6px) scale(1.025,.975)}
}
#pinMascot.mood-sleep .pin-tail-g{animation-duration:5.5s}

/* машет при появлении */
#pinMascot.pin-wave .pin-acc-point{opacity:1; animation:pinWave .5s ease-in-out 3}
@keyframes pinWave{
  0%,100%{transform:rotate(0) translate(0,0)}
  25%{transform:rotate(-20deg) translate(-3px,-6px)}
  75%{transform:rotate(14deg) translate(4px,-3px)}
}
#pinMascot.pin-wave .pin-body{animation:pinIdle 5.2s ease-in-out infinite, pinGreet 1.6s ease-out}
@keyframes pinGreet{
  0%{transform:scale(.8) rotate(-14deg)}
  40%{transform:scale(1.08) rotate(6deg)}
  70%{transform:scale(.97) rotate(-3deg)}
  100%{transform:scale(1) rotate(0)}
}

/* прыжок по клику */
#pinMascot.pin-jump .pin-body{animation:pinJump .7s cubic-bezier(.28,1.5,.4,1)}
@keyframes pinJump{
  0%{transform:translateY(0) scale(1)}
  15%{transform:translateY(0) scale(1.1,.88)}
  45%{transform:translateY(-34px) scale(.92,1.14) rotate(-8deg)}
  75%{transform:translateY(0) scale(1.1,.9) rotate(4deg)}
  100%{transform:translateY(0) scale(1)}
}

/* привлечение внимания */
#pinMascot.pin-alert .pin-body{animation:pinShake .9s ease}
@keyframes pinShake{
  0%,100%{transform:rotate(0)}
  12%{transform:rotate(-11deg)} 30%{transform:rotate(9deg)}
  50%{transform:rotate(-7deg)} 70%{transform:rotate(5deg)} 85%{transform:rotate(-2deg)}
}
#pinMascot.pin-alert .pin-brow{animation:pinBrow .9s ease}
@keyframes pinBrow{0%,100%{transform:translateY(0)} 35%{transform:translateY(-7px)}}

/* ---------- ВЕКИ: закрытый глаз — дуга, а не белое пятно ---------- */
#pinMascot .pin-eyelid{stroke:var(--pin-ink); fill:none; stroke-linecap:round}
#pinMascot .pin-lash{stroke:var(--pin-ink); fill:none; stroke-linecap:round; opacity:.7}
.pin-eyes-shut{opacity:0}
.pin-eyes-open{opacity:1}

/* моргание: одиночное и двойное, ровно в противофазе */
.pin-eyes-open{animation:pinEyesOpen 6.4s infinite}
.pin-eyes-shut{animation:pinEyesShut 6.4s infinite}
@keyframes pinEyesOpen{
  0%,88.4%,100%{opacity:1}
  88.5%,91%{opacity:0}
  91.1%,93.4%{opacity:1}
  93.5%,95.5%{opacity:0}
  95.6%{opacity:1}
}
@keyframes pinEyesShut{
  0%,88.4%,100%{opacity:0}
  88.5%,91%{opacity:1}
  91.1%,93.4%{opacity:0}
  93.5%,95.5%{opacity:1}
  95.6%{opacity:0}
}

/* спит — глаза закрыты насовсем, веки спокойные */
#pinMascot.mood-sleep .pin-eyes-open{opacity:0; animation:none}
#pinMascot.mood-sleep .pin-eyes-shut{opacity:1; animation:none}


/* ---------- НОГИ ---------- */
#pinMascot .pin-foot{fill:var(--pin-b)}
#pinMascot .pin-foot-rim{fill:var(--pin-rim)}
.pin-leg{transform-box:fill-box; transform-origin:50% 0%}
.pin-leg-l{animation:pinLegL 5.2s ease-in-out infinite; animation-delay:-.3s}
.pin-leg-r{animation:pinLegR 5.2s ease-in-out infinite; animation-delay:-.15s}
@keyframes pinLegL{0%,100%{transform:rotate(2.5deg)} 50%{transform:rotate(-2.5deg)}}
@keyframes pinLegR{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(3deg)}}

/* радуется — ноги подбираются в прыжке */
#pinMascot.mood-happy .pin-leg-l{animation:pinLegHopL .85s cubic-bezier(.28,1.5,.4,1) infinite}
#pinMascot.mood-happy .pin-leg-r{animation:pinLegHopR .85s cubic-bezier(.28,1.5,.4,1) infinite}
@keyframes pinLegHopL{
  0%,100%{transform:rotate(0) translateY(0)}
  40%{transform:rotate(-16deg) translateY(-7px)}
  70%{transform:rotate(5deg) translateY(1px)}
}
@keyframes pinLegHopR{
  0%,100%{transform:rotate(0) translateY(0)}
  40%{transform:rotate(15deg) translateY(-7px)}
  70%{transform:rotate(-4deg) translateY(1px)}
}

/* спит — ноги вытянуты и расслаблены */
#pinMascot.mood-sleep .pin-leg-l{animation:pinLegSleepL 4.4s ease-in-out infinite}
#pinMascot.mood-sleep .pin-leg-r{animation:pinLegSleepR 4.4s ease-in-out infinite}
@keyframes pinLegSleepL{0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(-9deg)}}
@keyframes pinLegSleepR{0%,100%{transform:rotate(7deg)} 50%{transform:rotate(9deg)}}

/* ---------- РОТ ---------- */
#pinMascot .pin-lip{stroke:var(--pin-ink); fill:none; stroke-linecap:round}
#pinMascot .pin-maw{fill:var(--pin-ink)}
#pinMascot .pin-tongue{fill:#F06A8A}
.pin-mouth{opacity:0; transition:opacity .22s ease; transform-box:fill-box; transform-origin:center top}
.pin-mouth-smile{opacity:1}
#pinMascot:is(.mood-look,.mood-point,.mood-think,.mood-happy,.mood-sleep) .pin-mouth-smile{opacity:0}

/* обычный: улыбка чуть дышит вместе с телом */
.pin-mouth-smile{animation:pinSmile 5.2s ease-in-out infinite}
@keyframes pinSmile{
  0%,100%{transform:scaleX(1) scaleY(1)}
  50%{transform:scaleX(1.05) scaleY(.9)}
}

/* лупа: сосредоточен, рот почти не двигается */
#pinMascot.mood-look .pin-mouth-focus{opacity:1; animation:pinFocusLip 2.8s ease-in-out infinite}
@keyframes pinFocusLip{
  0%,100%{transform:translateX(0) scaleX(1)}
  30%{transform:translateX(-2.5px) scaleX(.9)}
}

/* показывает: говорит — рот открывается и закрывается */
#pinMascot.mood-point .pin-mouth-talk{opacity:1}
#pinMascot.mood-point .pin-mouth-talk .pin-maw{animation:pinTalk .42s ease-in-out infinite}
#pinMascot.mood-point .pin-mouth-talk .pin-tongue{animation:pinTalkT .42s ease-in-out infinite}
@keyframes pinTalk{
  0%,100%{transform:scaleY(.35) translateY(3px)}
  50%{transform:scaleY(1.15) translateY(0)}
}
@keyframes pinTalkT{
  0%,100%{opacity:0; transform:scaleY(.2)}
  55%{opacity:1; transform:scaleY(1)}
}
.pin-mouth-talk .pin-maw,.pin-mouth-talk .pin-tongue{transform-box:fill-box; transform-origin:center top}

/* думает: губы ездят из стороны в сторону */
#pinMascot.mood-think .pin-mouth-think{opacity:1; animation:pinThinkLip 2.6s ease-in-out infinite}
@keyframes pinThinkLip{
  0%,100%{transform:translateX(0) rotate(0)}
  35%{transform:translateX(5px) rotate(4deg)}
  70%{transform:translateX(-2px) rotate(-2deg)}
}

/* радуется: улыбка пульсирует в такт прыжкам */
#pinMascot.mood-happy .pin-mouth-grin{opacity:1; animation:pinGrin .85s cubic-bezier(.28,1.5,.4,1) infinite}
@keyframes pinGrin{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.14,1.22)}
  70%{transform:scale(.94,.9)}
}

/* спит: рот дышит */
#pinMascot.mood-sleep .pin-mouth-o{opacity:1; animation:pinSnore 4.4s ease-in-out infinite}
@keyframes pinSnore{
  0%,100%{transform:scale(.8,.75)}
  50%{transform:scale(1.15,1.3)}
}

/* при наведении — улыбается шире */
.pin-body:hover .pin-mouth-smile{transform:scaleX(1.12) scaleY(1.1)}

/* при «внимании» рот дёргается вместе с бровями */
#pinMascot.pin-alert .pin-mouth{animation:pinMouthAlert .9s ease}
@keyframes pinMouthAlert{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(2px) scale(1.15,1.2)}
}

/* ---------- облако ---------- */
.pin-bubble{
  position:relative; max-width:252px;
  background:var(--pin-surface); color:var(--pin-text);
  border:1px solid var(--pin-edge);
  border-radius:20px 20px 5px 20px;
  padding:14px 34px 14px 16px;
  font-size:14px; line-height:1.5; font-weight:500;
  box-shadow:0 16px 38px var(--pin-shadow);
  opacity:0; transform:translateY(12px) scale(.9);
  transform-origin:100% 100%; pointer-events:none;
  transition:opacity .28s ease, transform .4s cubic-bezier(.2,1.4,.35,1);
}
.pin-bubble.on{opacity:1; transform:none; pointer-events:auto}
.pin-bubble::after{
  content:''; position:absolute; right:-7px; bottom:12px;
  width:14px; height:14px; background:var(--pin-surface);
  border-right:1px solid var(--pin-edge);
  border-bottom:1px solid var(--pin-edge);
  transform:rotate(-45deg);
}
.pin-close{
  position:absolute; top:6px; right:8px;
  border:none; background:none; cursor:pointer;
  font-size:19px; line-height:1; color:var(--pin-text); opacity:.4; padding:4px;
  transition:opacity .2s ease, transform .2s ease;
}
.pin-close:hover{opacity:1; transform:rotate(90deg)}

/* свёрнут */
#pinMascot.pin-off .pin-bubble{opacity:0; pointer-events:none}
#pinMascot.pin-off .pin-body{
  opacity:.45; animation:none; transform:scale(.58); transform-origin:100% 100%;
  transition:opacity .25s ease, transform .3s cubic-bezier(.2,1.4,.35,1);
}
#pinMascot.pin-off .pin-body:hover{opacity:.95; transform:scale(.66)}
#pinMascot.pin-off .pin-acc,
#pinMascot.pin-off .pin-shadow{opacity:0!important}

@media(max-width:700px){
  #pinMascot{right:12px; bottom:14px}
  .pin-body svg{width:84px; height:120px}
  .pin-bubble{max-width:190px; font-size:13px; padding:12px 30px 12px 13px}
}
@media(prefers-reduced-motion:reduce){
  .pin-body,.pin-tail-g,.pin-shadow,.pin-dot,.pin-eyeball,.pin-mouth,
  .pin-eyes-open,.pin-eyes-shut,.pin-leg,
  .pin-mouth .pin-maw,.pin-mouth .pin-tongue{animation:none!important}
  #pinMascot{transition:opacity .3s ease}
}