/* catsns — pixel cat (js/cat.js).
 *
 * The shell positions [data-cat-mount] (absolute, bottom-right of the hero, with a width) and must not
 * transform it. cat.js builds:
 *
 *   [data-cat-mount].cat-mount   role=button, focusable; its bottom edge is the clip line
 *     .cat__body                 the moving layer (inline transform: peek / rise / spring / hide / shake)
 *       canvas.cat__canvas       gridSize² cells, scaled up crisp
 *       .cat__ring               keyboard focus ring around the cat
 *       .cat__hit × n            pointer hit bands that follow the silhouette (the rest is click-through)
 *     canvas.cat__bubble         "hsss!" speech bubble (stays put while the cat ducks)
 *
 * Tuning hook: --cat-peek (fraction of the cat square hidden below the clip line at rest, default .35).
 */

[data-cat-mount] {
  aspect-ratio: 1 / 1; /* height follows the width the shell sets: no layout shift before JS */
}

.cat-mount {
  /* Clip ONLY at the bottom edge (the hero/ticker line). Everything may overflow up and sideways:
     the "!" glyph, particles and the speech bubble live there. */
  clip-path: inset(-100vmax -100vmax 0 -100vmax);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* The square is mostly empty sky: only the .cat__hit bands take the pointer, so nothing underneath
     (e.g. hero CTAs on small screens) is blocked. Keyboard focus is unaffected. */
  pointer-events: none;
}

.cat-mount:focus {
  outline: none; /* replaced by .cat__ring, which hugs the cat instead of the whole square */
}

/* Hot cursor only over the cat's ink (cat.js toggles .is-hover with a pixel hit test).
   Uses the shell's pixel cursors when defined (--cursor / --cursor-hot in main.css). */
.cat-mount .cat__hit {
  position: absolute;
  pointer-events: auto;
  cursor: var(--cursor, default);
}

.cat-mount.is-hover .cat__hit {
  cursor: var(--cursor-hot, pointer);
}

.cat__body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
}

.cat__canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Focus ring: 2px dashed ink, offset from the cat; a paper outline keeps it legible over the glitch bands. */
.cat__ring {
  position: absolute;
  display: none;
  box-sizing: border-box;
  border: 2px dashed var(--ink, #000);
  outline: 2px solid var(--paper, #fff);
  pointer-events: none;
}

.cat-mount:focus-visible .cat__ring {
  display: block;
}

.cat__bubble {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.cat__bubble[hidden] {
  display: none;
}

/* Two-frame "pop" — stepped, no easing blur, like a sprite. */
.cat__bubble.is-pop {
  animation: cat-bubble-pop 180ms steps(1, end) both;
  transform-origin: 30% 100%;
}

@keyframes cat-bubble-pop {
  0% {
    transform: translateY(12%) scale(0.75);
  }
  33% {
    transform: translateY(-6%) scale(1.08);
  }
  66%,
  100% {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat__bubble.is-pop {
    animation: none;
  }
}