/* =====================================================================
   TalkingLogs — Wandering Tavern Critters
   Framework-free stylesheet (keyframes + scoped palette + base layout).
   Pairs with critters.js and the #tl-critter-lane / #tl-critter-stencils
   fragment in index.html.

   All animation is GPU-cheap transform/opacity. Honors reduced-motion.
   ===================================================================== */

/* --- Critter sub-palette -------------------------------------------------
   Scoped to the critter containers so it never collides with the app's own
   :root tokens (the app already defines --ink/--green/--gold/--ember in
   different shades). The cloned critters live inside #tl-critter-lane, so
   these cascade into them. The frog uses literal hex (vivid glossy greens),
   so it is unaffected by these vars. */
#tl-critter-lane,
#tl-critter-stencils {
  --ink:#2e1c0c;        /* outline */
  --brown:#8a5a2f;      /* fur / coats */
  --brownDk:#5c3a1c;    /* shadowed fur, manes, hafts */
  --cream:#ecd9a8;      /* horns, bone, belly */
  --green:#7cbb43;      /* (legacy critter green) */
  --greenDk:#5a9230;
  --slate:#46505a;      /* penguin body, steel */
  --slateLt:#6f7a84;
  --gold:#d8a73e;       /* metal / eye rims / trim */
  --ember:#d8592c;      /* feathers, beak, feet, cloth */
  --eye:#1f1d1a;        /* default dark eye */
  --spark:#6fd6ea;      /* elemental storm-blue (shaman) */
  --sparkDeep:#2a8fb5;
}

/* --- Lane: the floor strip the critters walk along ----------------------
   Place this element inside the chat panel (position:relative). Sit it just
   above the composer so critters pass between content and the input bar.
   height:0 so it never blocks layout; its absolutely-positioned children
   (the critters) extend upward from the floor line. */
#tl-critter-lane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 132px;         /* clear the composer (84px) + the collapsed tip-bar toggle (48px) */
  height: 0;
  z-index: 3;            /* above background + welcome art, below composer */
  pointer-events: none;  /* lane itself is click-through... */
  transition: opacity .25s ease;
}
#tl-critter-lane > * {
  pointer-events: auto;  /* ...but each critter is clickable */
}
/* Fade ambient critters out while the tip menu is open — the expanded panel
   pushes the composer up past the lane, so they'd otherwise overlap the menu. */
#chat.tips-open #tl-critter-lane { opacity: 0; }

#tl-critter-stencils { display: none; }   /* art templates, never shown */

/* --- Idle gaits (one per species) --------------------------------------- */
@keyframes crit-hop    { 0%,55% { transform: translateY(0) scaleY(1); } 61% { transform: translateY(2px) scaleY(.88); } 72% { transform: translateY(-15px) scaleY(1.06); } 82% { transform: translateY(0) scaleY(.92); } 88%,100% { transform: translateY(0) scaleY(1); } }
@keyframes crit-waddle { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-1px); } }
@keyframes crit-trot   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes crit-legA   { 0%,100% { transform: rotate(13deg); } 50% { transform: rotate(-13deg); } }
@keyframes crit-legB   { 0%,100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@keyframes crit-plod   { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-0.7deg); } }

/* --- Click reactions ----------------------------------------------------- */
/* Frog: jump straight up, full backflip onto its back, roll upright.
   NOTE: js sets transform-origin:center on the frog for the duration of this. */
@keyframes react-frog { 0% { transform: translateY(0) rotate(0deg) scaleY(1); } 10% { transform: translateY(8px) scaleY(.8); } 30% { transform: translateY(-70px) rotate(-70deg); } 46% { transform: translateY(-88px) rotate(-150deg); } 64% { transform: translateY(0) rotate(-180deg); } 76% { transform: translateY(0) rotate(-180deg); } 100% { transform: translateY(0) rotate(-360deg); } }
/* Penguin: lean into a two-handed axe swing (axe element uses react-axe) */
@keyframes react-penguin-chop { 0% { transform: rotate(0); } 28% { transform: rotate(-13deg); } 58% { transform: rotate(-13deg); } 78% { transform: rotate(11deg); } 100% { transform: rotate(0); } }
@keyframes react-axe { 0% { opacity: 0; transform: rotate(8deg); } 10% { opacity: 1; transform: rotate(-18deg); } 36% { transform: rotate(-122deg); } 56% { transform: rotate(-122deg); } 76% { transform: rotate(44deg); } 88% { transform: rotate(36deg); } 100% { opacity: 1; transform: rotate(38deg); } }
/* Horse: rears up */
@keyframes react-horse { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-15deg) translateY(-6px); } 55% { transform: rotate(-18deg) translateY(-8px); } 80% { transform: rotate(0); } }

/* --- Shaman thunderstorm cast ------------------------------------------- */
@keyframes react-cast  { 0% { transform: translateY(0) rotate(0); } 14% { transform: translateY(-3px) rotate(3deg); } 36% { transform: translateY(0) rotate(-2deg); } 60% { transform: rotate(2deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
/* weapon arm: rests lowered at rotate(50deg), swings overhead to -66deg */
@keyframes bull-raise  { 0% { transform: rotate(50deg); } 18% { transform: rotate(-66deg); } 82% { transform: rotate(-66deg); } 100% { transform: rotate(50deg); } }
/* eyes ignite only during the cast */
@keyframes eye-glow    { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes storm-in    { 0% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.7); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes storm-out   { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.85); } }
@keyframes storm-bob   { 0%,100% { margin-top: 0; } 50% { margin-top: -5px; } }
@keyframes bolt-flicker{ 0%,100% { opacity: 0; } 4% { opacity: 1; } 9% { opacity: .15; } 15% { opacity: 1; } 26% { opacity: 0; } }
@keyframes rain-fall   { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: .75; } 100% { transform: translateY(50px); opacity: 0; } }
@keyframes storm-flash { 0%,100% { opacity: 0; } 7% { opacity: .5; } 15% { opacity: 0; } 38% { opacity: .42; } 46% { opacity: 0; } 66% { opacity: .38; } 74% { opacity: 0; } }
@keyframes storm-rumble{ 0%,100% { transform: translate(0,0); } 20% { transform: translate(-1.5px,1px); } 40% { transform: translate(1.5px,-1px); } 60% { transform: translate(-1px,1px); } 80% { transform: translate(1px,1px); } }

/* --- Speech bubble (Ribbit! / NOOT NOOT / Honse) ------------------------ */
@keyframes bubble-pop  { 0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.6); } 18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 78% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  #tl-critter-lane * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}