/* ============================================================
   Живой логотип ПУСК: зайчик шевелит ушами при наведении и изредка
   сам по себе (класс is-twitch ставит pusk-logo.js), а пока программа
   думает (html.pusk-busy) — у него прорисовываются усики.
   ============================================================ */

.pusk-logo {
  --logo-ink: color-mix(in srgb, var(--text-primary, #191a1c) 76%, var(--bg-surface, #fff));
  --logo-soft: color-mix(in srgb, var(--text-primary, #191a1c) 48%, var(--bg-surface, #fff));
  overflow: visible;
  cursor: default;
}
.pusk-logo .pusk-ear ellipse,
.pusk-logo .pusk-logo-nose { fill: var(--logo-ink); }
.pusk-logo .pusk-logo-word { stroke: var(--logo-ink); }
.pusk-logo .pusk-logo-head {
  fill: color-mix(in srgb, var(--bg-warm, #f3f1ed) 70%, var(--text-primary, #191a1c) 5%);
  stroke: color-mix(in srgb, var(--text-primary, #191a1c) 16%, var(--bg-surface, #fff));
}
.pusk-logo .pusk-logo-line { stroke: var(--logo-soft); }
.pusk-logo .pusk-logo-dot { fill: var(--logo-soft); }
.pusk-logo .pusk-whiskers { stroke: var(--logo-soft); }

/* Уши поворачиваются от основания, а не от центра */
.pusk-logo .pusk-ear { transform-box: view-box; }
.pusk-logo .pusk-ear--l { transform-origin: 588px 404px; }
.pusk-logo .pusk-ear--r { transform-origin: 635px 404px; }

@keyframes pusk-ear-l {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-16deg); }
  38% { transform: rotate(5deg); }
  58% { transform: rotate(-9deg); }
  78% { transform: rotate(2deg); }
}
@keyframes pusk-ear-r {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(16deg); }
  38% { transform: rotate(-5deg); }
  58% { transform: rotate(9deg); }
  78% { transform: rotate(-2deg); }
}
/* Одно ухо дёргается — «прислушивается» */
@keyframes pusk-ear-flick {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(22deg); }
  50% { transform: rotate(-4deg); }
  70% { transform: rotate(8deg); }
}

.pusk-logo:hover .pusk-ear--l,
.pusk-side-brand:hover .pusk-ear--l { animation: pusk-ear-l 900ms var(--e-out, ease-out); }
.pusk-logo:hover .pusk-ear--r,
.pusk-side-brand:hover .pusk-ear--r { animation: pusk-ear-r 900ms var(--e-out, ease-out) 60ms; }
.pusk-logo.is-twitch .pusk-ear--r { animation: pusk-ear-flick 700ms ease-out; }

/* --- Думает: усики прорисовываются от щёк, подрагивают, потом гаснут --- */
.pusk-logo .pusk-whiskers path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 380ms var(--e-out, ease-out), opacity 300ms ease;
  opacity: 0;
}
.pusk-logo .pusk-whiskers path:nth-child(2),
.pusk-logo .pusk-whiskers path:nth-child(5) { transition-delay: 70ms; }
.pusk-logo .pusk-whiskers path:nth-child(3),
.pusk-logo .pusk-whiskers path:nth-child(6) { transition-delay: 140ms; }
.pusk-logo .pusk-logo-nose {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 260ms var(--e-out, ease-out);
}

@keyframes pusk-whisker-l {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-5deg); }
}
@keyframes pusk-whisker-r {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(5deg); }
}
@keyframes pusk-sniff {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25, .85); }
}
@keyframes pusk-ear-listen-l {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-6deg); }
}
@keyframes pusk-ear-listen-r {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(6deg); }
}

html.pusk-busy .pusk-logo .pusk-whiskers path {
  stroke-dashoffset: 0;
  opacity: 1;
  transform-box: view-box;
}
html.pusk-busy .pusk-logo .pusk-whiskers path:nth-child(-n+3) {
  transform-origin: 590px 512px;
  animation: pusk-whisker-l 520ms ease-in-out 400ms infinite;
}
html.pusk-busy .pusk-logo .pusk-whiskers path:nth-child(n+4):nth-child(-n+6) {
  transform-origin: 634px 512px;
  animation: pusk-whisker-r 520ms ease-in-out 400ms infinite;
}
html.pusk-busy .pusk-logo .pusk-logo-nose {
  transform: scale(1);
  animation: pusk-sniff 520ms ease-in-out 300ms infinite;
}
html.pusk-busy .pusk-logo .pusk-ear--l { animation: pusk-ear-listen-l 1040ms ease-in-out infinite; }
html.pusk-busy .pusk-logo .pusk-ear--r { animation: pusk-ear-listen-r 1040ms ease-in-out 120ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .pusk-logo *,
  html.pusk-busy .pusk-logo * { animation: none !important; transition: none !important; }
}