/* ─────────────────────────────────────────────────────────────────────
   Patchh — AiMANAC Mascot
   SVG + CSS implementation. No JS animations, no GIFs.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --patch-amber: #f0a423;
  --patch-amber-dim: #a87422;
  --patch-error: #e5594a;
  /* Per-theme primary tints (HELM icon variants). */
  --patch-terminal:  #f0a423;  /* CRT amber, default */
  --patch-executive: #c9b691;  /* muted bronze — restrained */
  --patch-mecha:     #ffd07a;  /* hot HUD amber */
  --patch-accessible:#ffffff;  /* pure white, high contrast */
}

/* ─── Patchh base ──────────────────────────────────────────────────── */
.patch{
  display:block;
  color:var(--patch-amber);
  filter:drop-shadow(0 0 14px rgba(240,164,35,.18));
  overflow:visible;
}
.patch * { transform-box:fill-box; transform-origin:center }

/* Stroke / fill defaults — every shape sits in the chassis SVG. */
.patch .chassis,
.patch .mouth,
.patch .eye-r,
.patch .b1,.patch .b2,.patch .b3{ stroke:currentColor; fill:none; stroke-width:1.5 }
.patch .eye-l{ fill:currentColor }
.patch .b1,.patch .b2,.patch .b3{ stroke-width:2.4; stroke-linecap:round }

/* Optional features — only shown in some expressions. */
.patch .zz,.patch .blush,.patch .spark,.patch .eq,.patch .acc-antenna,.patch .acc-pillow{ opacity:0 }

/* Sleeping pillow & z's show whenever eyes are flat-line (sleeping pose). */
.patch[data-eye-l="eye-flat"] .acc-pillow,
.patch[data-eye-l="eye-flat"] .zz{ opacity:1 }

/* Bowtie is part of Patchh — always visible. */
.patch .acc-bowtie{ opacity:1 }

/* Antenna toggles by class. */
.patch.has-antenna .acc-antenna{ opacity:1 }
.patch.has-antenna .acc-antenna circle{ animation:antenna-pulse 2s ease-in-out infinite }
@keyframes antenna-pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* EQ bar geometry — scaleY from baseline. */
.patch .eq-bar{ transform-origin:50% 100% }

/* ─── State: thinking ─────────────────────────────────────────────── */
.patch.thinking .b1{ animation:think 1.2s steps(1) infinite }
.patch.thinking .b2{ animation:think 1.2s steps(1) infinite .4s }
.patch.thinking .b3{ animation:think 1.2s steps(1) infinite .8s }
.patch.thinking .eye-r{ animation:pong-r 2.6s linear infinite }
.patch.thinking .eye-l{ animation:pong-l 2.6s linear infinite }
@keyframes think  { 0%,33% {opacity:1} 34%,100% {opacity:.15} }
@keyframes pong-r{
  0%   { transform:translate(-3px,0) }
  18%  { transform:translate(-7px,-3px) }
  28%  { transform:translate(-10px,0) }
  40%  { transform:translate(-10px,0) }
  56%  { transform:translate(-3px,0) }
  100% { transform:translate(-3px,0) }
}
@keyframes pong-l{
  0%   { transform:translate(3px,0) }
  56%  { transform:translate(3px,0) }
  72%  { transform:translate(7px,3px) }
  82%  { transform:translate(10px,0) }
  94%  { transform:translate(10px,0) }
  100% { transform:translate(3px,0) }
}

/* ─── State: talking — VU meter replaces button dots ─────────────── */
.patch.talking .b1,.patch.talking .b2,.patch.talking .b3{ opacity:0 }
.patch.talking .eq{ opacity:1 }
.patch.talking .eq-bar{ animation:vu 1.05s ease-in-out infinite }
.patch.talking .eq-bar:nth-child(1){ animation-delay:0s }
.patch.talking .eq-bar:nth-child(2){ animation-delay:.12s }
.patch.talking .eq-bar:nth-child(3){ animation-delay:.24s }
.patch.talking .eq-bar:nth-child(4){ animation-delay:.08s }
.patch.talking .eq-bar:nth-child(5){ animation-delay:.20s }
@keyframes vu{
  0%,100% { transform:scaleY(.3) }
  50%     { transform:scaleY(1.5) }
}

/* ─── State: listening — radar antenna rises + sweeps ───────────── */
.patch .radar{ opacity:0 }
.patch.listening .acc-antenna{ opacity:1; animation:antenna-rise .5s ease-out both }
.patch.listening .acc-antenna circle{ animation:antenna-pulse 2s ease-in-out infinite }
.patch.listening .radar{ opacity:1 }
.patch.listening .radar circle{
  animation:radar-ping 1.6s ease-out infinite;
  transform-box:fill-box; transform-origin:center;
}
.patch.listening .radar circle:nth-child(2){ animation-delay:.8s }
@keyframes antenna-rise{
  0%   { transform:translateY(2px); opacity:0 }
  100% { transform:translateY(0); opacity:1 }
}
@keyframes radar-ping{
  0%   { transform:scale(.6); opacity:.9 }
  100% { transform:scale(3.6); opacity:0 }
}

/* ─── State: looking — asymmetric eye scan ─────────────────────────── */
.patch.looking .eye-l,.patch.looking .eye-r{ animation:eye-scan 1.4s ease-in-out infinite }
@keyframes eye-scan{ 0%,100%{transform:scale(1)} 50%{transform:scale(.55)} }

/* ─── State: sleeping — slow breathe + drifting Z's ───────────────── */
.patch.sleeping{ animation:breathe 3.2s ease-in-out infinite }
.patch.sleeping .zz{ opacity:1 }
.patch.sleeping .zz text{
  animation:zpulse 2.5s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center;
}
.patch.sleeping .zz .z2{ animation-delay:.25s }
.patch.sleeping .zz .z3{ animation-delay:.5s }
.patch.sleeping .zz .z4{ animation-delay:.75s }
.patch.sleeping .zz .z5{ animation-delay:1s }
.patch.sleeping .acc-pillow{ opacity:1 }
@keyframes breathe{
  0%,100%{ transform:translateY(0) scale(1) }
  50%    { transform:translateY(.4px) scale(1.015) }
}
@keyframes zpulse{
  0%, 60%, 100% { opacity:.3; transform:translateY(0) scale(.95) }
  25%           { opacity:1;  transform:translateY(-1.5px) scale(1.1) }
}

/* ─── State: error — flat mouth shudder ───────────────────────────── */
.patch.error{ animation:shake .4s ease-in-out 2; color:var(--patch-error) }
@keyframes shake{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-.8px)} 75%{transform:translateX(.8px)}
}

/* ─── State: win — startled recoil, eyes pop in, hold, reset ───────── */
.patch.win{ animation:win-hop 2.6s cubic-bezier(.34,1.4,.64,1) infinite }
.patch.win .eye-l,.patch.win .eye-r{ animation:win-pop 2.6s cubic-bezier(.34,1.5,.64,1) infinite }
.patch.win .blush{ animation:win-blush 2.6s ease-out infinite }
@keyframes win-hop{
  0%   { transform:translateY(0) scale(1) }
  6%   { transform:translateY(1.5px) scale(.97) }
  20%  { transform:translateY(-1px) scale(1.03) }
  32%  { transform:translateY(0) scale(1) }
  100% { transform:translateY(0) scale(1) }
}
@keyframes win-pop{
  0%   { transform:scale(.15); opacity:.2 }
  14%  { transform:scale(1.3);  opacity:1 }
  24%  { transform:scale(1) }
  88%  { transform:scale(1); opacity:1 }
  100% { transform:scale(.15); opacity:.2 }
}
@keyframes win-blush{
  0%, 8% { opacity:0 }
  18%    { opacity:1 }
  85%    { opacity:1 }
  100%   { opacity:0 }
}

/* Reduced motion — freeze. */
@media (prefers-reduced-motion:reduce){
  .patch *{ animation:none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Theme variants — for use as the HELM icon inside AiMANAC.
   Each iOS theme picks one of these by adding the matching class to
   the <svg class="patch">. Patchh's chassis + bowtie + button geometry
   are unchanged; only color + glow shift to fit the surrounding theme.
   ───────────────────────────────────────────────────────────────────── */

/* Terminal — retro console / CRT phosphor amber. Heavier glow. */
.patch.theme-terminal{
  color:var(--patch-terminal);
  filter:drop-shadow(0 0 18px rgba(240,164,35,.32));
}

/* Executive — clean professional. Muted bronze, no glow, restrained. */
.patch.theme-executive{
  color:var(--patch-executive);
  filter:none;
}

/* Mecha — cockpit HUD. Hot amber, max luminance. */
.patch.theme-mecha{
  color:var(--patch-mecha);
  filter:drop-shadow(0 0 20px rgba(255,208,122,.45));
}

/* Accessible — high contrast white, no glow, fatter strokes. */
.patch.theme-accessible{
  color:var(--patch-accessible);
  filter:none;
}
.patch.theme-accessible .chassis,
.patch.theme-accessible .mouth,
.patch.theme-accessible .eye-r,
.patch.theme-accessible .b1,
.patch.theme-accessible .b2,
.patch.theme-accessible .b3{ stroke-width:2 }
.patch.theme-accessible .b1,
.patch.theme-accessible .b2,
.patch.theme-accessible .b3{ stroke-width:3 }