/* Grok Bot team strip (motion v2, 2026-10-25). Colorful Grok Bot face SVGs (SMIL blink + glance inside each SVG)
   plus lively CSS motion: big bob, sway, staggered timing, wave and pop on hover.
   CSS motion is off under prefers-reduced-motion. */
.bot-strip { padding: 48px 0 40px; background: var(--void-soft); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); text-align: center; }
.bot-strip h2 { margin: 0 0 6px; }
.bot-strip-note { max-width: 62ch; margin: 10px auto 0; font-size: .95rem; }
.bot-team { display: flex; flex-wrap: wrap; gap: 22px 18px; justify-content: center; margin: 34px 0 8px; padding: 0; list-style: none; }
.bot-team li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 112px; text-align: center; font-size: .84rem; line-height: 1.3; color: var(--body); perspective: 420px; }
.bot-team b { color: var(--ink); font-weight: 600; display: block; }
.bot-av { position: relative; display: block; width: 84px; height: 84px; transform-origin: 50% 90%;
  animation: bt-bob 1.9s ease-in-out infinite; will-change: transform; }
.bot-av img { display: block; width: 100%; height: 100%; transform-origin: 50% 85%;
  animation: bt-sway 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.bot-team li:nth-child(2) .bot-av { animation-delay: -.45s; } .bot-team li:nth-child(2) img { animation-delay: -1.2s; }
.bot-team li:nth-child(3) .bot-av { animation-delay: -.9s; }  .bot-team li:nth-child(3) img { animation-delay: -2.1s; }
.bot-team li:nth-child(4) .bot-av { animation-delay: -1.35s; } .bot-team li:nth-child(4) img { animation-delay: -.6s; }
.bot-team li:nth-child(5) .bot-av { animation-delay: -1.8s; } .bot-team li:nth-child(5) img { animation-delay: -2.8s; }
.bot-team li:nth-child(6) .bot-av { animation-delay: -2.25s; } .bot-team li:nth-child(6) img { animation-delay: -1.7s; }
.bot-team li:hover .bot-av { animation: bt-pop .45s ease-out 1, bt-bob 1.9s ease-in-out .45s infinite; }
.bot-team li:hover .bot-av img { animation: bt-wave .7s ease-in-out 2; }
/* Spin v4: spin lives on <picture> (bob on .bot-av, sway on img) so transforms never fight. */
.bot-av picture { display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.bot-team li:nth-child(4) .bot-av picture { animation: bt-spin-y 7s ease-in-out 0s infinite; }   /* Marketing: horizontal spin + big blink */
.bot-team li:nth-child(5) .bot-av picture { animation: bt-spin-x 7.6s ease-in-out 3.6s infinite; } /* Video Studio: vertical "holy smokes" spin */
@keyframes bt-spin-y { 0%,88% { transform: rotateY(0); } 98%,100% { transform: rotateY(360deg); } }
@keyframes bt-spin-x { 0%,88% { transform: rotateX(0); } 98%,100% { transform: rotateX(360deg); } }
@keyframes bt-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes bt-sway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes bt-wave { 0%,100% { transform: rotate(0) scale(1.12); } 25% { transform: rotate(-20deg) scale(1.12); } 75% { transform: rotate(20deg) scale(1.12); } }
@keyframes bt-pop { 0% { transform: scale(1); } 45% { transform: scale(1.26) translateY(-14px); } 100% { transform: scale(1); } }
@keyframes bt-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(117,251,166,.6); } 50% { box-shadow: 0 0 0 7px rgba(117,251,166,0); } }
/* small inline "Built on Grok Bot" line with a bobbing bot */
.gb-note { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: .92rem; color: var(--mute); }
.gb-note img { flex: 0 0 28px; width: 28px; height: 28px; animation: bt-bob-sm 1.7s ease-in-out infinite, bt-sway 2.4s ease-in-out infinite; }
@keyframes bt-bob-sm { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.hv-gb, .hv-about-gb { color: var(--body); margin: 12px 0 0; }
@media (max-width: 520px) { .bot-team { gap: 18px 10px; } .bot-team li { width: 96px; } .bot-av { width: 72px; height: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .bot-av, .bot-av img, .bot-av picture, .gb-note img, .bot-team li:hover .bot-av, .bot-team li:hover .bot-av img { animation: none !important; }
}
/* Sprinkled mini Grok Bot faces (includes/bot-sprinkle.php). Decorative, aria-hidden. */
.bot-sprinkle { display: flex; gap: 8px; margin: 6px 0 10px; pointer-events: none; }
.bot-sprinkle-right { justify-content: flex-end; }
.bot-sprinkle-footer { justify-content: center; margin: 18px 0 6px; opacity: .9; }
.bot-sprinkle img { display: block; width: 30px; height: 30px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
  animation: bt-bob-sm 1.8s ease-in-out infinite, bt-sway 2.5s ease-in-out infinite; }
.bot-sprinkle picture:nth-child(2) img { animation-delay: -.8s, -1.4s; }
.bot-sprinkle picture:nth-child(3) img { animation-delay: -1.6s, -.5s; }
.bot-sprinkle picture:nth-child(4) img { animation-delay: -.4s, -2.2s; }
.bot-sprinkle picture:nth-child(5) img { animation-delay: -1.2s, -1s; }
.bot-sprinkle picture:nth-child(6) img { animation-delay: -2s, -2.6s; }
@media (prefers-reduced-motion: reduce) { .bot-sprinkle img { animation: none !important; } }