/* ============================================================
   Akdeniz — кот, который следит за крючком.
   Голова поворачивается в перспективе, зрачки ходят за курсором.
   ============================================================ */

.cat{
  /* сидит снаружи сцены, у её правого нижнего угла */
  position:absolute; right:calc(var(--rail-x, 44px) + clamp(56px,6vw,96px));
  bottom:clamp(30px,4.5vh,58px);
  z-index:12;
  width:clamp(112px,11vw,164px);
  perspective:700px;
  pointer-events:none;
  /* --ry / --rx — поворот головы, --px / --py — сдвиг зрачков (ставит cat.js) */
  --ry:0deg; --rx:0deg; --px:0px; --py:0px;
}
.cat svg{
  display:block; width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.cat__head{ position:relative; z-index:2; }
.cat__body{ position:relative; z-index:1; margin-top:-31%; }

/* корпус чуть отстаёт от головы — от этого и берётся ощущение объёма */
.cat__body{
  transform:rotateY(calc(var(--ry) * .35)) rotateX(calc(var(--rx) * .3));
  transform-origin:50% 90%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  transform-style:preserve-3d;
}
.cat__head{
  transform:rotateY(var(--ry)) rotateX(var(--rx)) translateZ(12px);
  transform-origin:50% 78%;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  transform-style:preserve-3d;
}

/* линии кота — той же бирюзой, что крючок и трос */
.cat .ln{
  fill:none; stroke:var(--accent); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
}
.cat .fill{ fill:#0b2c45; }
.cat .fill-dark{ fill:#051625; }

/* глаза */
.cat__eye{ fill:#eaf6fb; }
.cat__pupil{
  fill:#04121e;
  transform:translate(var(--px), var(--py));
  transition:transform .12s linear;
}
.cat__shine{ fill:#eaf6fb; opacity:.9; }

/* моргание: веки падают сверху */
.cat__lid{
  fill:#08243a; stroke:var(--accent); stroke-width:3; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:50% 0;
  transform:scaleY(0);
  animation:cat-blink 6.5s ease-in-out infinite;
}
.cat__lid--r{ animation-delay:.06s; }
@keyframes cat-blink{
  0%, 92%, 100% { transform:scaleY(0); }
  95%, 96.5%    { transform:scaleY(1); }
}

/* хвост живёт своей жизнью */
.cat__tail{
  transform-box:fill-box; transform-origin:12% 88%;
  animation:cat-tail 4.5s ease-in-out infinite;
}
@keyframes cat-tail{
  0%,100%{ transform:rotate(0deg); }
  35%    { transform:rotate(8deg); }
  70%    { transform:rotate(-6deg); }
}

/* ухо дёргается изредка */
.cat__ear{ transform-box:fill-box; transform-origin:50% 100%; animation:cat-ear 9s ease-in-out infinite; }
.cat__ear--r{ animation-delay:4.5s; }
@keyframes cat-ear{
  0%,88%,100%{ transform:rotate(0); }
  91%        { transform:rotate(-7deg); }
  94%        { transform:rotate(4deg); }
}

/* маленькая подпись под котом – чтобы было понятно, что он не декорация */
.cat__note{
  position:absolute; top:100%; left:50%; width:190px; margin-top:8px;
  transform:translateX(-50%);
  text-align:center; font-size:11px; line-height:1.35; white-space:nowrap;
  color:var(--foam-dim); opacity:.65; letter-spacing:.01em;
}

/* подпись — появляется, когда кот «поймал» курсор рядом */
.cat__say{
  position:absolute; right:calc(100% + 12px); bottom:38%;
  padding:7px 12px; border-radius:100px;
  background:rgba(4,18,30,.9); border:1px solid rgba(53,224,200,.35);
  color:var(--accent); font-size:12.5px; white-space:nowrap;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cat.is-close .cat__say{ opacity:1; transform:translateY(0); }

/* сцене нужен запас снизу, чтобы кот никого не перекрывал */
/* место под кота — уже не внутри сцены, а под ней */
#hooked{ padding-bottom:clamp(248px,23vh,325px) !important; }

@media (max-width:900px){
  .cat{ width:92px; right:calc(var(--rail-x, 22px) + 16px); bottom:18px; }
  .cat__note{ display:none; }
  .cat__say{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cat__lid,.cat__tail,.cat__ear{ animation:none; }
  .cat__head,.cat__body,.cat__pupil{ transition:none; }
}