/* Finn, the Baitproof fish: a little scam-spotting friend who swims around the page, can be picked up and moved, and reacts to what you check.
   Drawn in SVG (mascot.js), coloured from the site's own tokens, calm for "reduce motion". No inline styles: the script only sets transforms. */

.finn-root{position:fixed;left:0;top:0;z-index:20;width:var(--fw,128px);height:var(--fh,93px);margin:0;padding:0;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;
  will-change:transform;outline:none}
.finn-root:active,.finn-root.grabbed{cursor:grabbing}
.finn-root.moving:not(.grabbed){pointer-events:none} /* swimming on his own, he never catches a click meant for the page; he can be picked up the moment he stops */
.finn-root:focus-visible .finn-body{filter:drop-shadow(0 0 0 transparent);outline:3px solid var(--brand);outline-offset:6px;border-radius:50%}
.finn-root.popin{animation:finn-in .5s var(--ease) both}
@keyframes finn-in{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.finn-body{position:absolute;inset:0;transform-origin:50% 50%;transition:filter .3s}
.finn-body svg{width:100%;height:100%;display:block;overflow:visible;pointer-events:none;filter:drop-shadow(0 10px 14px color-mix(in srgb,var(--brand) 38%,transparent))}
.finn-root.hop .finn-body svg{animation:finn-hop .55s var(--ease)}
@keyframes finn-hop{0%{translate:0 0}35%{translate:0 -18px}100%{translate:0 0}}

/* the artwork's colours */
.finn-root{--f-body:#B7A0F3;--f-shade:#9A80E4;--f-belly:#EDE5FD;--f-fin:#8D70DA;--f-ink:#2B1B55;--f-blush:#F6B9DB;--f-spark:#FFE9A8}
@media (prefers-color-scheme:dark){.finn-root{--f-body:#B9A4F6;--f-shade:#9C84E8;--f-belly:#F0E9FF;--f-fin:#8A6FDF;--f-ink:#241546}}
.finn .f-body{fill:var(--f-body)}.finn .f-belly{fill:var(--f-belly)}.finn .f-fin{fill:var(--f-fin)}.finn .f-shade{fill:var(--f-shade)}
.finn .f-white{fill:#fff}.finn .f-ink{fill:var(--f-ink)}.finn .f-line{fill:none;stroke:var(--f-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.finn .f-blush{fill:var(--f-blush);opacity:.55}.finn .f-spark{fill:var(--f-spark)}
.finn .f-badge{fill:#fff}.finn .f-check{fill:none;stroke:var(--brand);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.finn .f-lens{fill:color-mix(in srgb,#fff 55%,transparent);stroke:var(--f-ink);stroke-width:3.4}.finn .f-handle{stroke:var(--f-ink);stroke-width:5;stroke-linecap:round}
.finn .f-bub{fill:none;stroke:color-mix(in srgb,#fff 80%,var(--brand));stroke-width:2;opacity:.85}

/* life: float, wag, flap, blink */
.finn .f-all{animation:finn-bob 3.4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes finn-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.finn .f-tail{transform-origin:54px 64px;transform-box:view-box;animation:finn-wag 1.5s ease-in-out infinite}
.finn-root.moving .f-tail{animation-duration:.42s}
@keyframes finn-wag{0%,100%{rotate:-9deg}50%{rotate:9deg}}
.finn .f-pec{transform-origin:94px 76px;transform-box:view-box;animation:finn-flap 1.8s ease-in-out infinite}
.finn-root.moving .f-pec{animation-duration:.5s}
@keyframes finn-flap{0%,100%{rotate:6deg}50%{rotate:-14deg}}
.finn .f-eyeset{transform-box:fill-box;transform-origin:center;animation:finn-blink 5.2s infinite}
.finn .f-pupil{transform-box:fill-box;transform-origin:center}
.m-grab .f-pupil{scale:.62}.m-alert .f-pupil{scale:.78}
@keyframes finn-blink{0%,94%,100%{scale:1 1}97%{scale:1 .08}}
.finn .f-bubs circle{animation:finn-rise 3s ease-in infinite;transform-box:fill-box;transform-origin:center}
.finn .f-bubs circle:nth-child(2){animation-delay:1s}.finn .f-bubs circle:nth-child(3){animation-delay:2s}
@keyframes finn-rise{0%{translate:0 0;opacity:0;scale:.5}15%{opacity:.9}100%{translate:6px -34px;opacity:0;scale:1.1}}
.finn .f-sparks path{transform-box:fill-box;transform-origin:center;animation:finn-twinkle 1.1s ease-in-out infinite}
.finn .f-sparks path:nth-child(2){animation-delay:.35s}.finn .f-sparks path:nth-child(3){animation-delay:.7s}
@keyframes finn-twinkle{0%,100%{scale:.4;opacity:.3}50%{scale:1;opacity:1}}
.finn .f-mark{animation:finn-shake .5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes finn-shake{0%,100%{rotate:-6deg}50%{rotate:6deg}}

/* moods: only the matching face parts are shown */
.finn .on-idle,.finn .on-happy,.finn .on-alert,.finn .on-think,.finn .on-grab,.finn .on-care{display:none}
.m-idle .on-idle{display:inline}.m-happy .on-happy{display:inline}.m-alert .on-alert{display:inline}.m-think .on-think{display:inline}.m-grab .on-grab{display:inline}.m-care .on-care{display:inline}
.m-happy .off-happy,.m-grab .off-grab{display:none}
.m-grab .finn-body{scale:1.06 .94}
.finn-root.m-grab .f-tail{animation-duration:.25s}

/* what he says */
.finn-bubble{position:fixed;left:0;top:0;z-index:21;max-width:min(17rem,calc(100vw - 24px));padding:12px 16px;border-radius:18px;background:var(--glass-strong,var(--surface));color:var(--ink);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--glass-line,var(--line));box-shadow:var(--shadow-up,0 10px 30px rgba(0,0,0,.15));
  font:600 .95rem/1.4 var(--sans);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;will-change:transform}
.finn-bubble.on{opacity:1;visibility:visible}
.finn-bubble::after{content:"";position:absolute;width:14px;height:14px;background:inherit;border:inherit;border-width:0 1px 1px 0;transform:rotate(45deg);bottom:-8px;left:var(--tail,24px)}
.finn-bubble.below::after{bottom:auto;top:-8px;border-width:1px 0 0 1px}
.finn-bubble b{color:var(--brand-deep,var(--brand))}

@media (max-width:560px){.finn-bubble{font-size:.9rem;padding:10px 14px}}
@media (prefers-reduced-motion:reduce){
  .finn .f-all,.finn .f-tail,.finn .f-pec,.finn .f-bubs circle,.finn .f-mark{animation:none}.finn .f-bubs{display:none}
  .finn-root.popin{animation:none}.finn-root.hop .finn-body svg{animation:none}.finn-bubble{transition:none}}