/* Neko: a tap-anywhere cat that turns to face wherever you press, sprints
   over, settles facing east, dozes off after 5s of quiet, and fades away
   after 10 more seconds asleep. Lives above the whole page. */

.neko {
  --cat-fur: #e8935a;
  --cat-fur-deep: #c97347;
  --cat-fur-rim: #d9803f;
  --cat-pink: #f2a6b8;
  --cat-eye: #21242b;
  position: fixed;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  z-index: 60;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.1s ease;
}

/* asleep 10s straight with no wake: fades out completely */
.neko.is-vanished { opacity: 0; }

.neko-shadow {
  position: absolute; left: 10px; top: 40px; width: 36px; height: 12px;
  border-radius: 50%; background: rgba(0,0,0,.25); filter: blur(1.5px);
}
.neko-facing { position: absolute; inset: 0; }

.n-tail {
  position: absolute; left: 4px; top: 24px; width: 30px; height: 9px;
  border-radius: 8px; background: linear-gradient(90deg, var(--cat-fur-deep), var(--cat-fur));
  transform-origin: right center;
}
.n-tail-wag { position: absolute; inset: 0; transform-origin: right center; }
.is-running .n-tail-wag { animation: n-wag .32s ease-in-out infinite; }

.n-body {
  position: absolute; left: 14px; top: 12px; width: 32px; height: 30px;
  border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--cat-fur-rim), var(--cat-fur-deep) 130%);
  box-shadow: inset -4px -4px 7px rgba(0,0,0,.15);
}
.is-running .n-body { animation: n-bob .32s ease-in-out infinite; }

.n-ear { position: absolute; width: 0; height: 0; border-style: solid; }
.n-ear.a { top: 6px; left: 30px; border-width: 0 6px 12px 6px; border-color: transparent transparent var(--cat-fur-rim) transparent; transform: rotate(18deg); }
.n-ear.b { top: 6px; left: 18px; border-width: 0 6px 12px 6px; border-color: transparent transparent var(--cat-fur-rim) transparent; transform: rotate(-18deg); }
.n-ear-inner { position: absolute; width: 0; height: 0; border-style: solid; top: 4px; left: -3.5px; border-width: 0 3.5px 7px 3.5px; border-color: transparent transparent var(--cat-pink) transparent; }

.n-eye { position: absolute; top: 22px; width: 5px; height: 5px; border-radius: 50%; background: var(--cat-eye); }
.n-eye.a { left: 32px; }
.n-eye.b { left: 24px; }

/* nose centered between the two eyes (their true midpoint is 30.5px) */
.n-nose { position: absolute; top: 27px; left: 28.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--cat-pink); }
.n-whisker { position: absolute; height: 1px; width: 10px; background: rgba(0,0,0,.35); }
/* each side starts 1px from the nose dot and mirrors the other exactly */
.n-whisker.w1 { top: 28px; left: 33.5px; }
.n-whisker.w2 { top: 30px; left: 33.5px; transform: rotate(6deg); }
.n-whisker.w3 { top: 28px; left: 17.5px; }
.n-whisker.w4 { top: 30px; left: 17.5px; transform: rotate(-6deg); }

/* rear feet only (the pair next to the ears was removed) */
.n-paw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cat-fur-deep); }
.n-paw.p2 { left: 12px; top: 32px; }
.n-paw.p4 { left: 38px; top: 30px; }
/* trot: the two feet alternate (1010 -> 0101 -> 1010) */
.is-running .n-paw.p4 { animation: n-gait-a .32s ease-in-out infinite; }
.is-running .n-paw.p2 { animation: n-gait-b .32s ease-in-out infinite; }

@keyframes n-bob { 0%, 100% { transform: translateY(0) scale(1,1); } 50% { transform: translateY(-2px) scale(1.04,.94); } }
@keyframes n-wag { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes n-gait-a { 0%, 100% { transform: translate(2px,-1px) scale(1); opacity: 1; } 50% { transform: translate(-2px,1px) scale(.7); opacity: .5; } }
@keyframes n-gait-b { 0%, 100% { transform: translate(-2px,1px) scale(.7); opacity: .5; } 50% { transform: translate(2px,-1px) scale(1); opacity: 1; } }

.neko.is-idle .n-body,
.neko.is-sleeping .n-body { animation: n-breathe 2.6s ease-in-out infinite; }
@keyframes n-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03,.97); } }

/* sitting: tail settles into a curl instead of mid-wag */
.neko.is-idle .n-tail-wag,
.neko.is-sleeping .n-tail-wag { transform: rotate(-10deg); }

/* asleep: eyes shut, ears droop, Zzz bubbles drift up */
.neko.is-sleeping .n-eye { height: 1px; top: 24px; border-radius: 1px; background: var(--cat-eye); }
.neko.is-sleeping .n-ear.a { transform: rotate(8deg); }
.neko.is-sleeping .n-ear.b { transform: rotate(-8deg); }

/* startled: a quick sit-up-and-look beat before the sprint starts */
.neko.is-startled .n-body { animation: n-startle-hop .26s ease-out; }
.neko.is-startled .n-eye { transform: scale(1.2); }
.neko.is-startled .n-ear.a { transform: rotate(4deg) scale(1.15); }
.neko.is-startled .n-ear.b { transform: rotate(-4deg) scale(1.15); }
@keyframes n-startle-hop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18, .82) translateY(-3px); }
  60%  { transform: scale(.92, 1.08) translateY(1px); }
  100% { transform: scale(1); }
}

.neko-zzz {
  position: fixed;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #3c424f;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  animation: neko-zzz-rise 1.7s ease-out forwards;
}
@keyframes neko-zzz-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  18%  { opacity: .85; }
  78%  { opacity: .55; }
  100% { opacity: 0; transform: translate(12px, -38px) scale(1.08); }
}

.neko-ping {
  position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid #03a9f4; border-radius: 50%; opacity: 0; pointer-events: none;
  z-index: 59; animation: neko-ping .5s ease-out forwards;
}
@keyframes neko-ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }

@media (prefers-reduced-motion: reduce) {
  .neko, .neko-zzz, .neko-ping { display: none !important; }
}