#tb-root,#tb-root *{transform-box:fill-box}
#tb-body{transform-origin:50% 58%}
#tb-antenna-l{transform-origin:100% 100%}
#tb-antenna-r{transform-origin:0% 100%}
#tb-tip-l,#tb-tip-r,#tb-eye-l,#tb-eye-r,#tb-mouth,#tb-visor-glow,#tb-shadow{transform-origin:50% 50%}

.tb--idle #tb-body{animation:tbBob 3.8s ease-in-out infinite}
.tb--idle #tb-antenna-l{animation:tbIdleAntennaL 4.8s ease-in-out infinite}
.tb--idle #tb-antenna-r{animation:tbIdleAntennaR 4.8s ease-in-out .18s infinite}
.tb--idle #tb-tip-l{animation:tbTipPulse 2.6s ease-in-out infinite}
.tb--idle #tb-tip-r{animation:tbTipPulse 2.6s ease-in-out .35s infinite}
.tb--idle #tb-eye-l,.tb--idle #tb-eye-r{animation:tbEyeGroove 5.6s ease-in-out infinite}
.tb--idle #tb-mouth{animation:tbSmileGroove 5.6s ease-in-out infinite}
.tb--idle #tb-visor-glow{animation:tbGlowDrift 5.8s ease-in-out infinite alternate}
.tb--idle #tb-shadow{animation:tbIdleShadow 3.8s ease-in-out infinite}

.tb--blink #tb-eye-l,.tb--blink #tb-eye-r{animation:tbBlink .24s ease-in-out 1}

.tb--scan #tb-visor-glow{animation:tbScan 1s cubic-bezier(.2,.7,.2,1) 1 both}
.tb--scan #tb-eye-l,.tb--scan #tb-eye-r{animation:tbScanEyes 1s ease-in-out 1 both}
.tb--scan #tb-antenna-l{animation:tbScanPingL 1s ease-in-out 1}
.tb--scan #tb-antenna-r{animation:tbScanPingR 1s ease-in-out 1}

.tb--wave #tb-body{animation:tbWaveBody .9s cubic-bezier(.2,.8,.25,1) 1 both}
.tb--wave #tb-antenna-l{animation:tbWaggleL .82s ease-in-out 1 both}
.tb--wave #tb-antenna-r{animation:tbWaggleR .82s ease-in-out 1 both}
.tb--wave #tb-mouth{animation:tbWaveSmile .9s ease-in-out 1 both}
.tb--wave #tb-eye-l,.tb--wave #tb-eye-r{animation:tbWaveEyes .9s ease-in-out 1 both}

.tb--happy #tb-body{animation:tbHappyBounce 1s cubic-bezier(.2,.78,.25,1) 1 both}
.tb--happy #tb-eye-l,.tb--happy #tb-eye-r{animation:tbEyePop 1s ease-in-out 1 both}
.tb--happy #tb-mouth{animation:tbHappySmile 1s ease-in-out 1 both}
.tb--happy #tb-antenna-l{animation:tbSpringL 1s ease-out 1 both}
.tb--happy #tb-antenna-r{animation:tbSpringR 1s ease-out 1 both}
.tb--happy #tb-tip-l,.tb--happy #tb-tip-r{animation:tbHappyTip 1s ease-out 1 both}
.tb--happy #tb-shadow{animation:tbHappyShadow 1s ease-out 1 both}

.tb--sleep #tb-body{animation:tbSleepBreathe 4.4s ease-in-out infinite}
.tb--sleep #tb-eye-l,.tb--sleep #tb-eye-r{transform:scaleY(.18);opacity:.68}
.tb--sleep #tb-mouth{transform:scale(.92);opacity:.82}
.tb--sleep #tb-antenna-l{transform:rotate(-15deg)}
.tb--sleep #tb-antenna-r{transform:rotate(15deg)}
.tb--sleep #tb-tip-l,.tb--sleep #tb-tip-r{transform:scale(.92);opacity:.68}
.tb--sleep #tb-shadow{animation:tbShadowBreath 4.4s ease-in-out infinite}

@keyframes tbBob{0%,100%{transform:translateY(0) rotate(0)}48%{transform:translateY(-2.2px) rotate(-.5deg)}56%{transform:translateY(-2px) rotate(.5deg)}}
@keyframes tbIdleAntennaL{0%,100%{transform:rotate(0)}45%{transform:rotate(-2.5deg)}55%{transform:rotate(1.5deg)}}
@keyframes tbIdleAntennaR{0%,100%{transform:rotate(0)}45%{transform:rotate(2.5deg)}55%{transform:rotate(-1.5deg)}}
@keyframes tbTipPulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.1);opacity:1}}
@keyframes tbEyeGroove{0%,30%,100%{transform:translateX(0) scaleY(1)}40%,48%{transform:translateX(1.2px) scaleY(.92)}62%,70%{transform:translateX(-.7px) scaleY(1)}}
@keyframes tbSmileGroove{0%,34%,100%{transform:translateY(0) scale(1)}46%{transform:translateY(-.4px) scale(1.035,1.04)}62%{transform:translateY(0) scale(.99,1)}}
@keyframes tbGlowDrift{0%{transform:translateX(-3px);opacity:.1}100%{transform:translateX(14px);opacity:.24}}
@keyframes tbIdleShadow{0%,100%{transform:scaleX(1);opacity:.26}50%{transform:scaleX(.94);opacity:.2}}

@keyframes tbBlink{0%,34%,100%{transform:scaleY(1)}50%,72%{transform:scaleY(.1)}}

@keyframes tbScan{0%{transform:translateX(-10px);opacity:0}14%{opacity:.46}82%{transform:translateX(54px);opacity:.46}100%{transform:translateX(62px);opacity:0}}
@keyframes tbScanEyes{0%,100%{transform:translateX(0)}18%{transform:translateX(-1.5px)}72%{transform:translateX(2.5px)}}
@keyframes tbScanPingL{0%,100%{transform:rotate(0)}45%{transform:rotate(-5deg)}}
@keyframes tbScanPingR{0%,100%{transform:rotate(0)}45%{transform:rotate(5deg)}}

@keyframes tbWaveBody{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-2px) rotate(-6deg)}44%{transform:translateY(-3px) rotate(4deg)}68%{transform:translateY(-1px) rotate(-3deg)}84%{transform:rotate(1.5deg)}}
@keyframes tbWaggleL{0%,100%{transform:rotate(0)}18%{transform:rotate(-15deg)}38%{transform:rotate(11deg)}58%{transform:rotate(-9deg)}76%{transform:rotate(5deg)}}
@keyframes tbWaggleR{0%,100%{transform:rotate(0)}18%{transform:rotate(15deg)}38%{transform:rotate(-11deg)}58%{transform:rotate(9deg)}76%{transform:rotate(-5deg)}}
@keyframes tbWaveSmile{0%,100%{transform:scale(1)}35%{transform:scale(1.12,1.12)}68%{transform:scale(1.03)}}
@keyframes tbWaveEyes{0%,100%{transform:scale(1)}36%{transform:scale(1.08)}60%{transform:scaleY(.9)}}

@keyframes tbHappyBounce{0%,100%{transform:translateY(0) scale(1)}16%{transform:translateY(-6px) scale(1.04,.96)}34%{transform:translateY(0) scale(.97,1.03)}52%{transform:translateY(-3px) scale(1.02,.98)}70%{transform:translateY(0) scale(.99,1.01)}84%{transform:translateY(-1px)}}
@keyframes tbEyePop{0%,100%{transform:scale(1);opacity:.92}18%{transform:scale(1.22);opacity:1}40%{transform:scale(.96)}66%{transform:scale(1.1);opacity:1}}
@keyframes tbHappySmile{0%,100%{transform:scale(1)}18%{transform:scale(1.18,1.16)}44%{transform:scale(.98,1.04)}70%{transform:scale(1.08)}}
@keyframes tbSpringL{0%,100%{transform:rotate(0)}16%{transform:rotate(-20deg)}34%{transform:rotate(10deg)}52%{transform:rotate(-6deg)}72%{transform:rotate(3deg)}}
@keyframes tbSpringR{0%,100%{transform:rotate(0)}16%{transform:rotate(20deg)}34%{transform:rotate(-10deg)}52%{transform:rotate(6deg)}72%{transform:rotate(-3deg)}}
@keyframes tbHappyTip{0%,100%{transform:scale(1)}18%{transform:scale(1.2)}42%{transform:scale(.96)}68%{transform:scale(1.08)}}
@keyframes tbHappyShadow{0%,100%{transform:scaleX(1);opacity:.26}18%{transform:scaleX(.78);opacity:.17}42%{transform:scaleX(1.06);opacity:.28}}

@keyframes tbSleepBreathe{0%,100%{transform:translateY(1px) scale(1)}50%{transform:translateY(2.5px) scale(1.01,.99)}}
@keyframes tbShadowBreath{0%,100%{transform:scaleX(1);opacity:.24}50%{transform:scaleX(1.06);opacity:.3}}

@media (prefers-reduced-motion:reduce){#tb-root,#tb-root *{animation:none!important}}

/* ============================================================
   HERO MASCOT — second Tekbot instance, hero section
   Same artwork, same keyframes (unscoped, safe to share) — only the
   id-selector rules are duplicated with #tbh- ids so this instance and
   the floating widget's #tb- instance never collide on the same page.
   ============================================================ */
#tbh-root,#tbh-root *{transform-box:fill-box}
#tbh-body{transform-origin:50% 58%}
#tbh-antenna-l{transform-origin:100% 100%}
#tbh-antenna-r{transform-origin:0% 100%}
#tbh-tip-l,#tbh-tip-r,#tbh-eye-l,#tbh-eye-r,#tbh-mouth,#tbh-visor-glow,#tbh-shadow{transform-origin:50% 50%}
.tb--idle #tbh-body{animation:tbBob 3.8s ease-in-out infinite}
.tb--idle #tbh-antenna-l{animation:tbIdleAntennaL 4.8s ease-in-out infinite}
.tb--idle #tbh-antenna-r{animation:tbIdleAntennaR 4.8s ease-in-out .18s infinite}
.tb--idle #tbh-tip-l{animation:tbTipPulse 2.6s ease-in-out infinite}
.tb--idle #tbh-tip-r{animation:tbTipPulse 2.6s ease-in-out .35s infinite}
.tb--idle #tbh-eye-l,.tb--idle #tbh-eye-r{animation:tbEyeGroove 5.6s ease-in-out infinite}
.tb--idle #tbh-mouth{animation:tbSmileGroove 5.6s ease-in-out infinite}
.tb--idle #tbh-visor-glow{animation:tbGlowDrift 5.8s ease-in-out infinite alternate}
.tb--idle #tbh-shadow{animation:tbIdleShadow 3.8s ease-in-out infinite}
.tb--blink #tbh-eye-l,.tb--blink #tbh-eye-r{animation:tbBlink .24s ease-in-out 1}
.tb--scan #tbh-visor-glow{animation:tbScan 1s cubic-bezier(.2,.7,.2,1) 1 both}
.tb--scan #tbh-eye-l,.tb--scan #tbh-eye-r{animation:tbScanEyes 1s ease-in-out 1 both}
.tb--scan #tbh-antenna-l{animation:tbScanPingL 1s ease-in-out 1}
.tb--scan #tbh-antenna-r{animation:tbScanPingR 1s ease-in-out 1}
.tb--wave #tbh-body{animation:tbWaveBody .9s cubic-bezier(.2,.8,.25,1) 1 both}
.tb--wave #tbh-antenna-l{animation:tbWaggleL .82s ease-in-out 1 both}
.tb--wave #tbh-antenna-r{animation:tbWaggleR .82s ease-in-out 1 both}
.tb--wave #tbh-mouth{animation:tbWaveSmile .9s ease-in-out 1 both}
.tb--wave #tbh-eye-l,.tb--wave #tbh-eye-r{animation:tbWaveEyes .9s ease-in-out 1 both}
.tb--happy #tbh-body{animation:tbHappyBounce 1s cubic-bezier(.2,.78,.25,1) 1 both}
.tb--happy #tbh-eye-l,.tb--happy #tbh-eye-r{animation:tbEyePop 1s ease-in-out 1 both}
.tb--happy #tbh-mouth{animation:tbHappySmile 1s ease-in-out 1 both}
.tb--happy #tbh-antenna-l{animation:tbSpringL 1s ease-out 1 both}
.tb--happy #tbh-antenna-r{animation:tbSpringR 1s ease-out 1 both}
.tb--happy #tbh-tip-l,.tb--happy #tbh-tip-r{animation:tbHappyTip 1s ease-out 1 both}
.tb--happy #tbh-shadow{animation:tbHappyShadow 1s ease-out 1 both}
.tb--sleep #tbh-body{animation:tbSleepBreathe 4.4s ease-in-out infinite}
.tb--sleep #tbh-eye-l,.tb--sleep #tbh-eye-r{transform:scaleY(.18);opacity:.68}
.tb--sleep #tbh-mouth{transform:scale(.92);opacity:.82}
.tb--sleep #tbh-antenna-l{transform:rotate(-15deg)}
.tb--sleep #tbh-antenna-r{transform:rotate(15deg)}
.tb--sleep #tbh-tip-l,.tb--sleep #tbh-tip-r{transform:scale(.92);opacity:.68}
.tb--sleep #tbh-shadow{animation:tbShadowBreath 4.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#tbh-root,#tbh-root *{animation:none!important}}

/* ============================================================
   TEKBOT WIDGET CHROME — Tekko BD
   Everything above this line is the mascot artwork's own animation
   states (hand-authored, scoped to #tb-* / .tb--*). Everything below
   is the floating widget that hosts it on the site.

   Placement: bottom-RIGHT. Bottom-centre is taken by .tk-toast
   (z-index 200) and the mobile nav drawer owns the left edge, so the
   right corner is the only spot that never overlaps existing UI.
   Widget sits at z-index 150 — under the toast, over page content.
   ============================================================ */
.tb-widget {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.tb-widget[hidden] { display: none; }

.tb-btn {
  width: 64px; height: 64px; padding: 0; border: none; cursor: pointer;
  background: transparent; border-radius: 50%; position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(.2,1,.3,1);
}
.tb-btn:hover { transform: translateY(-3px) scale(1.04); }
.tb-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.tb-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Dismiss — only revealed on hover/focus so it never competes with the mascot. */
.tb-close {
  position: absolute; top: -2px; right: -2px; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--paper);
  color: var(--ink-soft); font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  box-shadow: var(--shadow-sm);
}
.tb-widget:hover .tb-close, .tb-btn:focus-visible + .tb-close, .tb-close:focus-visible {
  opacity: 1; pointer-events: auto;
}
.tb-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Speech bubble. --paper on --ink text, paired per the contrast rule. */
.tb-bubble {
  max-width: min(260px, calc(100vw - 56px));
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  padding: 14px 16px; font-size: 14px; line-height: 1.5;
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,1,.3,1);
  pointer-events: none;
}
.tb-bubble.is-open { opacity: 1; transform: none; pointer-events: auto; }
.tb-bubble p { margin: 0 0 10px; color: var(--ink-soft); font-size: 13.5px; }
.tb-bubble p:last-child { margin: 0; }
.tb-bubble a {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; font-size: 13.5px; color: var(--accent);
  text-decoration: none; min-height: 34px;
}
.tb-bubble a:hover { text-decoration: underline; color: var(--accent); }
.tb-bubble strong { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .tb-widget { right: 14px; bottom: 14px; }
  .tb-btn { width: 54px; height: 54px; }
  /* Dismiss has no hover on touch — keep it permanently visible instead. */
  .tb-close { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-btn, .tb-bubble { transition: none; }
  .tb-btn:hover { transform: none; }
}