/* ============================================================
   Hacker Cat — CSS Pixel Art (16x16 Grid)
   States: working, thinking, error, complete, sleeping
   ============================================================ */

/* ── Color Palette ──────────────────────────────────────────── */
:root {
  /* Cat palette */
  --cat-coral:        #FF6F61;   /* main body */
  --cat-coral-dark:   #CC5850;   /* shadow / detail */
  --cat-coral-light:  #FF9088;   /* highlight */
  --cat-black:        #111111;   /* outline */
  --cat-white:        #E8E8E8;   /* markings */
  --cat-belly:        #FFB8B0;   /* belly / inner ear */
  --cat-nose:         #FF3366;   /* nose */

  /* State eye colors */
  --cat-eye-working:  #00FF41;   /* green — hacking */
  --cat-eye-thinking: #00D4FF;   /* cyan — pondering */
  --cat-eye-error:    #FF3333;   /* red — error */
  --cat-eye-complete: #00FF41;   /* green — done */
  --cat-eye-sleeping: #666666;   /* dim — zzz */

  /* State glow colors */
  --cat-glow-working:  rgba(255, 111, 97, 0.50);
  --cat-glow-thinking: rgba(0, 212, 255, 0.40);
  --cat-glow-error:    rgba(255, 51, 51, 0.50);
  --cat-glow-complete: rgba(0, 255, 65, 0.45);
  --cat-glow-sleeping: rgba(255, 111, 97, 0.15);
}

/* ── Container ──────────────────────────────────────────────── */
.hacker-cat {
  position: relative;
  width: 160px;
  height: 160px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  border-radius: 4px;
  transition: filter 0.4s ease, box-shadow 0.4s ease;
  margin: 4px auto;
  image-rendering: pixelated;
}

/* CRT Scanlines on cat — disabled, conflicts with transparent bg */

/* ── Pixel Cells ────────────────────────────────────────────── */
.px {
  width: 100%;
  height: 100%;
}

/* Color classes */
.px-0  { background: transparent; }
.px-1  { background: var(--cat-black); }
.px-2  { background: var(--cat-coral); }
.px-3  { background: var(--cat-coral-dark); }
.px-4  { background: var(--cat-coral-light); }
.px-5  { background: var(--cat-white); }
.px-6  { background: var(--cat-belly); }
.px-7  { background: var(--cat-nose); }

/* Eye classes — color controlled by state */
.px-eye {
  background: var(--cat-eye-working);
  transition: background 0.3s ease;
}

/* Pupil (smaller inner dot) */
.px-pupil {
  background: #000;
}

/* ── State: working ─────────────────────────────────────────── */
.cat-working {
  filter: drop-shadow(0 0 8px var(--cat-glow-working)) drop-shadow(0 0 20px var(--cat-glow-working));
}

.cat-working .px-eye {
  background: var(--cat-eye-working);
  box-shadow: 0 0 4px var(--cat-eye-working), 0 0 8px var(--cat-eye-working);
}

/* Tail wag — rows 13-16, cols 1-3 (tail cells get class .px-tail) */
.cat-working .px-tail {
  animation: tail-wag 0.4s ease-in-out infinite alternate;
  transform-origin: right center;
}

@keyframes tail-wag {
  from { transform: translateY(-1px) rotate(-6deg); }
  to   { transform: translateY(1px)  rotate(6deg); }
}

/* Typing paws animation */
.cat-working .px-paw {
  animation: paw-type 0.35s ease-in-out infinite alternate;
}

.cat-working .px-paw:nth-child(odd) {
  animation-delay: 0.175s;
}

@keyframes paw-type {
  from { transform: translateY(0); }
  to   { transform: translateY(2px); }
}

/* ── State: thinking ────────────────────────────────────────── */
.cat-thinking {
  filter: drop-shadow(0 0 8px var(--cat-glow-thinking)) drop-shadow(0 0 20px var(--cat-glow-thinking));
}

.cat-thinking .px-eye {
  background: var(--cat-eye-thinking);
  box-shadow: 0 0 4px var(--cat-eye-thinking);
  animation: thinking-blink 2.5s ease-in-out infinite;
}

@keyframes thinking-blink {
  0%, 80%, 100% { transform: scaleY(1); }
  85%            { transform: scaleY(0.1); }
}

/* Thought bubble (pseudo-element above cat) */
.cat-thinking::after {
  content: '?';
  position: absolute;
  top: -20px;
  right: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #00D4FF;
  text-shadow: 0 0 8px #00D4FF;
  animation: thought-pulse 1.5s ease-in-out infinite;
}

@keyframes thought-pulse {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(-4px); }
}

/* ── State: error ───────────────────────────────────────────── */
.cat-error {
  animation: cat-shake 0.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px var(--cat-glow-error)) drop-shadow(0 0 25px var(--cat-glow-error)) hue-rotate(20deg) saturate(1.4);
}

@keyframes cat-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-3px); }
  40%       { transform: translateX(3px); }
  60%       { transform: translateX(-2px); }
  80%       { transform: translateX(2px); }
}

.cat-error .px-eye {
  background: var(--cat-eye-error);
  box-shadow: 0 0 6px var(--cat-eye-error), 0 0 12px var(--cat-eye-error);
  animation: error-flicker 0.3s ease-in-out infinite;
}

@keyframes error-flicker {
  0%, 100% { opacity: 1; }
  30%       { opacity: 0.4; }
  70%       { opacity: 0.8; }
}

.cat-error::after {
  content: '!';
  position: absolute;
  top: -20px;
  right: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #FF3333;
  text-shadow: 0 0 8px #FF3333;
  animation: error-bang 0.4s ease-in-out infinite alternate;
}

@keyframes error-bang {
  from { transform: scale(0.9); opacity: 0.7; }
  to   { transform: scale(1.2); opacity: 1; }
}

/* ── State: complete ────────────────────────────────────────── */
.cat-complete {
  animation: complete-glow-pulse 1.5s ease-in-out infinite;
}

@keyframes complete-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px var(--cat-glow-complete)) drop-shadow(0 0 20px var(--cat-glow-complete)); }
  50%       { filter: drop-shadow(0 0 14px rgba(0,255,65,0.7)) drop-shadow(0 0 30px rgba(0,255,65,0.3)); }
}

.cat-complete .px-eye {
  background: var(--cat-eye-complete);
  box-shadow: 0 0 6px var(--cat-eye-complete), 0 0 12px var(--cat-eye-complete);
}

.cat-complete::after {
  content: '✓';
  position: absolute;
  top: -20px;
  right: 4px;
  font-size: 16px;
  color: #00FF41;
  text-shadow: 0 0 10px #00FF41;
  animation: check-pop 0.3s ease-out forwards;
}

@keyframes check-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── State: sleeping ────────────────────────────────────────── */
.cat-sleeping {
  filter: drop-shadow(0 0 6px var(--cat-glow-sleeping));
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1);     opacity: 0.85; }
  50%       { transform: scale(1.02); opacity: 1; }
}

.cat-sleeping .px-eye {
  background: var(--cat-eye-sleeping);
  transform: scaleY(0.15);
}

/* Z floating letters */
.cat-sleeping::after {
  content: 'z';
  position: absolute;
  top: 10px;
  right: 0px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--cat-coral);
  text-shadow: 0 0 6px var(--cat-coral);
  animation: z-float 2s ease-in-out infinite;
}

@keyframes z-float {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  40%  { opacity: 0.9; transform: translate(8px, -12px) scale(1); }
  100% { opacity: 0;   transform: translate(16px, -24px) scale(0.4); }
}

/* Second Z with delay */
.cat-sleeping .px-zzz::before {
  content: 'Z';
  position: absolute;
  top: 4px;
  right: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--cat-coral-dark);
  animation: z-float 2s ease-in-out 0.8s infinite;
}

/* ── Hacker Cat — Pixel Layout Map ─────────────────────────── */
/*
  The 16×16 grid pixel layout is generated by hacker-cat.js
  at runtime using a compact pixel map array. CSS just provides
  the color classes and state animations.

  Pixel map legend (hacker-cat.js):
    0 = transparent (background shows through)
    1 = black (outline)
    2 = coral (main body)
    3 = coral-dark (shadow)
    4 = coral-light (highlight)
    5 = white (markings)
    6 = belly (lighter coral-pink)
    7 = nose
    E = eye cell
    P = pupil
    T = tail pixel
    W = paw pixel
*/