/* ==========================================================================
   Kitten mascot (paired with assets/js/kitten.js)
   The container is positioned every frame by JS; everything inside is drawn
   in SVG units, so the kitten scales with --kw.
   ========================================================================== */
.kitten {
  --kw: clamp(96px, 8.5vw, 136px);
  --iris-a: #e6d479;
  --iris-b: #8f8a2c;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: var(--kw);
  height: calc(var(--kw) * 0.75);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.5s;
}
.kitten.is-ready { opacity: 1; }
.kitten.is-away { visibility: hidden; opacity: 0; }
.kitten.is-dev { --iris-a: #9ff5e6; --iris-b: #2f8f9a; }
.kitten-shadow { --kw: clamp(96px, 8.5vw, 136px); }
@media (max-width: 700px) { .kitten, .kitten-shadow { --kw: 84px; } }

.kitten__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  -webkit-tap-highlight-color: transparent;
}
/* only these invisible shapes catch the pointer: hover = hand cursor, click = pet */
.k-hit { fill: transparent; pointer-events: all; }
.kitten.is-loved .k-hit { cursor: none; }
/* hide the site's custom cursor while the hand is over the kitten */
.kitten-pet .cursor__dot,
.kitten-pet .cursor__ring { opacity: 0; }

.k-iris-a { stop-color: var(--iris-a); transition: stop-color 0.8s; }
.k-iris-b { stop-color: var(--iris-b); transition: stop-color 0.8s; }
/* limbs: thick upper segment, slimmer lower one; far side darker for depth */
.k-leg__up, .k-leg__lo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-leg__up { stroke: #e3c999; stroke-width: 12.5; }
.k-leg__lo { stroke: #eedbb6; stroke-width: 9; }
.k-leg.is-hind .k-leg__up { stroke-width: 14; }
.k-paw { fill: #f6e8cd; }
.k-leg.is-far .k-leg__up { stroke: #b8945e; }
.k-leg.is-far .k-leg__lo { stroke: #c3a06a; }
.k-leg.is-far .k-paw { fill: #cdae7b; }

.k-tail { fill: #dcc08f; stroke: #cfae78; stroke-width: 0.8; }
.k-tail__tip { fill: #b98f57; }
.k-neck { fill: url(#k-body); }
.k-rim { fill: none; stroke: rgba(255, 250, 236, 0.6); stroke-width: 2.2; stroke-linecap: round; }
.k-ao { fill: rgba(92, 58, 24, 0.38); filter: url(#k-soft); }

/* soft contact shadow that stays on the surface while the kitten jumps */
.kitten-shadow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 89;
  height: calc(var(--kw, 120px) * 0.14);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 55%, transparent);
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.kitten-shadow.is-away { visibility: hidden; }

.k-stripe { fill: none; stroke: #c9a26a; stroke-width: 3.2; stroke-linecap: round; opacity: 0.75; }
.k-stripe--head { stroke-width: 3.6; }
.k-blush { fill: #f19a9a; opacity: calc(0.35 + var(--happy, 0) * 0.4); }
.k-pupil { fill: #140e09; }
.k-mouth { fill: none; stroke: #6b4a36; stroke-width: 1.8; stroke-linecap: round; }
.k-open { fill: #7a3440; opacity: var(--mouth, 0); }
.k-tongue { fill: #f08c8c; opacity: var(--tongue, 0); }
.k-whisker { stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.1; stroke-linecap: round; }
.k-lids { fill: none; stroke: #3a2c1e; stroke-width: 2.6; stroke-linecap: round; }
.k-lids--sleep { opacity: var(--sleepy, 0); }
.k-lids--happy { opacity: var(--happy, 0); }

.k-zzz text { font-family: var(--font-serif, serif); font-size: 13px; font-weight: 600; fill: #c9a96e; opacity: 0; }
.kitten.is-sleeping .k-zzz text { animation: k-zzz 2.8s ease-in-out infinite; }
.kitten.is-sleeping .k-zzz text:nth-child(2) { animation-delay: 0.5s; }
.kitten.is-sleeping .k-zzz text:nth-child(3) { animation-delay: 1s; }
@keyframes k-zzz {
  0% { opacity: 0; transform: translate(0, 6px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(6px, -8px); }
}

/* speech bubble + hearts follow the head (left/top set by JS) */
.kitten__bubble {
  position: absolute;
  padding: 0.4rem 0.75rem;
  border-radius: 0.9rem 0.9rem 0.9rem 0.2rem;
  background: #f3eee6;
  color: #1a140e;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-10%, -100%) scale(0.9);
  transform-origin: left bottom;
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.kitten.is-talking .kitten__bubble { opacity: 1; transform: translate(-10%, -100%); }
.kitten.is-dev .kitten__bubble { font-family: var(--font-mono, monospace); background: #7fe3d3; }

.kitten__heart {
  position: absolute;
  color: #e8738a;
  font-size: 1.1rem;
  pointer-events: none;
  animation: k-heart 1.5s ease-out forwards;
}
@keyframes k-heart {
  from { opacity: 1; transform: translate(-50%, 0) scale(0.6); }
  to { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -70px) scale(1.2); }
}

/* petting hand: strokes from the forehead back over the head, twice */
.kitten__hand {
  position: absolute;
  width: calc(var(--kw) * 0.36);
  height: auto;
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -80%) scaleX(var(--hand-flip, 1)) rotate(100deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.kitten.is-loved .kitten__hand { animation: k-pet 1.5s ease-in-out forwards; }
@keyframes k-pet {
  0% { opacity: 0; transform: translate(-20%, -130%) scaleX(var(--hand-flip, 1)) rotate(100deg); }
  12% { opacity: 1; transform: translate(-20%, -85%) scaleX(var(--hand-flip, 1)) rotate(100deg); }
  38% { transform: translate(-80%, -78%) scaleX(var(--hand-flip, 1)) rotate(108deg); }
  52% { transform: translate(-20%, -86%) scaleX(var(--hand-flip, 1)) rotate(98deg); }
  78% { transform: translate(-80%, -78%) scaleX(var(--hand-flip, 1)) rotate(108deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(-60%, -130%) scaleX(var(--hand-flip, 1)) rotate(104deg); }
}

/* small paw button (bottom-left) to hide / bring back the kitten */
.kitten-toggle {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  z-index: 91;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #c9a96e;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s, transform 0.3s;
}
.kitten-toggle:hover, .kitten-toggle:focus-visible { opacity: 1; transform: scale(1.08); }
.kitten-toggle[aria-pressed="false"] { opacity: 0.9; box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2); }
.kitten-toggle svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }