/* Icons of the public site (markup in site/hi.js). At rest every icon shows its finished picture. Each one plays once, in under a second,
   when it comes into view (class is-playing, added by motion.js), or when the element around it has class hi-trigger and is pointed at or
   focused. Nothing loops. Reduced motion shows the picture and nothing else. */
svg.hi { display: block; flex: none; width: 1em; height: 1em; overflow: visible; stroke: none; fill: none; --t: #0E8F7E; --d: #0A2E2B; --g: #E9B44C; --pl: #EEF4F0; }
svg.hi .t { fill: var(--t); } svg.hi .d { fill: var(--d); } svg.hi .g { fill: var(--g); }
svg.hi .ts, svg.hi .ds, svg.hi .gs, svg.hi .ik, svg.hi .pl { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
svg.hi .ts { stroke: var(--t); } svg.hi .ds { stroke: var(--d); } svg.hi .gs { stroke: var(--g); } svg.hi .ik { stroke: #0A2E2B; } svg.hi .pl { stroke: var(--pl); stroke-width: 5; }
.on-dark svg.hi { --d: #E6F0EC; --t: #2CC7AE; --pl: #0A2E2B; }
:root[dir="rtl"] svg.hi-s-pipe, :root[dir="rtl"] svg.hi-s-eng { transform: scaleX(-1); }   /* work moves from right to left in Arabic and Urdu */

/* parts that move */
.hi-s-acc .cl, .hi-s-acc .cr { transform-box: fill-box; transform-origin: center bottom; }
.hi-s-acc .b1, .hi-s-acc .b2 { transform-box: fill-box; transform-origin: center; }
.hi-s-inv .l1, .hi-s-inv .l2 { transform-box: fill-box; transform-origin: left center; }
.hi-s-inv .stamp, .hi-s-pipe .deal, .hi-s-stock .crate, .hi-s-people .joiner, .hi-s-clock .mark, .hi-s-eng .doc, .hi-s-docs .file, .hi-s-chat .reply, .hi-s-access .grant, .hi-s-tasks .pill, .hi-s-rep .tip { transform-box: fill-box; transform-origin: center; }
.hi-s-chat .reply { transform-origin: right bottom; }
.hi-s-docs .file { transform-origin: center bottom; }
.hi-s-clock .hand { transform-box: view-box; transform-origin: 44px 46px; }
.hi-s-rep .br { transform-box: fill-box; transform-origin: center bottom; }
.hi-s-talk .w { transform-box: fill-box; transform-origin: center; }
.hi-s-access .pe { transform-box: fill-box; transform-origin: center bottom; }
.hi-s-chat .rl, .hi-s-inv .ck, .hi-s-clock .mark path, .hi-s-eng .ap, .hi-s-tasks .k1, .hi-s-tasks .k2, .hi-s-tasks .k3, .hi-s-rep .tr, .hi-s-access .sh, .hi-s-access .grant path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hi-s-people .lk, .hi-s-people .lk2 { stroke-dasharray: 1; }

@keyframes hs-draw { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes hs-write { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes hs-pop { 0% { transform: scale(.35); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hs-grow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes hs-acc-l { 0% { transform: scaleY(.55); } 70% { transform: scaleY(1.04); } 100% { transform: scaleY(1); } }
@keyframes hs-acc-r { 0% { transform: scaleY(.84); } 70% { transform: scaleY(.98); } 100% { transform: scaleY(1); } }
@keyframes hs-acc-b1 { 0% { transform: translateY(12px) rotate(-14deg) scaleX(.4); opacity: .3; } 60% { transform: translateY(-2px) rotate(2deg) scaleX(1.05); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes hs-acc-b2 { 0% { transform: translateY(-12px) rotate(14deg) scaleX(.4); opacity: .3; } 60% { transform: translateY(2px) rotate(-2deg) scaleX(1.05); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes hs-deal { 0% { transform: translate(-29px, 22px); } 45% { transform: translate(-29px, 22px); } 70% { transform: translate(-14px, 6px) scale(1.08); } 100% { transform: none; } }
@keyframes hs-crate { 0% { transform: translateY(-36px); opacity: .25; } 55% { transform: translateY(3px); opacity: 1; } 75% { transform: translateY(-2px); } 100% { transform: none; } }
@keyframes hs-nudge { 0%, 45% { transform: translateY(0); } 60% { transform: translateY(1.5px); } 100% { transform: translateY(0); } }
@keyframes hs-join { 0% { transform: translate(18px, 16px) scale(.3); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes hs-hand { 0% { transform: rotate(-160deg); } 100% { transform: rotate(0); } }
@keyframes hs-pill { 0% { fill: var(--t); transform: scale(.9); } 60% { transform: scale(1.1); } 100% { fill: var(--g); transform: scale(1); } }
@keyframes hs-doc { 0% { transform: translateX(-64px); } 28% { transform: translateX(-32px); } 52% { transform: translateX(-32px); } 86%, 100% { transform: none; } }
@keyframes hs-file { 0% { transform: translateY(-30px) rotate(-6deg); } 70% { transform: translateY(2px) rotate(0); } 100% { transform: none; } }
@keyframes hs-reply { 0% { transform: scale(.4); opacity: 0; } 65% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hs-wave { 0% { transform: scaleY(.3); } 35% { transform: scaleY(1.2); } 65% { transform: scaleY(.65); } 100% { transform: scaleY(1); } }
@keyframes hs-person { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* play conditions: a pointer or focus on a .hi-trigger around the icon, or .is-playing added by a script */
.hi-trigger:is(:hover, :focus-visible) .hi-s-acc .cl, .hi-s-acc.is-playing .cl { animation: hs-acc-l .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-acc .cr, .hi-s-acc.is-playing .cr { animation: hs-acc-r .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-acc .b1, .hi-s-acc.is-playing .b1 { animation: hs-acc-b1 .8s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-acc .b2, .hi-s-acc.is-playing .b2 { animation: hs-acc-b2 .8s cubic-bezier(.2, .7, .2, 1) .18s backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-inv .l1, .hi-s-inv.is-playing .l1 { animation: hs-write .3s cubic-bezier(.2, .7, .2, 1) backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-inv .l2, .hi-s-inv.is-playing .l2 { animation: hs-write .3s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-inv .stamp, .hi-s-inv.is-playing .stamp { animation: hs-pop .42s cubic-bezier(.3, 1.4, .5, 1) .5s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-inv .ck, .hi-s-inv.is-playing .ck { animation: hs-draw .24s ease-out .82s backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-pipe .deal, .hi-s-pipe.is-playing .deal { animation: hs-deal .9s cubic-bezier(.3, .8, .3, 1) backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-stock .crate, .hi-s-stock.is-playing .crate { animation: hs-crate .75s cubic-bezier(.4, 0, .6, 1) backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-stock .cx, .hi-s-stock.is-playing .cx { animation: hs-nudge .75s ease-out backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-people .joiner, .hi-s-people.is-playing .joiner { animation: hs-join .6s cubic-bezier(.3, 1.3, .5, 1) .25s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-people .lk2, .hi-s-people.is-playing .lk2 { animation: hs-draw .3s ease-out .1s backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-clock .hand, .hi-s-clock.is-playing .hand { animation: hs-hand .7s cubic-bezier(.3, .8, .3, 1) backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-clock .mark, .hi-s-clock.is-playing .mark { animation: hs-pop .4s cubic-bezier(.3, 1.4, .5, 1) .6s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-clock .mark path, .hi-s-clock.is-playing .mark path { animation: hs-draw .24s ease-out .85s backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-tasks .k1, .hi-s-tasks.is-playing .k1 { animation: hs-draw .22s ease-out backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-tasks .k2, .hi-s-tasks.is-playing .k2 { animation: hs-draw .22s ease-out .2s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-tasks .k3, .hi-s-tasks.is-playing .k3 { animation: hs-draw .22s ease-out .4s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-tasks .pill, .hi-s-tasks.is-playing .pill { animation: hs-pill .4s ease-out .62s backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-eng .doc, .hi-s-eng.is-playing .doc { animation: hs-doc 1s cubic-bezier(.4, 0, .2, 1) backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-eng .ap, .hi-s-eng.is-playing .ap { animation: hs-draw .25s ease-out .85s backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-rep .br, .hi-s-rep.is-playing .br { animation: hs-grow .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-rep .b2, .hi-s-rep.is-playing .b2 { animation-delay: .1s; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-rep .b3, .hi-s-rep.is-playing .b3 { animation-delay: .2s; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-rep .tr, .hi-s-rep.is-playing .tr { animation: hs-draw .5s ease-out .4s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-rep .tip, .hi-s-rep.is-playing .tip { animation: hs-pop .3s ease-out .85s backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-docs .file, .hi-s-docs.is-playing .file { animation: hs-file .7s cubic-bezier(.4, 0, .6, 1) backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-chat .reply, .hi-s-chat.is-playing .reply { animation: hs-reply .45s cubic-bezier(.3, 1.2, .5, 1) .15s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-chat .rl, .hi-s-chat.is-playing .rl { animation: hs-draw .3s ease-out .5s backwards; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-talk .w, .hi-s-talk.is-playing .w { animation: hs-wave .8s ease-in-out backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-talk .w2, .hi-s-talk.is-playing .w2 { animation-delay: .07s; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-talk .w3, .hi-s-talk.is-playing .w3 { animation-delay: .14s; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-talk .w4, .hi-s-talk.is-playing .w4 { animation-delay: .21s; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-talk .w5, .hi-s-talk.is-playing .w5 { animation-delay: .28s; }

.hi-trigger:is(:hover, :focus-visible) .hi-s-access .sh, .hi-s-access.is-playing .sh { animation: hs-draw .5s ease-out backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-access .pe, .hi-s-access.is-playing .pe { animation: hs-person .35s ease-out .3s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-access .grant, .hi-s-access.is-playing .grant { animation: hs-pop .4s cubic-bezier(.3, 1.4, .5, 1) .6s backwards; }
.hi-trigger:is(:hover, :focus-visible) .hi-s-access .grant path, .hi-s-access.is-playing .grant path { animation: hs-draw .22s ease-out .85s backwards; }

/* icons inside forms, tables and anything marked static never move */
:is(table, form, .hi-static) svg.hi *, svg.hi.hi-static * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { svg.hi *, svg.hi { animation: none !important; } }
.no-motion svg.hi *, .no-motion svg.hi { animation: none !important; }