/* Tribble characters on the page, 2026-10-14. Built by
   tribble-marketing-skills/scripts/critters_web/build_web_critters.py.

   Markup: <span class="crit-box ..."><img class="crit" data-m="<motion>" ...></span>
   - The body fidgets for a moment every few seconds (data-m). A character whose prop carries
     the motion (a waving mitt, a pulsing seal) moves it inside its own SVG, and gets
     data-m="still" or "drift" here.
   - critters.js adds .is-hi to the box the first time it scrolls into view: a small hello.
     Hovering the host replays it.
   - --cw sets the width, --cd offsets the fidget so neighbours never move in step.
   - Reduced motion keeps everyone still, here and inside the SVGs. */

.crit-box { display: inline-block; width: var(--cw, 64px); line-height: 0; transform-origin: 50% 100%; pointer-events: none; }
.crit-box img.crit { display: block; width: 100%; max-width: none; height: auto; margin: 0; transform-origin: 50% 100%; box-shadow: none; border-radius: 0; background: none; }  /* beats page rules for screenshots, like .h-stage img */

/* idle fidgets: the move sits at the end of each cycle, so the loop rests first */
.crit-box .crit[data-m="bob"] { animation: crit-bob var(--cp, 6.4s) ease-in-out var(--cd, 0s) infinite; }
.crit-box .crit[data-m="wiggle"] { animation: crit-wiggle var(--cp, 6.8s) ease-in-out var(--cd, 0s) infinite; }
.crit-box .crit[data-m="hop"] { animation: crit-hop var(--cp, 6.2s) ease-out var(--cd, 0s) infinite; }
.crit-box .crit[data-m="sway"] { animation: crit-sway var(--cp, 7.2s) ease-in-out var(--cd, 0s) infinite; }
.crit-box .crit[data-m="shake"] { animation: crit-shake var(--cp, 7s) linear var(--cd, 0s) infinite; }
.crit-box .crit[data-m="pulse"] { animation: crit-pulse var(--cp, 6.6s) ease-in-out var(--cd, 0s) infinite; }
.crit-box .crit[data-m="drift"] { animation: crit-drift 4.6s ease-in-out var(--cd, 0s) infinite; }
@keyframes crit-bob { 0%, 74%, 100% { transform: none; } 81% { transform: translateY(-7%); } 88% { transform: none; } 92% { transform: translateY(-2%); } }
@keyframes crit-wiggle { 0%, 72%, 100% { transform: none; } 76% { transform: translateY(-3%) rotate(-7deg); } 80% { transform: rotate(6deg); } 84% { transform: rotate(-4deg); } 88% { transform: rotate(2deg); } 91% { transform: none; } }
@keyframes crit-hop { 0%, 70%, 100% { transform: none; } 73% { transform: scale(1.07, .9); } 79% { transform: translateY(-15%) scale(.96, 1.05); } 85% { transform: scale(1.06, .92); } 89% { transform: none; } }
@keyframes crit-sway { 0%, 62%, 100% { transform: none; } 72% { transform: rotate(-6deg); } 82% { transform: rotate(5deg); } 91% { transform: none; } }
@keyframes crit-shake { 0%, 78%, 96%, 100% { transform: none; } 80%, 84%, 88%, 92% { transform: translateX(-3%) rotate(-2deg); } 82%, 86%, 90%, 94% { transform: translateX(3%) rotate(2deg); } }
@keyframes crit-pulse { 0%, 76%, 100% { transform: none; } 81% { transform: scale(1.07); } 86% { transform: none; } 90% { transform: scale(1.04); } 94% { transform: none; } }
@keyframes crit-drift { 0%, 100% { transform: none; } 50% { transform: translateY(-4%); } }

/* hello on first view, and again on hover */
.crit-box.is-hi, .crit-host:hover .crit-box { animation: crit-hi .9s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes crit-hi { 0% { transform: none; } 28% { transform: translateY(-12%) scale(1.08, .96); } 55% { transform: translateY(0) scale(.97, 1.03); } 78% { transform: translateY(-3%); } 100% { transform: none; } }

/* on a dark field the navy outline disappears, so the character gets a thin white sticker edge */
.crit-dark img.crit { filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff); }

/* placements */
.crit-host { position: relative; }
/* perched on the host's top edge, feet just over the line */
.crit-perch { position: absolute; bottom: 100%; right: var(--px, 28px); margin-bottom: -4px; z-index: 3; }
/* at the far end of a heading row */
.crit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.crit-head > .crit-box { flex: none; margin-bottom: 10px; }
/* straight after the last word of a heading */
.crit-inline { vertical-align: -.1em; margin: -.5em 0 0 .3em; width: var(--cw, 1.25em); }
/* in front of a short title, like a reaction */
.crit-emoji { vertical-align: -.32em; margin-right: .38em; width: var(--cw, 1.7em); }
/* a Tribble-framed line icon nods when its link is hovered */
.crit-icon { transform-origin: 50% 90%; }
.crit-host:hover .crit-icon { animation: crit-nod .7s ease-in-out; }
@keyframes crit-nod { 0%, 100% { transform: none; } 25% { transform: rotate(-8deg) translateY(-6%); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
/* Tribble's seal of approval in a comparison header */
.crit-seal { display: inline-block; width: 16px; height: auto; margin-right: 6px; vertical-align: -3px; }

@media (max-width: 640px) {
  .crit-head > .crit-box { width: calc(var(--cw, 64px) * .72); }
  .crit-perch { width: calc(var(--cw, 64px) * .8); right: calc(var(--px, 28px) * .6); }
}
@media (prefers-reduced-motion: reduce) {
  .crit, .crit-box, .crit-box.is-hi, .crit-host:hover .crit-box, .crit-host:hover .crit-icon { animation: none; }
}
@media print { .crit-box { display: none; } }