/* DigiDonate v3 — For businesses hero visual: choose a charity (the Match step).

   Same visual language as the root .dx-bh card: a dark card whose header types itself, a lilac line
   with the root magnifier sweep, then white charity cards that slide in. Here the cards carry no
   score: each one is just "Example charity" with its DGR-endorsed and ACNC-registered badges and a
   heart. A pointer browses the list, clicks one, a selection ring settles on it, and the footer line
   about the statement of intention fades in. No money moves in this visual.

   One 12 s loop; every keyframe below is a % of it (1 s = 8.33%).
     0.3–1.5 s   "Tell us what your" types         1.56–3.0 s  "business cares about." types
     3.05–3.6 s  the "We show you…" line rises      3.0–4.6 s   compass needle swings, magnifier sweeps,
                                                                the empty slots shimmer
     3.8 / 4.0 / 4.2 s  three charity cards slide in
     4.9–6.1 s   pointer glides in, browses, clicks  6.2–6.6 s   ring settles, radio fills, heart beats,
                                                                the other two cards step back
     6.8–7.3 s   footer line rises                   7.6–8.4 s   a sheen crosses the chosen card; its ring
                                                                glow breathes and the heart beats once more
     10.5–11.1 s everything fades back to the empty slots, then the loop starts again.
   The base rules are the complete still frame (used under prefers-reduced-motion); the hidden
   starting states and the animation only apply under prefers-reduced-motion: no-preference.
   Only transform and opacity are animated. Every class and keyframe is prefixed hv-biz-. */

.hv-biz { position: relative; width: 100%; container-type: inline-size;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; color: #FFFFFF; }
.hv-biz svg { display: block; }

/* Example only + Draft, one row at the top */
.hv-biz-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.hv-biz-eg { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  border: 1px solid #3A3350; background: rgba(255,255,255,.04); color: #D7D2E2; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; line-height: 1; text-transform: uppercase; white-space: nowrap; }

/* ---------- the card ---------- */
.hv-biz-card { position: relative; overflow: hidden; padding: 18px 22px; border-radius: 26px;
  background-color: #15121D;
  background-image: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(108,43,217,.22) 0%, rgba(21,18,29,0) 100%),
                    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px;
  border: 1px solid #272233; box-shadow: 0 44px 100px -44px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04); }
/* a slow purple glow drifting in the corner */
.hv-biz-card::before { content: ""; position: absolute; right: -22%; top: -26%; width: 72%; aspect-ratio: 1; border-radius: 999px;
  background: radial-gradient(circle, rgba(108,43,217,.26) 0%, rgba(108,43,217,0) 68%); pointer-events: none; }
.hv-biz-card > * { position: relative; }

/* header: who is asking + which step this is */
.hv-biz-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hv-biz-who { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: #8B8698; }
.hv-biz-who i { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: rgba(174,138,234,.1); border: 1px solid rgba(174,138,234,.24); }
.hv-biz-who svg { width: 15px; height: 15px; fill: none; stroke: #AE8AEA; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hv-biz-step { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 4px; border-radius: 999px;
  background: rgba(108,43,217,.24); border: 1px solid rgba(174,138,234,.36);
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
  color: #FFFFFF; white-space: nowrap; }
.hv-biz-step i { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #7B3BEA 0%, #5A21BD 100%); box-shadow: 0 0 12px rgba(108,43,217,.7); }
.hv-biz-step svg { width: 16px; height: 16px; overflow: visible; }
.hv-biz-cmp-o { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; }
.hv-biz-needle { transform-box: view-box; transform-origin: 12px 12px; }
.hv-biz-needle path { fill: #FFFFFF; }
.hv-biz-needle path + path { fill: #CDB6F4; }

/* the question, typed into a field (each line is uncovered by a cover the colour of the field) */
.hv-biz-ask { margin-top: 14px; padding: 12px 16px 13px; border-radius: 18px; background: #1C1727; border: 1px solid #2E2740;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.hv-biz-ln { position: relative; display: block; width: fit-content; max-width: 100%; overflow: hidden; padding-right: 3px;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: clamp(16px, 5.6cqw, 25px); font-weight: 700;
  line-height: 1.16; letter-spacing: -0.025em; color: #FFFFFF; white-space: nowrap; }
.hv-biz-cov { display: none; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: #1C1727; }
.hv-biz-cov::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 8%; width: 2px; border-radius: 2px; background: #AE8AEA;
  box-shadow: 0 0 8px rgba(174,138,234,.9); opacity: 0; }

/* what DigiDonate does with the answer */
.hv-biz-show { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 0 2px; font-size: 13.5px; font-weight: 600;
  line-height: 1.5; color: #CDB6F4; }
.hv-biz-show i { width: 22px; height: 22px; flex-shrink: 0; margin-top: -1px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; background: rgba(174,138,234,.14); border: 1px solid rgba(174,138,234,.3); }
.hv-biz-show svg { width: 12px; height: 12px; fill: none; stroke: #CDB6F4; stroke-width: 2.4; stroke-linecap: round; }

/* ---------- the charities ---------- */
.hv-biz-list { position: relative; list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hv-biz-list > li { position: relative; }
.hv-biz-list > .hv-biz-fx { position: absolute; inset: 0; pointer-events: none; }
/* an empty slot under each card (seen before the cards arrive) */
.hv-biz-ph { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; border: 1px dashed rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 33px 50%, rgba(255,255,255,.06) 17px, rgba(255,255,255,0) 18px),
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) 66px calc(50% - 8px) / 38% 9px no-repeat,
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) 66px calc(50% + 9px) / 52% 7px no-repeat; }
.hv-biz-ph::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(100deg, rgba(174,138,234,0) 0%, rgba(174,138,234,.16) 50%, rgba(174,138,234,0) 100%);
  transform: translateX(-110%); }

.hv-biz-ch { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: 16px; background: #FFFFFF; color: #141219; box-shadow: 0 22px 44px -26px rgba(0,0,0,.95); }
/* the two cards not chosen step back under a dark veil (a veil, not opacity, so the empty slot never shows through) */
.hv-biz-li-1 .hv-biz-ch::after, .hv-biz-li-3 .hv-biz-ch::after { content: ""; position: absolute; inset: -1px; border-radius: 17px;
  background: rgba(21,18,29,.46); pointer-events: none; }
.hv-biz-av { position: relative; width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border: 1.5px solid #DFD0F7; }
.hv-biz-av svg { width: 18px; height: 18px; fill: none; stroke: #6C2BD9; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hv-biz-av-on { position: absolute; inset: -1.5px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #7B3BEA 0%, #6C2BD9 100%); box-shadow: 0 6px 16px -6px rgba(108,43,217,.9); }
.hv-biz-av-on svg { fill: #FFFFFF; stroke: #FFFFFF; }
.hv-biz-nm { min-width: 0; }
.hv-biz-nm b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: #141219; }
.hv-biz-bd { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.hv-biz-bd em { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: #F4EFFC;
  border: 1px solid #E4D8FA; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; color: #5B23BE; white-space: nowrap; }
.hv-biz-radio { position: relative; width: 20px; height: 20px; border-radius: 999px; border: 2px solid #D9D1E6; }
.hv-biz-radio i { position: absolute; inset: -2px; border-radius: 999px; border: 2px solid #6C2BD9; }
.hv-biz-radio i::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: #6C2BD9; }
/* the chosen card: a ring that settles on it, and a sheen that crosses it */
.hv-biz-ring { position: absolute; inset: -3px; border-radius: 19px; border: 2px solid #8F5BF0; pointer-events: none;
  box-shadow: 0 0 0 5px rgba(108,43,217,.2), 0 0 28px rgba(174,138,234,.45); }
.hv-biz-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 19px; box-shadow: 0 0 30px 3px rgba(174,138,234,.5);
  opacity: 0; }
.hv-biz-gl { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; pointer-events: none; }
.hv-biz-gl::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, rgba(174,138,234,0) 0%, rgba(174,138,234,.34) 50%, rgba(174,138,234,0) 100%);
  transform: translateX(-120%); }

/* the pointer (its tip sits on the chosen card's radio) and the click ripple */
.hv-biz-cur, .hv-biz-rip { position: absolute; left: calc(100% - 24px); top: 50%; pointer-events: none; }
.hv-biz-cur { width: 26px; height: 26px; margin: -3.25px 0 0 -5.4px; transform-origin: 5.4px 3.25px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.hv-biz-cur svg { width: 26px; height: 26px; }
.hv-biz-cur path { fill: #FFFFFF; stroke: #141219; stroke-width: 1.3; stroke-linejoin: round; }
.hv-biz-rip { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px; border: 2px solid #AE8AEA; opacity: 0; }

/* footer: the statement of intention */
.hv-biz-foot { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 2px 0; border-top: 1px solid #272233;
  font-size: 13px; font-weight: 600; line-height: 1.5; color: #D7D2E2; }
.hv-biz-foot i { width: 22px; height: 22px; flex-shrink: 0; margin-top: -1px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; background: rgba(174,138,234,.14); border: 1px solid rgba(174,138,234,.3); }
.hv-biz-foot svg { width: 12px; height: 12px; fill: none; stroke: #CDB6F4; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- narrow phones ---------- */
@media (max-width: 420px) {
  .hv-biz-card { padding: 18px 16px; border-radius: 22px; }
  .hv-biz-ask { padding: 12px 13px 13px; border-radius: 16px; }
  .hv-biz-ch { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 9px; padding: 10px 11px; }
  .hv-biz-bd em { padding: 0 6px; }
  .hv-biz-av { width: 34px; height: 34px; }
  .hv-biz-ph { background:
    radial-gradient(circle at 28px 50%, rgba(255,255,255,.06) 15px, rgba(255,255,255,0) 16px),
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) 54px calc(50% - 8px) / 38% 9px no-repeat,
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) 54px calc(50% + 9px) / 50% 7px no-repeat; }
  .hv-biz-cur, .hv-biz-rip { left: calc(100% - 21px); }
}
@media (max-width: 359px) {
  .hv-biz-top { gap: 6px; }
  .hv-biz-eg, .hv-biz-top .dp-draft { letter-spacing: .02em; padding: 0 7px; }
  .hv-biz-who { letter-spacing: .08em; }
  .hv-biz-who i { display: none; }
}

/* =========================================================
   THE LOOP (only when motion is welcome)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .hv-biz-card::before { animation: hv-biz-drift 12s ease-in-out infinite alternate; }

  .hv-biz-cov { display: block; animation: 12s linear infinite both; }
  .hv-biz-cov::before { animation: 12s linear infinite both; }
  .hv-biz-l1 .hv-biz-cov { animation-name: hv-biz-type1; }
  .hv-biz-l2 .hv-biz-cov { animation-name: hv-biz-type2; }
  .hv-biz-l1 .hv-biz-cov::before { animation-name: hv-biz-caret1; }
  .hv-biz-l2 .hv-biz-cov::before { animation-name: hv-biz-caret2; }
  .hv-biz-tx { display: inline-block; animation: hv-biz-tx 12s linear infinite both; }

  .hv-biz-needle { animation: hv-biz-needle 12s linear infinite both; }
  .hv-biz-show { animation: hv-biz-show 12s linear infinite both; }
  .hv-biz-show svg { animation: hv-biz-sweep 12s linear infinite both; }
  .hv-biz-ph::after { animation: hv-biz-shimmer 12s linear infinite both; }
  .hv-biz-li-2 .hv-biz-ph::after { animation-delay: .12s; }
  .hv-biz-li-3 .hv-biz-ph::after { animation-delay: .24s; }
  .hv-biz-ph { animation: hv-biz-ph 12s linear infinite both; }
  .hv-biz-li-2 .hv-biz-ph { animation-delay: .2s; }
  .hv-biz-li-3 .hv-biz-ph { animation-delay: .4s; }

  .hv-biz-li-1 .hv-biz-ch { animation: hv-biz-c1 12s linear infinite both; }
  .hv-biz-li-2 .hv-biz-ch { animation: hv-biz-c2 12s linear infinite both; }
  .hv-biz-li-3 .hv-biz-ch { animation: hv-biz-c3 12s linear infinite both; }
  .hv-biz-li-1 .hv-biz-ch::after, .hv-biz-li-3 .hv-biz-ch::after { animation: hv-biz-dim 12s linear infinite both; }

  .hv-biz-ring { animation: hv-biz-ring 12s linear infinite both; }
  .hv-biz-ring::after { animation: hv-biz-glow 12s linear infinite both; }
  .hv-biz-radio i { animation: hv-biz-dot 12s linear infinite both; }
  .hv-biz-av-on { animation: hv-biz-avon 12s linear infinite both; }
  .hv-biz-av-on svg { animation: hv-biz-beat 12s linear infinite both; }
  .hv-biz-gl::after { animation: hv-biz-sheen 12s linear infinite both; }

  .hv-biz-cur { animation: hv-biz-cur 12s linear infinite both; }
  .hv-biz-rip { animation: hv-biz-rip 12s linear infinite both; }

  .hv-biz-foot { animation: hv-biz-foot 12s linear infinite both; }
}

@keyframes hv-biz-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-28%, 34%, 0) scale(1.15); } }

/* typing: each cover steps right a character at a time; its left edge is the caret */
@keyframes hv-biz-type1 {
  0%, 2.5%    { transform: translateX(0); animation-timing-function: steps(17, end); }
  12.5%, 93%  { transform: translateX(calc(100% - 3px)); animation-timing-function: ease-in; }
  95%, 100%   { transform: translateX(0); }
}
@keyframes hv-biz-type2 {
  0%, 13%     { transform: translateX(0); animation-timing-function: steps(21, end); }
  25%, 93%    { transform: translateX(calc(100% - 3px)); animation-timing-function: ease-in; }
  95%, 100%   { transform: translateX(0); }
}
@keyframes hv-biz-caret1 { 0% { opacity: 0; } 2%, 12.5% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes hv-biz-caret2 { 0%, 12.5% { opacity: 0; } 13%, 26.5% { opacity: 1; } 28.5%, 100% { opacity: 0; } }
@keyframes hv-biz-tx { 0%, 87.5% { opacity: 1; } 90.8%, 95% { opacity: 0; } 95.5%, 100% { opacity: 1; } }

/* the compass needle hunts, then settles (the root's step-one compass) */
@keyframes hv-biz-needle {
  0%, 25%  { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  28.5%    { transform: rotate(-58deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  32.5%    { transform: rotate(42deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  36%      { transform: rotate(-18deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  39%      { transform: rotate(7deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  41.5%, 100% { transform: rotate(0deg); }
}
@keyframes hv-biz-show {
  0%, 25.4% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  30%, 87.5% { opacity: 1; transform: none; }
  90.8%, 100% { opacity: 0; transform: translateY(-4px); }
}
/* the magnifier sweeps while the list fills */
@keyframes hv-biz-sweep {
  0%, 26%  { transform: none; animation-timing-function: ease-in-out; }
  29.5%    { transform: translate(2px, -1.5px) rotate(14deg); animation-timing-function: ease-in-out; }
  33%      { transform: translate(-2px, 1px) rotate(-12deg); animation-timing-function: ease-in-out; }
  36.5%    { transform: translate(1.5px, -.5px) rotate(8deg); animation-timing-function: ease-in-out; }
  40%, 100% { transform: none; }
}
/* each empty slot clears as its card lands, and comes back once the card has gone */
@keyframes hv-biz-ph {
  0%, 31.67% { opacity: 1; animation-timing-function: ease-out; }
  33.5%, 91.7% { opacity: 0; animation-timing-function: ease-in-out; }
  95%, 100% { opacity: 1; }
}
@keyframes hv-biz-shimmer {
  0%, 26%   { transform: translateX(-110%); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  33%       { transform: translateX(190%); }
  33.01%, 100% { transform: translateX(-110%); }
}

/* the three charity cards: in one after another; the two not chosen step back */
@keyframes hv-biz-c1 {
  0%, 31.67% { opacity: 0; transform: translateX(28px) scale(.97); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  36.67%, 51.67% { opacity: 1; transform: none; animation-timing-function: ease; }
  54.5%, 87.5% { opacity: 1; transform: scale(.975); animation-timing-function: ease-in; }
  90.8%, 100% { opacity: 0; transform: translateY(-6px) scale(.975); }
}
@keyframes hv-biz-c2 {
  0%, 33.33% { opacity: 0; transform: translateX(28px) scale(.97); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  38.33%, 51.67% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.3,1.5,.5,1); }
  53.5%      { opacity: 1; transform: scale(1.025); animation-timing-function: ease-out; }
  56%, 88.3% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  91.6%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes hv-biz-c3 {
  0%, 35%    { opacity: 0; transform: translateX(28px) scale(.97); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  40%, 51.67% { opacity: 1; transform: none; animation-timing-function: ease; }
  54.5%, 89.1% { opacity: 1; transform: scale(.975); animation-timing-function: ease-in; }
  92.4%, 100% { opacity: 0; transform: translateY(-6px) scale(.975); }
}
@keyframes hv-biz-dim { 0%, 51.67% { opacity: 0; animation-timing-function: ease; } 54.5%, 100% { opacity: 1; } }

/* the choice */
@keyframes hv-biz-ring {
  0%, 51.67% { opacity: 0; transform: scale(1.06); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  55.5%, 100% { opacity: 1; transform: none; }
}
@keyframes hv-biz-glow {
  0%, 53%  { opacity: 0; animation-timing-function: ease-out; }
  56%      { opacity: .9; animation-timing-function: ease-in-out; }
  65%      { opacity: .3; animation-timing-function: ease-in-out; }
  74.5%    { opacity: .8; animation-timing-function: ease-in-out; }
  84%      { opacity: .3; animation-timing-function: ease-in; }
  88.3%, 100% { opacity: 0; }
}
@keyframes hv-biz-dot {
  0%, 51.67% { opacity: 0; transform: scale(.2); animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
  55%, 100% { opacity: 1; transform: none; }
}
@keyframes hv-biz-avon {
  0%, 52%  { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
  55.5%, 100% { opacity: 1; transform: none; }
}
@keyframes hv-biz-beat {
  0%, 53%  { transform: scale(1); animation-timing-function: ease-out; }
  55%      { transform: scale(1.28); animation-timing-function: ease-in-out; }
  57%      { transform: scale(1); animation-timing-function: ease-in-out; }
  59%      { transform: scale(1.14); animation-timing-function: ease-in-out; }
  61.5%, 74% { transform: scale(1); animation-timing-function: ease-in-out; }
  75.5%    { transform: scale(1.16); animation-timing-function: ease-in-out; }
  77%      { transform: scale(1); animation-timing-function: ease-in-out; }
  78.5%    { transform: scale(1.08); animation-timing-function: ease-in-out; }
  80%, 100% { transform: scale(1); }
}
@keyframes hv-biz-sheen {
  0%, 63%  { transform: translateX(-120%); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  70%      { transform: translateX(260%); }
  70.01%, 100% { transform: translateX(-120%); }
}

/* the pointer: in over the third card, up to the first, down onto the second, click */
@keyframes hv-biz-cur {
  0%, 40.8% { opacity: 0; transform: translate(-150px, 104px); animation-timing-function: ease-out; }
  42.5%     { opacity: 1; transform: translate(-138px, 92px); animation-timing-function: cubic-bezier(.45,0,.4,1); }
  47.5%     { opacity: 1; transform: translate(-58px, -66px); animation-timing-function: cubic-bezier(.45,0,.3,1); }
  50.8%     { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-in; }
  51.6%     { opacity: 1; transform: translate(0, 0) scale(.82); animation-timing-function: ease-out; }
  52.8%, 58% { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-in; }
  61%, 100% { opacity: 0; transform: translate(14px, 20px); }
}
@keyframes hv-biz-rip {
  0%, 51.4% { opacity: 0; transform: scale(.2); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  51.6%     { opacity: .9; transform: scale(.3); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  57%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes hv-biz-foot {
  0%, 56.67% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  60.83%, 89.1% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  92.4%, 100% { opacity: 0; transform: translateY(-4px); }
}