/* The clinic cat napping on the hero laptop (partials/cat.php). The lid's top edge is y=80 of the 130 high viewBox,
   so translateY(-61.5%) seats her on it whatever the size. */
.va-cat {
  position: absolute; left: 54%; top: 0; z-index: 2; width: 22%; max-width: 9.5rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(-61.5%); -webkit-tap-highlight-color: transparent;
}
.va-cat:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: 1rem; }
.va-cat svg { display: block; width: 100%; height: auto; overflow: visible; }

.va-cat-fur { fill: oklch(76% .13 68); }
.va-cat-tail { fill: none; stroke: oklch(76% .13 68); stroke-width: 7; stroke-linecap: round; }
.va-cat-stripe { fill: none; stroke: oklch(62% .13 58); stroke-width: 3; stroke-linecap: round; }
.va-cat-inner, .va-cat-nose { fill: oklch(82% .07 20); }
.va-cat-shut, .va-cat-line { fill: none; stroke: oklch(30% .04 60); stroke-width: 1.6; stroke-linecap: round; }
.va-cat-line { stroke-width: 1; opacity: .7; }
.va-cat-eyes { fill: oklch(30% .04 60); opacity: 0; }
.va-cat-glint { fill: #fff; }
.va-cat-zzz { fill: var(--muted-foreground); font: 700 11px var(--font-display); }

/* Asleep: breathing, a lazy tail, an ear that twitches now and then, rising z's */
.va-cat-body { transform-box: view-box; transform-origin: 90px 80px; animation: va-cat-breathe 3.6s ease-in-out infinite; }
.va-cat-tail { transform-box: view-box; transform-origin: 138px 76px; animation: va-cat-tail 4.2s ease-in-out infinite; }
.va-cat-ear-r { transform-box: view-box; transform-origin: 48px 45px; animation: va-cat-ear 7s ease-in-out infinite; }
.va-cat-zzz text { animation: va-cat-z 3.6s ease-out infinite; opacity: 0; }
.va-cat-zzz text:nth-child(2) { animation-delay: 1.2s; }
.va-cat-zzz text:nth-child(3) { animation-delay: 2.4s; }
.va-cat.is-twitch .va-cat-ear-r { animation: va-cat-ear-now .5s ease-in-out; }

@keyframes va-cat-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.05); } }
@keyframes va-cat-tail { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
@keyframes va-cat-ear { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-16deg); } 96% { transform: rotate(4deg); } }
@keyframes va-cat-ear-now { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-18deg); } 70% { transform: rotate(5deg); } }
@keyframes va-cat-z { 0% { opacity: 0; transform: translate(0, 4px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -10px); } }

/* Awake (hover or tap): eyes open and follow the pointer, the tail goes fast, a word bubble */
.va-cat.is-awake .va-cat-shut, .va-cat.is-awake .va-cat-zzz { opacity: 0; }
.va-cat.is-awake .va-cat-eyes { opacity: 1; }
.va-cat-eyes { transition: opacity .15s; }
.va-cat.is-awake .va-cat-tail { animation-duration: .9s; }
.va-cat.is-awake .va-cat-head { transform-box: view-box; transform-origin: 40px 78px; animation: va-cat-perk .4s ease-out; }
@keyframes va-cat-perk { 0% { transform: translateY(2px); } 60% { transform: translateY(-3px); } 100% { transform: none; } }

.va-cat-bubble {
  position: absolute; bottom: 92%; right: 0; width: max-content; max-width: 12rem;
  padding: .45rem .7rem; border-radius: .8rem .8rem .2rem .8rem;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-elegant);
  font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--foreground); text-align: left;
  opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 85% 100%; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.va-cat.is-awake .va-cat-bubble { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .va-cat *, .va-cat-zzz text { animation: none !important; }
  .va-cat-zzz text { opacity: .7; }
}