/* Tick, the Trade Corp jetpack mascot (js/tick.js). Fixed brand palette so he reads the
   same on both themes. Idle motion is CSS keyframes; only the flight path is scripted. */
.tk { --fl: .66; --bl: 1; position: relative; display: block; width: calc(var(--tk-h, 72px) * 120 / 156); height: var(--tk-h, 72px); }
.tk-fly { position: absolute; left: 0; top: 0; z-index: 150; pointer-events: none; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; view-transition-name: tick; }
.tk-fly.is-fixed { position: fixed; }
.tk-fly.is-flying { pointer-events: none; will-change: transform; }
/* only his painted body takes taps (wave / park); the empty box around him never blocks a control */
.tk-fly:not(.is-flying):not(.tk-probe):not(.is-gone) .tk-svg * { pointer-events: visiblePainted; }
.tk-fly.is-gone { visibility: hidden; }
::view-transition-group(tick), ::view-transition-old(tick), ::view-transition-new(tick) { animation-duration: 0s; }
.tk-act, .tk-bob { width: 100%; height: 100%; }
.tk-act { transform-origin: 50% 40%; }
.tk-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 12px rgb(6 10 30 / .3)); }
.tk-svg * { transform-box: fill-box; transform-origin: center; }

/* hover: slow bob, breathing chest glow, spark twinkles */
.tk-bob { animation: tk-bob 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes tk-bob { 50% { transform: translateY(-5%) rotate(-1.2deg); } }
.tk-tglow { animation: tk-glow 2.6s ease-in-out infinite alternate; }
@keyframes tk-glow { from { opacity: .4; } to { opacity: 1; } }
.tk-spark { animation: tk-twinkle 5s ease-in-out infinite; }
.tk-ant { animation-delay: -2.4s; }
@keyframes tk-twinkle { 0%, 82%, 100% { transform: none; opacity: .9; } 90% { transform: scale(1.5) rotate(45deg); opacity: 1; } }

/* blue jet flames: --fl sets the length (calm hover, long in flight); each layer flickers on its own beat */
.tk-flame { transform-origin: 50% 0; transform: scale(calc(.7 + var(--fl) * .3), var(--fl)); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.tk-f1, .tk-f2, .tk-f3 { transform-origin: 50% 0; animation: tk-flick .13s ease-in-out infinite alternate; }
.tk-f2 { animation-duration: .1s; animation-delay: -.04s; }
.tk-f3 { animation-duration: .08s; animation-delay: -.02s; }
.tk-flame:last-child path { animation-delay: -.07s; }
@keyframes tk-flick { from { transform: scale(1, .9); opacity: .82; } to { transform: scale(.9, 1.08); opacity: 1; } }
.tk-fglow { opacity: .68; transition: opacity .3s, transform .4s; }
.tk-hot { opacity: .7; transition: opacity .3s; }
.tk.is-flying { --fl: 1.5; }
.tk.is-flying .tk-fglow { opacity: 1; transform: scale(1.4); }
.tk.is-flying .tk-hot, .tk.is-think .tk-hot { opacity: 1; }

/* eyes: --gx/--gy glance (flight direction, look-around), --bl blink and squint */
.tk-eyes { transform: translate(calc(var(--gx, 0) * 3px), calc(var(--gy, 0) * 2px)) scaleY(var(--bl)); transition: transform .1s ease-out; }
.tk-pupil { transform: translate(calc(var(--gx, 0) * 1.4px), calc(var(--gy, 0) * 1.3px)); transition: transform .25s ease-out; }
.tk.is-blink { --bl: .1; }
.tk.is-happy, .tk.is-wave { --bl: .55; }
.tk-mouth { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.tk.is-happy .tk-mouth, .tk.is-wave .tk-mouth { transform: scale(1.3, 2); }

/* arms swing back in flight; click = wave */
.tk-svg .tk-arm { transform-box: view-box; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.tk-svg .tk-arm-l { transform-origin: 31px 80.6px; transform: rotate(10deg); }
.tk-svg .tk-arm-r { transform-origin: 89px 80.6px; transform: rotate(-10deg); }
.tk.is-flying .tk-arm-l { transform: rotate(32deg); }
.tk.is-flying .tk-arm-r { transform: rotate(-32deg); }
.tk.is-wave .tk-arm-r { animation: tk-wave 1.3s ease-in-out; }
@keyframes tk-wave { 15%, 45%, 75% { transform: rotate(-150deg); } 30%, 60% { transform: rotate(-118deg); } }

/* thinking: visor scan, eyes up, flames half lit */
.tk.is-think { --fl: .78; --gx: .45; --gy: -.6; }
.tk-scan { opacity: 0; }
.tk.is-think .tk-scan { opacity: .5; animation: tk-scan 1.1s ease-in-out infinite alternate; }
@keyframes tk-scan { to { transform: translateX(58px); } }

/* one-shots: land bounce, happy loop, hop */
.tk.is-land .tk-act { animation: tk-land .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tk-land { 0% { transform: translateY(-6%); } 40% { transform: translateY(4%) scale(1.05, .94); } 72% { transform: translateY(-1.5%) scale(.98, 1.02); } }
.tk.is-hop .tk-act { animation: tk-hop .75s cubic-bezier(.3, 0, .3, 1); }
@keyframes tk-hop { 40% { transform: translateY(-42%); } 72% { transform: translateY(3%) scale(1.04, .95); } }
.tk.is-loop .tk-act { animation: tk-loop 1.05s cubic-bezier(.45, 0, .25, 1); }
@keyframes tk-loop { 22% { transform: translateY(-14%) rotate(-25deg); } 62% { transform: translateY(-34%) rotate(-320deg); } 85% { transform: translateY(3%) rotate(-360deg); } 100% { transform: rotate(-360deg); } }

/* smoke puffs (positions and fades are WAAPI from tick.js) */
.tk-smoke { position: fixed; inset: 0; z-index: 149; overflow: hidden; pointer-events: none; contain: strict; }
.tk-puff { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgb(218 230 252 / .66), rgb(156 180 230 / .32) 45%, rgb(120 150 220 / .1) 75%, transparent); }

/* static portrait (status cards) */
.tk-mini { --fl: .58; }
.tk-mini * { animation: none !important; }

/* paused: hidden tab, or scrolled off screen */
.tk-paused .tk *, .tk.is-off * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .tk, .tk * { animation: none !important; transition: none !important; }
  .tk-smoke { display: none; }
}