.spk-root {
  --spk-body: #8b5cf6;
  --spk-ink: #16092f;
  --spk-glow: #c4b5fd;
  --spk-shell-top: #3a3941;
  --spk-shell-front: #1d1c22;
  --spk-edge: #111015;
  --spk-key-top: #46454f;
  --spk-key-lip: #232228;
  --spk-glass-fill: rgb(255 255 255 / 0.04);
  --spk-glass-edge: rgb(255 255 255 / 0.4);
  --spk-glass-glint: rgb(255 255 255 / 0.75);
  --spk-paper: #f0dcc8;
  --spk-paper-line: #d8c1aa;
  --spk-spring: cubic-bezier(0.33, 1.42, 0.05, 0.96);
  --spk-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  display: block;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.spk-scene { display: block; width: 100%; height: auto; overflow: visible; }
.spk-scene * { transform-box: view-box; }

.spk-body { fill: var(--spk-body); stroke: var(--spk-body); stroke-width: 3; stroke-linejoin: round; }
.spk-eyes { fill: var(--spk-ink); transition: opacity 90ms var(--spk-ease); }
.spk-line { fill: none; stroke: var(--spk-ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.spk-eyes-excited, .spk-eyes-happy { opacity: 0; }
.spk-pill { transform-box: fill-box; transform-origin: 50% 50%; animation: spk-blink 5.2s infinite; }
.spk-pill + .spk-pill { animation-delay: 0.02s; }

@keyframes spk-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(0.12); }
}

.spk-shadow { fill: rgb(0 0 0 / 0.32); transition: transform 0.3s var(--spk-spring); transform-origin: 80px 104px; }
.spk-shell { transition: transform 0.3s var(--spk-spring); transform-origin: 80px 104px; }
.spk-scene { transition: transform 0.3s var(--spk-spring); transform-origin: 50% 100%; }
.spk-pilot-pose { transform-box: fill-box; transform-origin: 50% 85%; transition: transform 0.28s var(--spk-spring); }

.spk-marks {
  fill: none; stroke: var(--spk-glow); stroke-width: 1.6; stroke-linecap: round;
  opacity: 0; transform: translate(1px, 2px) scale(0.7); transform-origin: 30% 20%;
  transition: opacity 90ms var(--spk-ease), transform 0.26s var(--spk-spring);
}

:is(.spk-root:hover, .spk-root.is-active) .spk-scene { transform: scale(1.06) translateY(-3px); }
:is(.spk-root:hover, .spk-root.is-active) .spk-eyes-idle { opacity: 0; }
:is(.spk-root:hover, .spk-root.is-active) .spk-eyes-excited { opacity: 1; }
:is(.spk-root:hover, .spk-root.is-active) .spk-marks { opacity: 1; transform: none; }

/* Keyboard: glass Enter-key cockpit */
.spk-deck-front { fill: var(--spk-shell-front); stroke: var(--spk-edge); stroke-width: 1.6; stroke-linejoin: round; }
.spk-deck-top { stroke: var(--spk-edge); stroke-width: 1.8; stroke-linejoin: round; }
.spk-underglow { fill: none; stroke: var(--spk-body); stroke-width: 1.6; stroke-linecap: round; opacity: 0.75; transition: opacity 0.2s, filter 0.2s; }
.spk-key-top { fill: var(--spk-key-top); }
.spk-key-lip { fill: var(--spk-key-lip); }
.spk-key { transition: transform 0.12s; }
.spk-well { fill: #0c0b10; stroke: var(--spk-edge); stroke-width: 2; }
.spk-rim-dark { fill: none; stroke: #0b0a0e; stroke-width: 4.6; stroke-linecap: round; }
.spk-rim { fill: none; stroke: #4a4952; stroke-width: 1.6; stroke-linecap: round; }
.spk-glass-fill { fill: var(--spk-glass-fill); }
.spk-glass-edge { fill: none; stroke: var(--spk-glass-edge); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spk-glass-glint { fill: none; stroke: var(--spk-glass-glint); stroke-width: 1.45; stroke-linecap: round; }
.spk-glass-legend { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.spk-keyboard .spk-dome { transform-origin: 108px 66px; transition: transform 0.35s var(--spk-spring); }

:is(.spk-root:hover, .spk-root.is-active) .spk-keyboard .spk-dome { transform: rotate(24deg); }
:is(.spk-root:hover, .spk-root.is-active) .spk-keyboard .spk-pilot-pose { transform: rotate(-6deg) scale(1.06) translateY(-2px); }
:is(.spk-root:hover, .spk-root.is-active) .spk-keyboard .spk-key { animation: spk-type 0.72s var(--d) infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-underglow { opacity: 1; filter: drop-shadow(0 0 3px var(--spk-body)); }

@keyframes spk-type {
  0%, 30%, 100% { transform: translateY(0); }
  12% { transform: translateY(1.2px); }
}

/* Phone: Spark breaks out of the chat screen */
.spk-phone-body { fill: var(--spk-shell-front); stroke: var(--spk-edge); stroke-width: 2; }
.spk-phone-screen { fill: #0e0d13; }
.spk-phone-notch { fill: var(--spk-shell-front); }
.spk-phone-kbd { fill: #1b1a21; }
.spk-pkey { fill: #3a3942; transition: fill 0.1s; }
.spk-psend { fill: var(--spk-body); }
.spk-phone-glint { fill: none; stroke: rgb(255 255 255 / 0.05); stroke-width: 9; stroke-linecap: round; }
.spk-typing { fill: #2b2a33; opacity: 0; transition: opacity 0.15s; }
.spk-typing circle { fill: #9b99a6; }
.spk-phone .spk-pilot-pose { transform-origin: 50% 100%; }

:is(.spk-root:hover, .spk-root.is-active) .spk-phone .spk-pilot-pose { transform: translateY(-38px) scale(1.3) rotate(-4deg); }
:is(.spk-root:hover, .spk-root.is-active) .spk-phone .spk-pkey { animation: spk-tap 0.66s var(--d) infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-typing { opacity: 1; transition-delay: 0.12s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-typing circle { animation: spk-dot 0.9s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-typing circle:nth-child(3) { animation-delay: 0.15s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-typing circle:nth-child(4) { animation-delay: 0.3s; }

@keyframes spk-tap {
  0%, 22%, 100% { fill: #3a3942; }
  8% { fill: var(--spk-glow); }
}
@keyframes spk-dot {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-1.6px); }
}

/* Notepad: cover flips over the spiral */
.spk-cover-back { fill: #1a191f; }
.spk-page { fill: var(--spk-paper); stroke: #b9a38e; stroke-width: 0.8; }
.spk-page-3 { fill: #d9c4ae; }
.spk-page-line { fill: none; stroke: var(--spk-paper-line); stroke-width: 0.8; }
.spk-cover rect, .spk-cover-flipped rect { fill: #2c2b33; stroke: var(--spk-edge); stroke-width: 1.6; }
.spk-band { fill: none; stroke: var(--spk-body); stroke-width: 3; }
.spk-cover-label { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-width: 3; stroke-linecap: round; }
.spk-ring { fill: none; stroke: #a7a6b0; stroke-width: 1.5; }
.spk-cover { transform-origin: 80px 50px; transition: transform 0.16s ease-in; }
.spk-cover-flipped { transform-origin: 80px 50px; transform: scaleY(0); transition: transform 0.2s var(--spk-spring); }
.spk-scribble { fill: none; stroke: var(--spk-body); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.spk-pencil { opacity: 0; transform: translate(49px, 71px) rotate(-35deg); transition: opacity 0.15s; }
.spk-pencil-body { fill: var(--spk-body); }
.spk-pencil-tip { fill: var(--spk-paper); }
.spk-pencil-lead { fill: var(--spk-ink); }
.spk-pencil-eraser { fill: #f472b6; }
.spk-notepad .spk-pilot-pose { transform-origin: 50% 100%; }

:is(.spk-root:hover, .spk-root.is-active) .spk-cover { transform: scaleY(0); }
:is(.spk-root:hover, .spk-root.is-active) .spk-cover-flipped { transform: scaleY(-0.34); transition-delay: 0.14s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-notepad .spk-pilot-pose { transform: translateY(-12px) rotate(-5deg) scale(1.04); }
:is(.spk-root:hover, .spk-root.is-active) .spk-scribble { animation: spk-write 1.4s 0.25s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-pencil { opacity: 1; animation: spk-pencil 1.4s 0.25s infinite; }

@keyframes spk-write {
  0% { stroke-dashoffset: 60; }
  70%, 100% { stroke-dashoffset: 0; }
}
@keyframes spk-pencil {
  0% { transform: translate(49px, 71px) rotate(-35deg); }
  70% { transform: translate(85px, 71px) rotate(-35deg); }
  100% { transform: translate(49px, 71px) rotate(-35deg); }
}

/* Peek: Spark outside the vehicle, hands on the card edge */
.spk-root-peek { cursor: default; }
.spk-hands rect { fill: var(--spk-body); stroke: var(--spk-cutout, #141820); stroke-width: 2.4; paint-order: stroke; }
.spk-hands path { fill: none; stroke: var(--spk-ink); stroke-width: 1.3; stroke-linecap: round; opacity: 0.55; }
.spk-peek .spk-eyes-idle { opacity: 0; }
.spk-peek .spk-eyes-happy { opacity: 1; }
.spk-peek .spk-pilot-pose { transform-origin: 50% 100%; }
.spk-peek .spk-eyes-idle .spk-pill { animation: none; }

.spk-root-peek:is(:hover, .is-active) .spk-scene { transform: none; }
.spk-root-peek:hover .spk-pilot-pose { transform: translateY(-3px) rotate(-3deg); }
.spk-root-peek:hover .spk-eyes-excited { opacity: 0; }
.spk-root-peek:hover .spk-eyes-happy { opacity: 1; }
.spk-root-peek.is-watching .spk-eyes-happy { opacity: 0; }
.spk-root-peek.is-watching .spk-eyes-idle { opacity: 1; transform: translate(-2px, 3px); }
.spk-root-peek.is-watching .spk-pilot-pose { transform: translateY(2px) rotate(-4deg); }
.spk-root-peek.is-cheering .spk-eyes-happy,
.spk-root-peek.is-cheering .spk-eyes-idle { opacity: 0; }
.spk-root-peek.is-cheering .spk-eyes-excited { opacity: 1; }
.spk-root-peek.is-cheering .spk-pilot-pose { transform: translateY(-8px) rotate(-6deg); }
.spk-root-peek .spk-marks { display: none; }

/* Shared paws */
.spk-paw rect { fill: var(--spk-body); stroke: var(--spk-cutout, #141414); stroke-width: 2.2; paint-order: stroke; }
.spk-paw path { fill: none; stroke: var(--spk-ink); stroke-width: 1.3; stroke-linecap: round; opacity: 0.55; }

/* Typist: full keyboard, Spark types with both paws */
.spk-typist .spk-pilot-pose { transform-origin: 50% 100%; }
.spk-tb { opacity: 0; }
.spk-tb rect { fill: #2b2a33; }
.spk-tb circle { fill: #9b99a6; }

:is(.spk-root:hover, .spk-root.is-active) .spk-typist .spk-pilot-pose { transform: translateY(-2px) rotate(-3deg); }
:is(.spk-root:hover, .spk-root.is-active) .spk-paw-l { animation: spk-paw-type 0.32s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-paw-r { animation: spk-paw-type 0.32s 0.16s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-hit-l .spk-key-top { animation: spk-key-flash 0.32s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-hit-r .spk-key-top { animation: spk-key-flash 0.32s 0.16s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-tb { animation: spk-tb 1.35s calc(var(--i) * 0.45s) infinite; }

@keyframes spk-paw-type { 0%, 100% { transform: none; } 40% { transform: translateY(1.8px); } }
@keyframes spk-key-flash { 0%, 100% { fill: var(--spk-key-top); } 40% { fill: var(--spk-glow); } }
@keyframes spk-tb {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.6); }
  20% { opacity: 1; transform: translate(2px, 0) scale(1); }
  100% { opacity: 0; transform: translate(14px, -28px) scale(1); }
}

/* CHAT keys: Spark is the Enter key */
.spk-cap-side { fill: #25242b; stroke: var(--spk-edge); stroke-width: 1.4; }
.spk-cap-top { fill: #47464f; }
.spk-cap-legend { font: 700 10.5px "Instrument Sans", system-ui, sans-serif; fill: #ecebf3; text-anchor: middle; dominant-baseline: central; }
.spk-chatkeys .spk-pilot-pose { transform-origin: 50% 100%; }

:is(.spk-root:hover, .spk-root.is-active) .spk-cap { animation: spk-cap 1.8s calc(var(--i) * 0.13s) infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cap .spk-cap-top { animation: spk-cap-glow 1.8s calc(var(--i) * 0.13s) infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-chatkeys .spk-pilot-pose { animation: spk-jack 1.8s 0.55s infinite; }

@keyframes spk-cap { 0%, 9%, 100% { transform: none; } 4% { transform: translateY(3px); } }
@keyframes spk-cap-glow { 0%, 9%, 100% { fill: #47464f; } 4% { fill: #6d5bb0; } }
@keyframes spk-jack {
  0% { transform: none; }
  5% { transform: translateY(2px) scale(1.04, 0.9); }
  14% { transform: translateY(-16px) scale(0.97, 1.05) rotate(-4deg); }
  22%, 68% { transform: translateY(-12px) rotate(-4deg); }
  82%, 100% { transform: none; }
}

/* Clicker: every click sends the next message. Keyframes come from the CHAT timeline in spark-mascot.js. */
.spk-chat-panel { fill: #0b141a; stroke: #1f2c33; stroke-width: 1.6; }
.spk-chat-head { fill: #1f2c33; }
.spk-chat-avatar { fill: var(--spk-body); }
.spk-chat-avatar-eye { fill: var(--spk-ink); }
.spk-chat-title { font: 700 7px "Instrument Sans", system-ui, sans-serif; fill: #e9edef; }
.spk-chat-sub { font: 500 5px "Instrument Sans", system-ui, sans-serif; fill: #8696a0; }
.spk-bub { opacity: 0; transform-box: fill-box; }
.spk-bub-in { transform-origin: 100% 100%; }
.spk-bub-out { transform-origin: 0% 0%; }
.spk-bub-pill { transform-origin: 50% 50%; }
.spk-bub-in .spk-bub-bg { fill: #005c4b; }
.spk-bub-out .spk-bub-bg { fill: #202c33; }
.spk-bub-text { font: 500 6.2px "Instrument Sans", system-ui, sans-serif; fill: #e9edef; }
.spk-bub-meta { font: 500 4.3px "Instrument Sans", system-ui, sans-serif; fill: #8696a0; text-anchor: end; }
.spk-bub-in .spk-bub-meta { fill: #9fc9bd; }
.spk-ticks { fill: #53bdeb; }
.spk-bub-btn rect { fill: #202c33; }
.spk-bub-btn text { font: 600 5.6px "Instrument Sans", system-ui, sans-serif; fill: #53bdeb; text-anchor: middle; }
.spk-bub-pill .spk-bub-bg { fill: #182229; stroke: #2a3942; stroke-width: 0.8; }
.spk-bub-pilltext { font: 600 4.8px "Instrument Sans", system-ui, sans-serif; fill: #a6b3bb; text-anchor: middle; }
.spk-cord { fill: none; stroke: #3a3942; stroke-width: 2; stroke-linecap: round; }
.spk-pad { fill: #232228; stroke: var(--spk-edge); stroke-width: 1.2; }
.spk-mouse-body { fill: #2a2930; stroke: var(--spk-edge); stroke-width: 1.6; }
.spk-mouse-left { fill: #2f2e36; }
.spk-mouse-split { fill: none; stroke: #141318; stroke-width: 1.2; }
.spk-mouse-wheel { fill: #17161b; stroke: #3d3c45; stroke-width: 0.6; }
.spk-ripple { fill: none; stroke: var(--spk-glow); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spk-send-icon { fill: #053d1e; }
.spk-cord-send { stroke: #64636e; stroke-width: 2.3; }
.spk-plug { fill: #8b8a94; stroke: var(--spk-edge); stroke-width: 0.8; }
.spk-ripple-ring { fill: none; stroke: #00ea65; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spk-clicker .spk-pilot-pose { transform-origin: 50% 100%; }
:is(.spk-root:hover, .spk-root.is-active) .spk-clicker .spk-pilot-pose { transform: rotate(-4deg); }

/* Cart lock: the cart keeps rolling away until Spark padlocks the wheel */
.spk-box-top { fill: #c9975f; stroke: #6b4a2a; stroke-width: 1.2; stroke-linejoin: round; }
.spk-cartlock .spk-speed { opacity: 1; transform: none; animation: spk-flicker 0.45s infinite; }
.spk-cartlock .spk-cart-ride { animation: spk-flee 1.1s ease-in-out infinite; }
.spk-cartlock .spk-wheel { animation: spk-spin 0.45s linear infinite; }
.spk-cartlock .spk-eyes-happy { opacity: 0; }
.spk-cartlock .spk-pilot-pose { transform-origin: 50% 100%; transform: rotate(4deg); }
.spk-chain { fill: none; stroke: #c9c8d1; stroke-width: 4; stroke-dasharray: 5.2 2.4; stroke-linecap: round; }
.spk-chain-b { stroke: #7d7c86; stroke-width: 1.8; stroke-dashoffset: 3.8; }
.spk-shackle { fill: none; stroke: #c9c8d1; stroke-width: 1.7; transform: translateY(-2.6px); transition: transform 0.2s var(--spk-spring); }
.spk-lock-body { fill: #ffb800; stroke: #7a5600; stroke-width: 0.9; }
.spk-lock-hole { fill: var(--spk-ink); }
.spk-lock-burst { fill: none; stroke: var(--spk-glow); stroke-width: 1.4; stroke-linecap: round; opacity: 0; }
.spk-lockup { opacity: 0; }
.spk-padlock { transform-box: fill-box; transform-origin: 50% 40%; transform: translateY(-16px) scale(1.9); }
.spk-paw-hold { transition: transform 0.25s var(--spk-spring); }

:is(.spk-root:hover, .spk-root.is-active) .spk-cartlock .spk-cart-ride { animation: none; transform: translateX(2px); transition: transform 0.3s var(--spk-spring); }
:is(.spk-root:hover, .spk-root.is-active) .spk-cartlock .spk-wheel { animation: none; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cartlock .spk-speed { animation: none; opacity: 0; transition: opacity 0.2s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cartlock .spk-eyes-surprised { opacity: 0; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cartlock .spk-eyes-happy { opacity: 1; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cartlock .spk-pilot-pose { transform: rotate(-3deg); }
:is(.spk-root:hover, .spk-root.is-active) .spk-lockup { opacity: 1; transition: opacity 0.12s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-padlock { transform: scale(1.9); transition: transform 0.32s var(--spk-spring); }
:is(.spk-root:hover, .spk-root.is-active) .spk-shackle { transform: none; transition-delay: 0.3s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-lock-burst { animation: spk-lock-burst 0.5s 0.42s both; }
:is(.spk-root:hover, .spk-root.is-active) .spk-paw-hold { transform: translateX(-1.5px); }

@keyframes spk-flee { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px) translateY(-0.6px); } }
@keyframes spk-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes spk-lock-burst { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* Emotes: standalone looping stickers */
.spk-emote .spk-eyes { opacity: 1; }
.spk-emote .spk-pilot-pose { transform-origin: 50% 100%; }
.spk-emote .spk-marks { opacity: 1; transform: none; }
.spk-root-emote:is(:hover, .is-active) .spk-scene { transform: scale(1.04); }
.spk-eyes-surprised, .spk-eyes-curious, .spk-eyes-thinking, .spk-eyes-lookdown, .spk-eyes-bored, .spk-eyes-love, .spk-eyes-darting, .spk-eyes-wink { fill: var(--spk-ink); }
.spk-lid { fill: none; stroke: var(--spk-ink); stroke-width: 2.2; stroke-linecap: round; }
.spk-heart { transform-box: fill-box; transform-origin: center; animation: spk-pulse 0.9s ease-in-out infinite; }
.spk-twinkle { fill: var(--spk-glow); transform-box: fill-box; transform-origin: center; animation: spk-twinkle 1.6s ease-in-out infinite; }
.spk-twinkle.t2 { animation-delay: 0.5s; }
.spk-twinkle.t3 { animation-delay: 1s; }

.spk-emote-excited .spk-pilot-pose { animation: spk-hop 0.6s ease-in-out infinite; }
.spk-emote-happy .spk-pilot-pose { animation: spk-sway 2.4s ease-in-out infinite; }
.spk-emote-wink .spk-pilot-pose { transform: rotate(-5deg); }

.spk-emote-bored .spk-pilot-pose { animation: spk-slump 4s ease-in-out infinite; }
.spk-ellipsis rect { fill: #2b2a33; }
.spk-ellipsis circle { fill: #9b99a6; opacity: 0; animation: spk-dots 2.4s infinite; }
.spk-ellipsis circle:nth-of-type(2) { animation-delay: 0.4s; }
.spk-ellipsis circle:nth-of-type(3) { animation-delay: 0.8s; }
.spk-paw-drum { animation: spk-drum 0.5s infinite; }

.spk-emote-curious .spk-pilot-pose { transform: rotate(6deg); }
.spk-lens { fill: rgb(255 255 255 / 0.1); stroke: #d4d3dc; stroke-width: 2.4; }
.spk-lens-handle { fill: none; stroke: #8b8a94; stroke-width: 4.5; stroke-linecap: round; }
.spk-magnifier { animation: spk-scan 2.6s ease-in-out infinite; }
.spk-question path { fill: none; stroke: var(--spk-glow); stroke-width: 2.6; stroke-linecap: round; }
.spk-question circle { fill: var(--spk-glow); }
.spk-question { animation: spk-bob-q 1.4s ease-in-out infinite; }

.spk-emote-surprised .spk-pilot-pose { animation: spk-startle 2.2s infinite; }
.spk-bang path { fill: none; stroke: var(--spk-glow); stroke-width: 2.6; stroke-linecap: round; }
.spk-bang circle { fill: var(--spk-glow); }
.spk-bang { transform-box: fill-box; transform-origin: 50% 100%; animation: spk-bang 2.2s infinite; }

.spk-float-heart { fill: #f472b6; opacity: 0; animation: spk-float 2.4s ease-out infinite; }
.spk-float-heart.h2 { animation-delay: 0.8s; }
.spk-float-heart.h3 { animation-delay: 1.6s; }

.spk-emote-sleepy .spk-pilot-pose { animation: spk-breathe 3.2s ease-in-out infinite; }
.spk-zzz text { font: 800 9px "Instrument Sans", system-ui, sans-serif; fill: var(--spk-glow); opacity: 0; animation: spk-float 3s ease-out infinite; }
.spk-zzz .z2 { font-size: 11px; animation-delay: 1s; }
.spk-zzz .z3 { font-size: 13px; animation-delay: 2s; }

.spk-thought circle, .spk-cloud { fill: #2b2a33; }
.spk-thought .d1, .spk-thought .d2, .spk-thought .d3 { fill: #9b99a6; animation: spk-dots 1.8s infinite; }
.spk-thought .d2 { animation-delay: 0.3s; }
.spk-thought .d3 { animation-delay: 0.6s; }
.spk-emote-thinking .spk-pilot-pose { transform: rotate(-4deg); }

.spk-eyes-darting { animation: spk-dart 1.6s steps(1) infinite; }
.spk-mt { animation: spk-juggle 1.2s ease-in-out infinite; }
.spk-mt-2 { animation-delay: 0.4s; }
.spk-mt-3 { animation-delay: 0.8s; }
.spk-mt-phone { fill: #1d1c22; stroke: var(--spk-edge); stroke-width: 1.2; }
.spk-mt-screen { fill: #0b141a; }
.spk-mt-in { fill: #202c33; }
.spk-mt-out { fill: #005c4b; }
.spk-mt-chat { fill: #005c4b; }
.spk-mt-dot { fill: #d1f4e8; }
.spk-mt-badge { fill: #ff4d5e; transform-box: fill-box; transform-origin: center; animation: spk-pulse 0.9s ease-in-out infinite; }
.spk-mt-mug { fill: var(--spk-paper); }
.spk-mt-mug-handle { fill: none; stroke: var(--spk-paper); stroke-width: 2; }
.spk-mt-steam { fill: none; stroke: #8b8a94; stroke-width: 1.2; stroke-linecap: round; animation: spk-steam 1.6s ease-in-out infinite; }

.spk-wallet-back { fill: #4a3423; stroke: #2a1c12; stroke-width: 1.2; }
.spk-wallet-front { fill: #6b4a31; stroke: #2a1c12; stroke-width: 1.2; }
.spk-wallet-stitch { fill: none; stroke: var(--spk-glow); stroke-width: 0.9; stroke-dasharray: 2 1.6; opacity: 0.8; }
.spk-wallet-clasp { fill: #ffb800; }
.spk-bill { transform-origin: 0 0; transform: rotate(var(--r)) translateY(9px); animation: spk-bill 3.4s infinite; }
.spk-bill rect:first-child { fill: #3fbf7f; stroke: #1f7a4c; stroke-width: 1; }
.spk-bill-inner { fill: none; stroke: #1f7a4c; stroke-width: 0.7; }
.spk-bill-seal { fill: #c9f2dc; stroke: #1f7a4c; stroke-width: 0.7; }
.spk-coin circle:first-child { fill: #ffb800; stroke: #b37f00; stroke-width: 1; }
.spk-coin-ring { fill: none; stroke: #b37f00; stroke-width: 0.8; }
.spk-coin { opacity: 0; }
.spk-coin.c1 { animation: spk-coin-1 3.4s infinite; }
.spk-coin.c2 { animation: spk-coin-2 3.4s infinite; }
.spk-coin.c3 { animation: spk-coin-3 3.4s infinite; }
.spk-emote-rich .spk-eyes-lookdown { animation: spk-rich-look 3.4s infinite; }
.spk-emote-rich .spk-eyes-happy { animation: spk-rich-joy 3.4s infinite; }
.spk-rich-spark { opacity: 0; animation: spk-rich-spark 3.4s infinite; }
.spk-emote-rich .spk-pilot-pose { animation: spk-rich-pose 3.4s infinite; }

@keyframes spk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes spk-twinkle { 0%, 100% { transform: scale(0.5); opacity: 0.3; } 50% { transform: scale(1); opacity: 1; } }
@keyframes spk-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-5px) rotate(-3deg); } }
@keyframes spk-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes spk-slump { 0%, 100% { transform: rotate(5deg) translateY(2px) scaleY(0.97); } 50% { transform: rotate(7deg) translateY(3px) scaleY(0.95); } }
@keyframes spk-dots { 0%, 15% { opacity: 0; } 30%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes spk-drum { 0%, 100% { transform: none; } 50% { transform: translateY(1.4px); } }
@keyframes spk-scan { 0%, 100% { transform: none; } 50% { transform: translate(-1.5px, 1px) rotate(-3deg); } }
@keyframes spk-bob-q { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px) rotate(6deg); } }
@keyframes spk-startle { 0%, 4% { transform: none; } 10% { transform: translateY(-7px) scale(1.04, 0.96); } 18%, 60% { transform: translateY(-2px); } 75%, 100% { transform: none; } }
@keyframes spk-bang { 0%, 6% { opacity: 0; transform: scale(0.4); } 14%, 62% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1); } }
@keyframes spk-float { 0% { opacity: 0; transform: translateY(6px) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -16px) scale(1); } }
@keyframes spk-breathe { 0%, 100% { transform: rotate(-6deg) scaleY(1); } 50% { transform: rotate(-6deg) scaleY(1.035); } }
@keyframes spk-dart { 0%, 100% { transform: translateX(-2.5px); } 25% { transform: translateX(2.5px); } 50% { transform: translateX(-2.5px) translateY(-2px); } 75% { transform: translateX(2.5px) translateY(1px); } }
@keyframes spk-juggle { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes spk-steam { 0%, 100% { transform: none; opacity: 0.5; } 50% { transform: translateY(-1.5px); opacity: 1; } }
@keyframes spk-bill { 0%, 34% { transform: rotate(var(--r)) translateY(9px); } 44% { transform: rotate(calc(var(--r) * 1.7)) translateY(-2px); } 52%, 84% { transform: rotate(calc(var(--r) * 1.5)) translateY(0); } 94%, 100% { transform: rotate(var(--r)) translateY(9px); } }
@keyframes spk-coin-1 { 0%, 38% { opacity: 0; transform: none; } 46% { opacity: 1; transform: translate(-18px, -34px); } 62% { opacity: 1; transform: translate(-24px, -26px); } 74%, 100% { opacity: 0; transform: translate(-27px, -12px); } }
@keyframes spk-coin-2 { 0%, 41% { opacity: 0; transform: none; } 49% { opacity: 1; transform: translate(20px, -38px); } 65% { opacity: 1; transform: translate(26px, -28px); } 77%, 100% { opacity: 0; transform: translate(29px, -14px); } }
@keyframes spk-coin-3 { 0%, 44% { opacity: 0; transform: none; } 53% { opacity: 1; transform: translate(2px, -48px); } 68% { opacity: 1; transform: translate(4px, -40px); } 80%, 100% { opacity: 0; transform: translate(5px, -26px); } }
@keyframes spk-rich-look { 0%, 36% { opacity: 1; } 37%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes spk-rich-joy { 0%, 36% { opacity: 0; } 37%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes spk-rich-spark { 0%, 38% { opacity: 0; } 46%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes spk-rich-pose { 0%, 34% { transform: rotate(4deg); } 42% { transform: translateY(-5px) rotate(-5deg); } 50%, 86% { transform: translateY(-2px) rotate(-4deg); } 96%, 100% { transform: rotate(4deg); } }

/* Parcel (Curierat): Spark pops out of a shipping box */
.spk-flap { fill: #c9975f; stroke: #6b4a2a; stroke-width: 1.2; stroke-linejoin: round; transition: transform 0.3s var(--spk-spring); }
.spk-flap-back { fill: #9c7246; }
.spk-flap-left { transform-origin: 50px 55px; }
.spk-flap-right { transform-origin: 116px 55px; }
.spk-box-inside { fill: #2a1d12; }
.spk-box-side { fill: #8c6239; stroke: #6b4a2a; stroke-width: 1.2; stroke-linejoin: round; }
.spk-box-front { fill: #b5844f; stroke: #6b4a2a; stroke-width: 1.2; }
.spk-box-flap-front { fill: #c9975f; stroke: #6b4a2a; stroke-width: 1.2; stroke-linejoin: round; }
.spk-box-tape { fill: #dcbc8a; opacity: 0.85; }
.spk-box-label rect:first-child { fill: #f4f1ea; }
.spk-box-label path { fill: none; stroke: #2b2725; stroke-width: 1; }
.spk-box-label-line { fill: #2b2725; opacity: 0.5; }
.spk-parcel .spk-pilot-pose { transform-origin: 50% 100%; }

:is(.spk-root:hover, .spk-root.is-active) .spk-flap-left { transform: rotate(-16deg); }
:is(.spk-root:hover, .spk-root.is-active) .spk-flap-right { transform: rotate(16deg); }
:is(.spk-root:hover, .spk-root.is-active) .spk-parcel .spk-pilot-pose { transform: translateY(-11px) rotate(-4deg); }

/* Cart (Coș abandonat): Spark rides the cart back to checkout */
.spk-cart-basket { fill: rgb(14 14 18 / 0.55); stroke: #a7a6b0; stroke-width: 2; stroke-linejoin: round; }
.spk-cart-wire { fill: none; stroke: #a7a6b0; stroke-width: 1; opacity: 0.7; }
.spk-cart-frame { fill: none; stroke: #a7a6b0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spk-wheel { transform-box: fill-box; transform-origin: center; }
.spk-wheel circle { fill: #1d1c22; stroke: #a7a6b0; stroke-width: 2; }
.spk-wheel path { stroke: #a7a6b0; stroke-width: 1.2; }
.spk-speed { fill: none; stroke: var(--spk-glow); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transform: translateX(10px); transition: opacity 0.2s, transform 0.3s var(--spk-ease); }
.spk-cart-ride { transition: transform 0.35s var(--spk-spring); }
.spk-cart .spk-pilot-pose { transform-origin: 50% 100%; }

:is(.spk-root:hover, .spk-root.is-active) .spk-cart-ride { transform: translateX(8px); }
:is(.spk-root:hover, .spk-root.is-active) .spk-wheel { animation: spk-spin 0.5s linear infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-speed { opacity: 1; transform: none; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cart .spk-pilot-pose { transform: translateY(-2px) rotate(-7deg); }

@keyframes spk-spin { to { transform: rotate(360deg); } }

/* Confirm (Anti-Retur): Spark slams the confirm button */
.spk-btn-base-side { fill: #1d1c22; stroke: var(--spk-edge); stroke-width: 1.4; }
.spk-btn-base-top { fill: #2c2b33; stroke: var(--spk-edge); stroke-width: 1.4; }
.spk-btn-cap-side { fill: #00a347; }
.spk-btn-cap-top { fill: #00ea65; }
.spk-btn-check { fill: none; stroke: #053d1e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.spk-burst { opacity: 0; transform-box: fill-box; transform-origin: 50% 80%; transform: scale(0.4); }
.spk-burst-badge { fill: #00ea65; }
.spk-burst-check { fill: none; stroke: #053d1e; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spk-burst-rays { fill: none; stroke: #00ea65; stroke-width: 1.8; stroke-linecap: round; }
.spk-paw-press { animation: spk-bob 2.4s ease-in-out infinite; }
.spk-confirm .spk-pilot-pose { transform-origin: 50% 100%; }

:is(.spk-root:hover, .spk-root.is-active) .spk-paw-press { animation: spk-press 1.2s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-btn-cap { animation: spk-cap-down 1.2s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-burst { animation: spk-burst 1.2s infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-confirm .spk-pilot-pose { transform: rotate(-4deg); }

@keyframes spk-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
@keyframes spk-press { 0% { transform: none; } 25%, 40% { transform: translateY(12px); } 70%, 100% { transform: none; } }
@keyframes spk-cap-down { 0%, 20% { transform: none; } 28%, 40% { transform: translateY(3px); } 55%, 100% { transform: none; } }
@keyframes spk-burst {
  0%, 27% { opacity: 0; transform: translateY(6px) scale(0.4); }
  38% { opacity: 1; transform: scale(1.12); }
  48%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(1); }
}

/* Engine mark: Spark plays with the Softsite Engine logo */
.spk-engine-blade { fill: #ffffff; }
.spk-engine-bolt { fill: #1ce783; stroke: #1ce783; stroke-width: 4; stroke-linejoin: round; }
.spk-rotor { transform-origin: 0 0; }

.spk-stick { fill: none; stroke: #c9c8d1; stroke-width: 2.4; stroke-linecap: round; }
.spk-rotor-pin { transform: translate(96px, 30px); animation: spk-pin-spin 2.6s linear infinite; }
.spk-swoosh { fill: none; stroke: var(--spk-glow); stroke-width: 1.8; stroke-linecap: round; opacity: 0; transform-origin: 96px 30px; transition: opacity 0.2s; }
.spk-pinwheel .spk-speed { opacity: 0; transform: translateX(8px); }
.spk-pinwheel .spk-pilot-pose { transform-origin: 50% 100%; }

:is(.spk-root:hover, .spk-root.is-active) .spk-rotor-pin { animation-duration: 0.32s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-pinwheel .spk-swoosh { opacity: 1; animation: spk-swoosh 0.5s linear infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-pinwheel .spk-speed { opacity: 1; transform: none; }
:is(.spk-root:hover, .spk-root.is-active) .spk-pinwheel .spk-pilot-pose { animation: spk-run 0.32s ease-in-out infinite; }

@keyframes spk-pin-spin { from { transform: translate(96px, 30px) rotate(0deg); } to { transform: translate(96px, 30px) rotate(360deg); } }
@keyframes spk-swoosh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spk-run { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-2.5px); } }

.spk-rotor-toss { animation: spk-toss 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.spk-toss-shadow { fill: rgb(0 0 0 / 0.35); transform-box: fill-box; transform-origin: center; animation: spk-toss-shadow 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.spk-paw-catch { animation: spk-catch 2.2s infinite; }
.spk-toss .spk-eyes-idle { animation: spk-follow 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.spk-toss .spk-eyes-idle .spk-pill { animation: none; }
.spk-toss .spk-pilot-pose { transform-origin: 50% 100%; animation: spk-toss-body 2.2s infinite; }

:is(.spk-root:hover, .spk-root.is-active) .spk-toss :is(.spk-rotor-toss, .spk-toss-shadow, .spk-paw-catch, .spk-pilot-pose) { animation-duration: 1.3s; }

@keyframes spk-toss {
  0% { transform: translate(60px, 60px) rotate(0deg); }
  46% { transform: translate(60px, 22px) rotate(360deg); }
  92%, 100% { transform: translate(60px, 60px) rotate(720deg); }
}
@keyframes spk-toss-shadow { 0%, 92%, 100% { transform: scale(1); opacity: 0.9; } 46% { transform: scale(0.45); opacity: 0.35; } }
@keyframes spk-catch { 0%, 100% { transform: translateY(1.5px); } 8% { transform: translateY(-3px); } 20%, 84% { transform: none; } 92% { transform: translateY(2.5px); } }
@keyframes spk-follow { 0%, 92%, 100% { transform: translateY(0); } 46% { transform: translateY(-3.5px); } }
@keyframes spk-toss-body { 0%, 100% { transform: scaleY(0.97); } 8% { transform: translateY(-2px) scaleY(1.03); } 30%, 80% { transform: none; } 92% { transform: scaleY(0.96); } }

/* Sales & cold calling: headset, call card, sales bars */
.spk-call-bg { fill: #1f2c33; stroke: #2a3942; stroke-width: 0.8; }
.spk-call-icon { fill: #6b6a75; transform-box: fill-box; transform-origin: center; transition: fill 0.2s; }
.spk-call-handset { fill: #f7f7f7; transform-box: fill-box; transform-origin: center; animation: spk-ring 0.5s ease-in-out infinite; transition: fill 0.2s; }
.spk-call-rings { fill: none; stroke: #8696a0; stroke-width: 1.2; stroke-linecap: round; animation: spk-flicker 0.5s infinite; }
.spk-call-title { font: 700 6.2px "Instrument Sans", system-ui, sans-serif; fill: #e9edef; transition: opacity 0.15s; }
.spk-call-live { opacity: 0; fill: #00ea65; }
.spk-call-sub { font: 500 4.6px "Instrument Sans", system-ui, sans-serif; fill: #8696a0; }
.spk-headband { fill: none; stroke: #5b5a66; stroke-width: 3.2; stroke-linecap: round; }
.spk-headpad { fill: #3a3942; stroke: var(--spk-edge); stroke-width: 0.8; }
.spk-earcup { fill: #3a3942; stroke: #5b5a66; stroke-width: 1.2; }
.spk-mic-boom { fill: none; stroke: #2a2930; stroke-width: 2; stroke-linecap: round; }
.spk-mic { fill: #2a2930; }
.spk-voice { fill: none; stroke: var(--spk-ink); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.spk-chart-base { fill: none; stroke: #3a3942; stroke-width: 1.4; stroke-linecap: round; }
.spk-bar { fill: #4a4952; transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.45s var(--spk-spring), fill 0.3s; transition-delay: calc(var(--i) * 70ms); }
.spk-trend { fill: none; stroke: #00ea65; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 92; stroke-dashoffset: 92; transition: stroke-dashoffset 0.2s; }

:is(.spk-root:hover, .spk-root.is-active) .spk-call-icon { fill: #00ea65; }
:is(.spk-root:hover, .spk-root.is-active) .spk-call-handset { fill: #053d1e; animation: none; }
:is(.spk-root:hover, .spk-root.is-active) .spk-call-rings { animation: none; opacity: 0; }
:is(.spk-root:hover, .spk-root.is-active) .spk-call-dialing { opacity: 0; }
:is(.spk-root:hover, .spk-root.is-active) .spk-call-live { opacity: 1; }
:is(.spk-root:hover, .spk-root.is-active) .spk-voice { animation: spk-voice 0.7s ease-out infinite; }
:is(.spk-root:hover, .spk-root.is-active) .spk-bar { transform: scaleY(var(--grow)); fill: var(--spk-body); }
:is(.spk-root:hover, .spk-root.is-active) .spk-bar-top { fill: #00ea65; }
:is(.spk-root:hover, .spk-root.is-active) .spk-trend { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s 0.35s; }

@keyframes spk-ring { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes spk-voice { 0% { opacity: 0; transform: translateX(2px); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(-2.5px); } }

/* Booking a session: Spark taps a free slot */
.spk-cal { fill: #1b1a21; stroke: #2f2e36; stroke-width: 1.4; }
.spk-cal-head { fill: var(--spk-body); }
.spk-cal-month { font: 700 5.4px "Instrument Sans", system-ui, sans-serif; fill: #ffffff; text-anchor: middle; letter-spacing: 0.7px; }
.spk-cal-ring { fill: #c9c8d1; stroke: var(--spk-edge); stroke-width: 0.8; }
.spk-cal-cell { fill: #2b2a33; }
.spk-cal-slot { stroke: var(--spk-glow); stroke-width: 1.2; animation: spk-slot 1.6s ease-in-out infinite; }
.spk-cal-check { fill: none; stroke: #053d1e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.spk-cal-pop { fill: none; stroke: #00ea65; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spk-time-chip { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(5px) scale(0.7); }
.spk-time-chip rect { fill: #00ea65; }
.spk-time-chip text { font: 700 6.4px "Instrument Sans", system-ui, sans-serif; fill: #053d1e; text-anchor: middle; }
.spk-paw-book { animation: spk-bob 2.4s ease-in-out infinite; }
.spk-booking .spk-pilot-pose { transform-origin: 50% 100%; }

:is(.spk-root:hover, .spk-root.is-active) .spk-paw-book { animation: spk-book 0.9s forwards; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cal-slot { animation: none; fill: #00ea65; stroke: #00ea65; transition: fill 0.12s 0.38s, stroke 0.12s 0.38s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cal-check { opacity: 1; transition: opacity 0.12s 0.44s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-cal-pop { animation: spk-cal-pop 0.6s 0.38s both; }
:is(.spk-root:hover, .spk-root.is-active) .spk-time-chip { opacity: 1; transform: none; transition: opacity 0.15s 0.55s, transform 0.3s var(--spk-spring) 0.55s; }
:is(.spk-root:hover, .spk-root.is-active) .spk-booking .spk-eyes-excited { opacity: 0; }
:is(.spk-root:hover, .spk-root.is-active) .spk-booking .spk-eyes-happy { opacity: 1; }
:is(.spk-root:hover, .spk-root.is-active) .spk-booking .spk-pilot-pose { transform: rotate(-3deg); }

@keyframes spk-slot { 0%, 100% { stroke-opacity: 0.35; } 50% { stroke-opacity: 1; } }
@keyframes spk-book {
  0% { transform: none; }
  38% { transform: translate(36.4px, 2.2px); }
  46% { transform: translate(36.4px, 3.8px) scale(0.92); }
  64%, 100% { transform: translate(27.4px, 11.2px); }
}
@keyframes spk-cal-pop { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.5); } }

@media (prefers-reduced-motion: reduce) {
  .spk-root *, .spk-root { animation: none !important; transition: none !important; }
}