/* The animated, voiced "team show" (section 01). Built by show.js into #hshow.
   The stage keeps fixed internal coordinates (1280x720 desktop, 400x900 phone) and is scaled to the container. */
.hs { position: relative; }
.hs-box { position: relative; width: 100%; overflow: hidden; border-radius: 14px; border: 1px solid var(--rule, rgba(20,17,15,.2)); background: #fdf3df; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.hs-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; font-family: var(--sans); color: #2b2b2b; background: #fdf3df; user-select: none; -webkit-user-select: none; }
/* the camera: the whole room lives in here and zooms into an animal's spot for its work scene */
.hs-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: linear-gradient(#fdf3df 0 var(--floor), #e7c99a var(--floor) 100%); transition: transform .6s cubic-bezier(.45,0,.25,1); will-change: transform; }
.hs-cam::before { content: ""; position: absolute; left: 0; right: 0; top: var(--floor); bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0 158px, rgba(120,72,30,.18) 158px 160px), repeating-linear-gradient(0deg, transparent 0 46px, rgba(120,72,30,.12) 46px 48px); }
.hs-cam::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--floor) - 10px); height: 10px; background: #d9b07c; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.hs-stage * { box-sizing: border-box; }

/* room */
.hs-win { position: absolute; border: 8px solid #c98f55; border-radius: 10px; background: linear-gradient(#bfe6f5, #e6f6ea); overflow: hidden; }
.hs-win::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2px; background: #c98f55; }
.hs-win span { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; line-height: 1; }
.hs-board { position: absolute; background: #fff; border: solid #8a5a33; border-radius: 14px; box-shadow: 0 10px 0 rgba(0,0,0,.12); z-index: 1; }
.hs-btitle { position: absolute; left: 0; right: 0; text-align: center; font-weight: 800; color: #1f3f8a; z-index: 2; white-space: nowrap; }
.hs-col { position: absolute; border-radius: 8px; z-index: 1; }
.hs-col h4 { margin: 0; text-align: center; font-weight: 700; line-height: 1.2; display: grid; place-items: center; padding: 0 3px; }
.hs-col.c1 { background: #fff4c2; } .hs-col.c2 { background: #dcefff; } .hs-col.c3 { background: #dff5d8; } .hs-col.c4 { background: #ece2fb; }

/* task cards */
.hs-card { position: absolute; z-index: 5; background: #fff; border: 1.5px solid #9aa3b5; border-radius: 6px; display: flex; gap: 6px; align-items: center; padding: 4px 6px; line-height: 1.2;
  opacity: 0; transform: scale(.3); transition: left .9s cubic-bezier(.5,-.2,.3,1.3), top .9s cubic-bezier(.5,-.2,.3,1.3), transform .5s cubic-bezier(.3,1.6,.5,1), opacity .35s, border-color .3s, background .3s; }
.hs-card img { border-radius: 50%; object-fit: cover; flex: none; }
.hs-card .lb { min-width: 0; overflow-wrap: anywhere; }
.hs-card.vis { opacity: 1; transform: none; }
.hs-card.boss { transform: rotate(-6deg) scale(1.12); box-shadow: 0 8px 16px rgba(0,0,0,.22); z-index: 8; }
.hs-card .tg { position: absolute; right: -7px; top: -9px; font-style: normal; font-weight: 800; color: #fff; border-radius: 4px; padding: 1px 5px; font-size: 10px; transform: rotate(-8deg) scale(0); transition: transform .35s cubic-bezier(.3,1.8,.5,1); white-space: nowrap; }
.hs-card.appr .tg, .hs-card.ok .tg, .hs-card.bad .tg { transform: rotate(-8deg) scale(1); }
.hs-card.appr .tg { background: #c3271b; }
.hs-card.ok .tg { background: #2f7d4a; font-size: 12px; }
.hs-card.bad { border-color: #c3271b; background: #fde8e6; color: #c3271b; }
.hs-card.bad .tg { background: #c3271b; font-size: 12px; }
.hs-stamp { position: absolute; z-index: 9; border: 4px solid #c3271b; color: #c3271b; font-weight: 900; font-size: 24px; padding: 2px 10px; border-radius: 6px; background: rgba(255,255,255,.7); letter-spacing: .04em;
  opacity: 0; transform: rotate(-14deg) scale(2.6); pointer-events: none; }
.hs-stamp.slam { animation: hs-slam .45s cubic-bezier(.5,0,.6,1.4) forwards; }
@keyframes hs-slam { 0% { opacity: 0; transform: rotate(-14deg) scale(2.6); } 70% { opacity: 1; transform: rotate(-14deg) scale(.92); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } }

/* animals */
.hs-a { position: absolute; z-index: 6; text-align: center; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.hs-a .j { transition: transform .35s cubic-bezier(.3,1.7,.5,1); }
.hs-a .av { display: block; margin: 0 auto 4px; border-radius: 50%; object-fit: cover; background: #dbe8f7; box-shadow: 0 0 0 4px #fff, 0 6px 10px rgba(0,0,0,.18); transition: box-shadow .3s; }
.hs-a .av.emo { display: grid; place-items: center; line-height: 1; }
.hs-a b { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; }
.hs-a small { display: block; font-size: 11px; color: #6a6058; line-height: 1.25; white-space: nowrap; }
.hs-a:hover .av, .hs-a:focus-visible .av { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #8fb3e8, 0 6px 10px rgba(0,0,0,.18); }
.hs-a.talk { z-index: 7; }
.hs-a.talk .j { transform: translateY(-14px); }
.hs-a.talk .av { box-shadow: 0 0 0 4px #fff, 0 0 0 10px #f2a71b, 0 0 26px 10px rgba(242,167,27,.55), 0 10px 16px rgba(0,0,0,.2); }
.hs-a.tiger .tx { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.85); border-radius: 999px; padding: 4px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.hs-a.point .av { animation: hs-glow 1s ease-in-out infinite alternate; }
@keyframes hs-glow { from { box-shadow: 0 0 0 4px #fff, 0 0 0 10px #f2a71b, 0 0 12px 4px rgba(242,167,27,.4); } to { box-shadow: 0 0 0 4px #fff, 0 0 0 12px #f2a71b, 0 0 34px 16px rgba(242,167,27,.7); } }
.hs-a.glow .av { animation: hs-lion 1.1s ease-in-out infinite alternate; }
@keyframes hs-lion { from { box-shadow: 0 0 0 4px #fff, 0 0 0 9px #f6c945, 0 0 10px 4px rgba(246,201,69,.4); } to { box-shadow: 0 0 0 4px #fff, 0 0 0 12px #f6c945, 0 0 36px 18px rgba(246,201,69,.75); } }
.hs-a.wig .av { animation: hs-wig .3s ease-in-out 5 alternate; }
@keyframes hs-wig { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.hs-a.bnc { animation: hs-bnc .6s ease-in-out 6 alternate; animation-delay: var(--bd, 0s); }
@keyframes hs-bnc { from { transform: translateY(0); } to { transform: translateY(-18px); } }

/* speech bubble + subtitles */
.hs-bub { position: absolute; z-index: 12; background: #fff; border: 2.5px solid #2b2b2b; border-radius: 16px; padding: 9px 14px; font-weight: 600; line-height: 1.35; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.3,1.7,.5,1); pointer-events: none; }
.hs-bub.on { opacity: 1; transform: none; }
.hs-bub::after { content: ""; position: absolute; border: 9px solid transparent; }
.hs-bub.up::after { top: 100%; left: var(--tx, 30px); margin-left: -9px; border-top: 13px solid #2b2b2b; }
.hs-bub.down::after { bottom: 100%; left: var(--tx, 30px); margin-left: -9px; border-bottom: 13px solid #2b2b2b; }
.hs-bub.right::after { right: 100%; top: var(--ty, 22px); margin-top: -9px; border-right: 13px solid #2b2b2b; }
.hs-bub.left::after { left: 100%; top: var(--ty, 22px); margin-top: -9px; border-left: 13px solid #2b2b2b; }
.hs-sub { position: absolute; left: 0; right: 0; bottom: 0; z-index: 14; background: rgba(20,17,15,.84); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 22px; line-height: 1.35; }
.hs-sub b { color: #f2a71b; margin-right: .5em; white-space: nowrap; }
.hs-sub .hint { color: #e9dcc4; font-weight: 400; }

/* overlay: rework arrow + Tiger's pointer */
.hs-ov { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; overflow: visible; }
.hs-ov path, .hs-ov line { fill: none; }
.hs-ov .rw { stroke: #c3271b; stroke-width: 3; stroke-dasharray: 9 7; animation: hs-march 1s linear infinite; }
.hs-ov .rwt { fill: #c3271b; font-weight: 800; font-family: var(--sans); }
.hs-ov .pt { stroke: #f2a71b; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 10; animation: hs-march .7s linear infinite; }
@keyframes hs-march { to { stroke-dashoffset: -32; } }

/* the boss's phone */
.hs-phone { position: absolute; z-index: 4; background: #1d1d1f; border-radius: 22px; padding: 9px; box-shadow: 0 8px 14px rgba(0,0,0,.2); }
.hs-scr { position: relative; height: 100%; border-radius: 14px; background: #e7eef6; padding: 7px 7px 44px; overflow: hidden; display: flex; flex-direction: column; }
.hs-scr > b { font-size: 11px; display: block; padding-bottom: 4px; border-bottom: 1px solid #cdd7e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; overflow: hidden; padding-top: 4px; }
.hs-msg { white-space: pre-line; font-size: 10.5px; line-height: 1.3; border-radius: 10px; padding: 5px 7px; background: #fff; color: #333; max-width: 92%; align-self: flex-start; animation: hs-pop .35s cubic-bezier(.3,1.6,.5,1); }
.hs-msg.me { background: #4a90e2; color: #fff; align-self: flex-end; }
.hs-msg.old { animation: none; }
@keyframes hs-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.hs-dep { position: absolute; left: 10px; right: 10px; bottom: 8px; background: #c3271b; color: #fff; text-align: center; border-radius: 8px; padding: 7px 0; font-weight: 800; font-size: 12.5px; box-shadow: 0 3px 0 #8e1b12; transition: transform .1s, box-shadow .1s, background .3s; }
.hs-dep.pulse { animation: hs-pulse .8s ease-in-out infinite alternate; }
@keyframes hs-pulse { from { transform: scale(1); box-shadow: 0 3px 0 #8e1b12, 0 0 0 0 rgba(195,39,27,.5); } to { transform: scale(1.07); box-shadow: 0 3px 0 #8e1b12, 0 0 0 9px rgba(195,39,27,0); } }
.hs-dep.press { transform: translateY(3px) scale(.96); box-shadow: 0 0 0 #8e1b12; }
.hs-dep.done { background: #2f7d4a; box-shadow: 0 3px 0 #1d5531; }

/* Monkey's desk */
.hs-desk { position: absolute; z-index: 3; background: #a86f3e; border-radius: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.hs-lap { position: absolute; z-index: 4; background: #2b2f38; border: 4px solid #545a66; border-radius: 7px 7px 2px 2px; color: #7CFC9A; font: 10px/1.35 var(--mono); padding: 3px 5px; overflow: hidden; white-space: pre; }
.hs-lap .cur { display: inline-block; width: 6px; height: 10px; background: #7CFC9A; vertical-align: -1px; animation: hs-blink 1s steps(1) infinite; }
@keyframes hs-blink { 50% { opacity: 0; } }

/* props */
.hs-prop { position: absolute; z-index: 8; line-height: 1; opacity: 0; transform: scale(.3); transition: opacity .3s, transform .4s cubic-bezier(.3,1.7,.5,1); pointer-events: none; }
.hs-prop.on { opacity: 1; transform: none; }
.hs-note.on .pen { display: inline-block; animation: hs-write .35s ease-in-out 8 alternate; }
@keyframes hs-write { from { transform: translate(-4px, 2px) rotate(-10deg); } to { transform: translate(6px, -2px) rotate(8deg); } }
.hs-mag.on { animation: hs-peek 1.6s ease-in-out 2 alternate; }
@keyframes hs-peek { from { transform: translateX(0); } to { transform: translateX(-10px) rotate(-12deg); } }
.hs-ro { position: absolute; z-index: 8; background: #2f5fb3; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.hs-ro.on { opacity: 1; }

/* the live site pop-up */
.hs-pop { position: absolute; z-index: 11; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.35); border: 1px solid #c9ccd3; display: flex; flex-direction: column;
  opacity: 0; transform: scale(.2) translateY(60px); transition: opacity .35s, transform .6s cubic-bezier(.3,1.5,.5,1); pointer-events: none; }
.hs-pop.on { opacity: 1; transform: none; }
.hs-pop { transition: opacity .35s, transform .6s cubic-bezier(.3,1.5,.5,1), left .6s ease-in-out, top .6s ease-in-out, width .6s ease-in-out, height .6s ease-in-out; }
.hs-pop .tile { display: none; }
.hs-pop.mini { z-index: 4; border: 2px solid #2f7d4a; box-shadow: 0 4px 10px rgba(0,0,0,.18); justify-content: center; }
.hs-pop.mini .bar, .hs-pop.mini img { display: none; }
.hs-pop.mini .tile { display: block; padding: 4px 6px; text-align: center; font: 1em/1.3 var(--mono); color: #2b3140; overflow-wrap: anywhere; }
.hs-pop.mini .tile b { display: block; font-family: var(--sans); color: #2f7d4a; font-size: 1.2em; }
.hs-pop .bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #eceef2; border-bottom: 1px solid #d6d9e0; flex: none; }
.hs-pop .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; flex: none; } .hs-pop .bar i + i { background: #febc2e; } .hs-pop .bar i + i + i { background: #28c840; }
.hs-pop .url { flex: 1; min-width: 0; margin-left: 6px; background: #fff; border-radius: 999px; padding: 3px 10px; font: 12px var(--mono); color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-pop img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; display: block; }
.hs-conf { position: absolute; z-index: 13; top: -20px; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; animation: hs-fall var(--d, 2.6s) cubic-bezier(.3,.4,.6,1) forwards; animation-delay: var(--dl, 0s); }
@keyframes hs-fall { to { transform: translate(var(--dx, 0), var(--fall, 760px)) rotate(var(--r, 540deg)); } }

/* start overlay + controls (not scaled) */
.hs-start { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(20,17,15,.28); transition: opacity .3s; }
.hs-start[hidden] { display: none; }
.hs-start { pointer-events: none; } .hs-start button { pointer-events: auto; }
.hs-start button { font: 800 clamp(17px, 2.6vw, 26px) var(--sans); color: #fff; background: #c3271b; border: 0; border-radius: 999px; padding: .75em 1.5em; cursor: pointer; box-shadow: 0 6px 0 #8e1b12, 0 12px 24px rgba(0,0,0,.25); animation: hs-pulse2 1.4s ease-in-out infinite alternate; }
.hs-start button:active { transform: translateY(4px); box-shadow: 0 2px 0 #8e1b12; }
.hs-start button:disabled { opacity: .7; cursor: default; animation: none; }
@keyframes hs-pulse2 { to { transform: scale(1.05); } }
.hs-ctl { position: absolute; z-index: 16; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hs-ctl.mob { justify-content: center; left: 6px; right: 6px; }
.hs-ctl button { font: 700 13px var(--sans); border-radius: 999px; padding: 7px 12px; cursor: pointer; background: #fff; color: #333; border: 1.5px solid #999; white-space: nowrap; line-height: 1.1; }
.hs-ctl button.pri { background: #c3271b; color: #fff; border-color: #c3271b; }
.hs-ctl button:disabled { opacity: .45; cursor: default; }
.hs-ctl button .on { text-decoration: underline; text-underline-offset: 3px; }
.hs-ctl button .off { opacity: .55; font-weight: 400; }
.hs-ctl.mob { flex-wrap: nowrap; gap: 4px; }
.hs-ctl.mob button { padding: 6px 7px; font-size: 11px; }

/* pause freezes every running animation; noanim snaps the scene into place */
.hs-stage.paused *, .hs-stage.paused { animation-play-state: paused !important; }
.hs-stage.noanim *, .hs-stage.noanim *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hs-card { transition: opacity .3s, border-color .3s, background .3s; }
  .hs-card.boss { transform: rotate(-3deg); }
  .hs-a .j { transition: none; }
  .hs-a.talk .j { transform: none; }
  .hs-a.wig .av, .hs-a.bnc, .hs-mag.on, .hs-note.on .pen, .hs-dep.pulse, .hs-start button, .hs-ov .rw, .hs-ov .pt { animation: none; }
  .hs-dep.pulse { box-shadow: 0 3px 0 #8e1b12, 0 0 0 5px rgba(195,39,27,.35); }
  .hs-stamp.slam { animation: none; opacity: 1; transform: rotate(-14deg); }
  .hs-pop { transition: opacity .3s; transform: none; }
  .hs-prop { transition: opacity .3s; transform: none; }
  .hs-conf { display: none; }
  .hs-bub { transition: opacity .2s; transform: none; }
}

/* ---- v2: Tiger busy, patrols, props ---- */
.hs-a.tiger { transition: left 1s ease-in-out, top 1s ease-in-out; z-index: 7; }
.hs-a.tiger.busy small { color: #c25a14; font-weight: 700; }
.hs-a.walk .j { animation: hs-walk .22s ease-in-out infinite alternate; }
@keyframes hs-walk { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-8px) rotate(4deg); } }
.hs-anger { position: absolute; right: -8px; top: -10px; font-style: normal; line-height: 1; opacity: 0; transform: scale(.2); transition: opacity .2s, transform .3s cubic-bezier(.3,1.8,.5,1); pointer-events: none; }
.hs-a.glare .hs-anger { opacity: 1; transform: none; animation: hs-throb .5s ease-in-out infinite alternate; }
@keyframes hs-throb { to { transform: scale(1.25); } }
.hs-a.glare .av { box-shadow: 0 0 0 4px #fff, 0 0 0 9px #c3271b, 0 6px 10px rgba(0,0,0,.2); }
.hs-a.tap .av { animation: hs-tap .18s ease-in-out 4 alternate; }
@keyframes hs-tap { to { transform: translateX(12px) rotate(8deg); } }
.hs-a.sleep .av { transform: rotate(16deg) translateY(4px); filter: saturate(.55) brightness(.92); transition: transform .4s, filter .4s; }
.hs-a.awake .j { animation: hs-awake .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes hs-awake { 40% { transform: translateY(-30px); } }
.hs-a.think .av { animation: hs-think 1.2s ease-in-out infinite alternate; }
@keyframes hs-think { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.hs-zzz.on { animation: hs-zz 1.2s ease-in-out infinite alternate; }
@keyframes hs-zz { to { transform: translate(6px, -8px) scale(1.15); } }
.hs-banana { transform-origin: 30% 80%; }
.hs-banana.on { animation: hs-munch .4s ease-in-out infinite alternate; }
@keyframes hs-munch { to { transform: rotate(-14deg) translateY(-3px); } }

/* comment badge on a card */
.hs-card .cm { position: absolute; left: -8px; bottom: calc(100% + 4px); font-style: normal; font-weight: 700; font-size: 11px; white-space: nowrap; background: #fff8c4; color: #6b5300; border: 1.5px solid #c9a227; border-radius: 9px; padding: 1px 7px;
  opacity: 0; transform: scale(.3); transform-origin: left bottom; transition: opacity .25s, transform .35s cubic-bezier(.3,1.8,.5,1); pointer-events: none; }
.hs-card .cm.on { opacity: 1; transform: none; }
.hs-card .cm.done { background: #e3f3dc; color: #2f7d4a; border-color: #2f7d4a; }
.hs-card.boss .cm { font-size: 12.5px; }
.hs-card .lb small { display: block; font: 700 .78em var(--mono); color: #b07c00; }

/* progress badge: phase and gates still to approve */
.hs-prog { position: absolute; right: 10px; top: 8px; z-index: 13; background: rgba(255,253,247,.94); border: 1.5px solid #8a5a33; border-radius: 10px; padding: 5px 9px; line-height: 1.3; box-shadow: 0 2px 6px rgba(0,0,0,.12); max-width: 46%; }
.hs-prog .ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hs-prog .ph span { color: #6a6058; } .hs-prog .ph b { color: #c3271b; font-size: 1.15em; } .hs-prog .ph em { font-style: normal; font-weight: 700; }
.hs-prog .gs { display: flex; gap: 4px; margin: 3px 0 2px; flex-wrap: wrap; }
.hs-prog .gs i { font-style: normal; font-size: .88em; border-radius: 999px; padding: 0 6px; background: #eee6d6; color: #6a6058; white-space: nowrap; transition: background .3s, color .3s; }
.hs-prog .gs i.ok { background: #2f7d4a; color: #fff; }
.hs-prog .gl { font-size: .88em; color: #4a433c; white-space: nowrap; }

/* ---- the work scenes ---- */
.hs-vig { position: absolute; z-index: 9; background: #fffdf7; border: 3px solid #2b2b2b; border-radius: 14px; box-shadow: 0 10px 22px rgba(0,0,0,.22); padding: 4px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s cubic-bezier(.3,1.5,.5,1); pointer-events: none; }
.hs-vig.on { opacity: 1; transform: none; }
.hs-vig svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vsv text { font-family: var(--sans); fill: #2b3140; }
.vsv .v-c { text-anchor: middle; }
.vsv .v-s { font-size: 13px; font-weight: 600; } .vsv .v-m { font: 10.5px var(--mono); } .vsv .v-dim { fill: #6a6058; font-weight: 400; }
.vsv .v-q { font-size: 16px; font-weight: 900; fill: #c25a14; } .vsv .v-big { font-size: 34px; font-weight: 900; fill: #c25a14; }
.vsv .v-ok { font-size: 15px; font-weight: 800; fill: #2f7d4a; } .vsv .v-ok2 { font-size: 15px; font-weight: 900; fill: #fff; }
.vsv .v-tk { font-size: 17px; font-weight: 800; fill: #1f3f8a; } .vsv .v-w { font-size: 12px; font-weight: 700; fill: #fff; } .vsv .v-g { font: 700 10px var(--mono); fill: #e85d9e; }
.vsv .v-emo { font-size: 44px; } .vsv .v-emo2 { font-size: 24px; } .vsv .v-emo3 { font-size: 26px; } .vsv .v-emo4 { font-size: 46px; }
.vsv .v-p1 { font-size: 7px; fill: #fff; } .vsv .v-p2 { font-size: 13px; font-weight: 900; fill: #fff; stroke: #2b2b2b; stroke-width: 2.6px; paint-order: stroke; }
.vsv * { transform-box: fill-box; transform-origin: center; }
.v-pop { animation: v-pop .45s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes v-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
.v-fade { animation: v-fade .5s ease both; }
@keyframes v-fade { from { opacity: 0; } }
.v-out { opacity: 0; animation: v-out .35s ease both; }
@keyframes v-out { from { opacity: 1; } to { opacity: 0; transform: scale(.2); } }
.v-draw { stroke-dasharray: 1; animation: v-draw .7s ease-out both; }
@keyframes v-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.v-fill { fill: var(--c); animation: v-fill .6s ease both; }
@keyframes v-fill { from { fill: #d5d8de; } to { fill: var(--c); } }
.v-static * { animation: none !important; }
.v-hl { animation: v-hl .6s ease-in-out 1.2s 4 alternate; }
@keyframes v-hl { to { filter: drop-shadow(0 0 6px #e85d9e); } }
.v-nod { animation: v-nod .35s ease-in-out .8s 6 alternate; transform-origin: center bottom; }
@keyframes v-nod { to { transform: rotate(12deg) translateY(2px); } }
.v-drop { animation: v-drop .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes v-drop { from { opacity: 0; transform: translateY(-60px) rotate(-10deg); } to { opacity: 1; transform: none; } }
.v-pin { animation: v-pin .4s cubic-bezier(.5,0,.6,1.6) both; }
@keyframes v-pin { from { opacity: 0; transform: translateY(-40px) scale(1.6); } to { opacity: 1; transform: none; } }
.v-pen { animation: v-pen 3.4s ease-in-out both; }
@keyframes v-pen { 0% { transform: translate(-240px, -160px); } 25% { transform: translate(-150px, -150px); } 50% { transform: translate(-200px, -60px); } 75% { transform: translate(-90px, -50px); } 100% { transform: none; } }
.v-scroll { transform-box: view-box; animation: v-scroll 3.6s linear both; }
@keyframes v-scroll { from { transform: translateY(0); } to { transform: translateY(-140px); } }
.v-grow { fill: #f2a71b; transform-origin: left center; animation: v-grow 3s ease-in-out .4s both, v-green .3s 3.4s both; }
@keyframes v-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v-green { to { fill: #2f7d4a; } }
.v-scr { opacity: 0; } .v-scr0 { animation: v-scr0 3.6s steps(1) both; } .v-scr1 { animation: v-scr1 3.6s steps(1) both; }
@keyframes v-scr0 { 0%, 33% { opacity: 1; } 34%, 66% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes v-scr1 { 0%, 33% { opacity: 0; } 34%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
.v-tap { fill: rgba(47,95,179,.35); stroke: #2f5fb3; stroke-width: 2; opacity: 0; animation: v-tap .6s ease-out both; }
@keyframes v-tap { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.8); } }
.v-crawl { animation: v-crawl .5s ease-in-out infinite alternate; }
@keyframes v-crawl { to { transform: translate(6px, -3px) rotate(10deg); } }
.v-net { transform-origin: 282px 206px; transform-box: view-box; animation: v-net 1s ease-in-out 1.6s 2 alternate both; }
@keyframes v-net { from { transform: rotate(0); } 50% { transform: rotate(-38deg); } to { transform: rotate(-18deg) translate(-30px, 20px); } }
.v-radar { transform-box: view-box; transform-origin: 54px 76px; animation: v-spin 1.2s linear infinite; }
@keyframes v-spin { to { transform: rotate(360deg); } }
.v-shield { animation: v-shield .5s ease-in-out .8s 3 alternate both; }
@keyframes v-shield { to { transform: scale(1.18); filter: drop-shadow(0 0 6px #2f5fb3); } }
.v-needle { transform-box: view-box; transform-origin: 246px 96px; animation: v-needle 3.2s ease-in-out .4s both; }
@keyframes v-needle { 0% { transform: rotate(-80deg); } 45% { transform: rotate(78deg); } 60% { transform: rotate(70deg); } 100% { transform: rotate(-45deg); } }
.v-fly { animation: v-fly .7s cubic-bezier(.4,0,.3,1) both; }
@keyframes v-fly { from { opacity: 0; transform: translate(-190px, -120px) rotate(-40deg); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
.v-ring { animation: v-ring .12s linear infinite alternate; }
@keyframes v-ring { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.v-waves { animation: v-fade .5s ease-in-out infinite alternate; }
.v-magx { animation: v-magx 2.4s ease-in-out .9s infinite alternate both; }
@keyframes v-magx { from { transform: translate(-30px, -50px); } to { transform: translate(110px, -10px); } }
.v-magx2 { animation: v-magx2 3s ease-in-out .2s infinite alternate both; }
@keyframes v-magx2 { 0% { transform: translate(0, -40px); } 50% { transform: translate(140px, 30px); } 100% { transform: translate(60px, 60px); } }
.v-finger { animation: v-finger 2.4s ease-in-out .4s both; }
@keyframes v-finger { 0% { transform: translate(-6px, -24px); } 33% { transform: translate(6px, -58px); } 66% { transform: translate(-14px, 44px); } 100% { transform: translate(0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .hs-cam { transition: none; }
  .hs-a.tiger { transition: none; }
  .hs-a.walk .j, .hs-a.tap .av, .hs-a.awake .j, .hs-a.think .av, .hs-zzz.on, .hs-banana.on, .hs-a.glare .hs-anger { animation: none; }
  .vsv * { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
  .v-radar, .v-ring, .v-waves, .v-crawl { animation: none !important; }
  .hs-vig { transition: opacity .3s; transform: none; }
}