/* Модуль «Кнопка как вкладка в игре» (макет Figma 37:703, скрины владельца): светлая #E0E8F3 → при наведении тёмная #3D3D50,
   снизу лаймовое свечение и треугольник, слева выезжает голова анимо (#4D5180, контур иконки Frame 55) с покачиванием
   и один раз моргает, подпись отходит вправо. Разметка: <a> … <span class="peek">[svg.head]<b>текст</b></span> … </a>
   (голова — из modules/kb.js: window.PEEK_HEAD). Форму (маски, скругления) задаёт блок, где кнопка стоит. */
.peek { display: grid; place-items: center; overflow: hidden; background: #e0e8f3; color: #3d3d50; transition: background-color .2s ease, color .2s ease; }
.peek b { position: relative; z-index: 1; font: 600 clamp(15px, 1.05vw, 20px)/1 var(--font); white-space: nowrap; transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.peek::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; opacity: 0;
  background: radial-gradient(45% 100% at 50% 100%, rgba(201, 255, 61, .46), transparent 100%); transition: opacity .2s ease; }
.peek::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 20px; height: 7px; margin-left: -10px; opacity: 0;
  background: var(--lime); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 2px; transition: opacity .2s ease; }
.peek .head { position: absolute; left: -10px; top: -4px; height: calc(100% + 8px); fill: #4d5180; opacity: 0;   /* как в Figma: голова у левого края, частью за краем */
  transform: translateX(-80%) rotate(28deg); transform-origin: 50% 80%; }
.peek .head .eye { fill: #3d3d50; transform-box: fill-box; transform-origin: center; }
:is(a, button):is(:hover, :focus-visible) .peek { background: #3d3d50; color: #fff; }
:is(a, button):is(:hover, :focus-visible) .peek b { transform: translateX(14px); }
:is(a, button):is(:hover, :focus-visible) .peek::before, :is(a, button):is(:hover, :focus-visible) .peek::after { opacity: 1; }
:is(a, button):is(:hover, :focus-visible) .peek .head { opacity: 1; animation: peek-in .75s cubic-bezier(.3, 1.2, .5, 1) both; }
:is(a, button):is(:hover, :focus-visible) .peek .head .eye { animation: peek-blink .22s ease-in-out .7s 1; }
@keyframes peek-in {   /* выезжает вправо, перелетает чуть дальше и покачивается, пока не встанет */
  0% { transform: translateX(-80%) rotate(28deg); }
  55% { transform: translateX(4%) rotate(6deg); }
  72% { transform: translateX(-3%) rotate(19deg); }
  86% { transform: translateX(1%) rotate(12deg); }
  100% { transform: translateX(0) rotate(15deg); }
}
@keyframes peek-blink { 50% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) {
  :is(a, button):is(:hover, :focus-visible) .peek .head { animation: none; transform: rotate(15deg); }
  .peek .head .eye { animation: none !important; }
}