/* Generated from HBSymbol symbolEffects.ts. Run scripts/generate-symbols.ts. */

@keyframes hb-travel-once { 0% { transform: translate(0, 0); opacity: 1 } 45% { transform: translate(calc(var(--hb-dx) * 4px), calc(var(--hb-dy) * 4px)); opacity: 0 } 46% { transform: translate(calc(var(--hb-dx) * -4px), calc(var(--hb-dy) * -4px)); opacity: 0 } 100% { transform: translate(0, 0); opacity: 1 } }
@keyframes hb-travel-loop { 0% { transform: translate(calc(var(--hb-dx) * -3px), calc(var(--hb-dy) * -3px)); opacity: 0 } 30%, 60% { transform: translate(0, 0); opacity: 1 } 100% { transform: translate(calc(var(--hb-dx) * 3px), calc(var(--hb-dy) * 3px)); opacity: 0 } }
@keyframes hb-spin-once { to { transform: rotate(calc(var(--hb-turn) * 360deg)) } }
@keyframes hb-spin-loop { to { transform: rotate(calc(var(--hb-spin) * 360deg)) } }
@keyframes hb-ring-once { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-14deg) } 60% { transform: rotate(10deg) } 85% { transform: rotate(-4deg) } }
@keyframes hb-ring-loop { from { transform: rotate(-12deg) } to { transform: rotate(12deg) } }
@keyframes hb-beat-once { 0%, 100% { transform: scale(1) } 40% { transform: scale(1.18) } }
@keyframes hb-beat-loop { 0%, 40%, 100% { transform: scale(1) } 12% { transform: scale(1.12) } 24% { transform: scale(1) } 32% { transform: scale(1.07) } }
@keyframes hb-shake-once { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-2px) } 55% { transform: translateX(2px) } 80% { transform: translateX(-1px) } }
@keyframes hb-shake-loop { 0%, 50%, 100% { transform: rotate(0) } 10% { transform: rotate(-7deg) } 20% { transform: rotate(6deg) } 30% { transform: rotate(-4deg) } 40% { transform: rotate(2deg) } }
@keyframes hb-scan-once { 0%, 100% { transform: translate(0, 0) } 35% { transform: translate(-1.5px, 1px) } 70% { transform: translate(1.5px, -1px) } }
@keyframes hb-scan-loop { 0%, 100% { transform: translate(1.5px, 0) } 25% { transform: translate(0, 1.5px) } 50% { transform: translate(-1.5px, 0) } 75% { transform: translate(0, -1.5px) } }
@keyframes hb-cascade-once { from { opacity: 0.2 } }
@keyframes hb-cascade-loop { 0%, 100% { opacity: 0.25 } 30%, 55% { opacity: 1 } }
@keyframes hb-sway-once { 0%, 100% { transform: skewX(0) } 30% { transform: skewX(-8deg) } 65% { transform: skewX(6deg) } }
@keyframes hb-sway-loop { from { transform: skewX(-7deg) } to { transform: skewX(7deg) } }
@keyframes hb-stamp-once { from { transform: scale(1.2); opacity: 0.4 } to { transform: scale(1); opacity: 1 } }
@keyframes hb-stamp-loop { 0%, 55%, 100% { transform: scale(1) } 25% { transform: scale(0.86) } }
/* A stroke waits for its turn hidden rather than transparent, so a redraw never holds the opacity a level sets. */
@keyframes hb-draw-once { from { stroke-dashoffset: 1; visibility: hidden } to { stroke-dashoffset: 0 } }
@keyframes hb-draw-loop { 0% { stroke-dashoffset: 1; opacity: 0 } 5% { opacity: 1 } 55%, 85% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes hb-trace-once { 0% { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0 } 65% { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0 } 100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1 } }
@keyframes hb-trace-loop { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes hb-open-once { from { transform: translateX(0) scaleX(1) } to { transform: translateX(var(--hb-open-shift)) scaleX(-1) } }
@keyframes hb-open-slide-once { from { transform: translateX(0) } to { transform: translateX(var(--hb-open-shift)) } }
@keyframes hb-open-hide-once { from { opacity: 1 } 45%, to { opacity: 0 } }
@keyframes hb-open-show-once { from, 55% { opacity: 0 } to { opacity: 1 } }
@keyframes hb-open-loop { 0%, 15%, 100% { transform: translateX(0) scaleX(1) } 45%, 70% { transform: translateX(var(--hb-open-shift)) scaleX(-1) } }
@keyframes hb-open-slide-loop { 0%, 15%, 100% { transform: translateX(0) } 45%, 70% { transform: translateX(var(--hb-open-shift)) } }
@keyframes hb-open-hide-loop { 0%, 15%, 100% { opacity: 1 } 30%, 85% { opacity: 0 } }
@keyframes hb-open-show-loop { 0%, 30%, 85%, 100% { opacity: 0 } 45%, 70% { opacity: 1 } }
/* A bubble swells as it rises clear of the liquid, and is gone before it reaches the neck. */
@keyframes hb-bubble-once { 0% { transform: translate(0, 0) scale(0.5); opacity: 0 } 15%, 70% { opacity: 1 } 100% { transform: translate(var(--hb-drift), var(--hb-rise)) scale(1); opacity: 0 } }
@keyframes hb-bubble-loop { 0% { transform: translate(0, 0) scale(0.5); opacity: 0 } 10%, 60% { opacity: 1 } 75%, 100% { transform: translate(var(--hb-drift), var(--hb-rise)) scale(1); opacity: 0 } }
/* The liquid swells up the narrowing cone as the gas leaves it, then settles back to its line. */
@keyframes hb-settle-once { 0%, 100% { transform: none } 35% { transform: translateY(-0.75px) scaleX(0.92) } }

@keyframes hb-fly { 0% { transform: translate(-25%, 25%); opacity: 0 } 25%, 60% { transform: translate(0, 0); opacity: 1 } 100% { transform: translate(25%, -25%); opacity: 0 } }
@keyframes hb-crawl { from { transform: rotate(-7deg) } to { transform: rotate(7deg) } }
@keyframes hb-twitch-left { from { transform: rotate(-16deg) } to { transform: rotate(10deg) } }
@keyframes hb-twitch-right { from { transform: rotate(16deg) } to { transform: rotate(-10deg) } }
@keyframes hb-arrowhead { 0%, 50% { stroke-dashoffset: 1; opacity: 0 } 51% { stroke-dashoffset: 1; opacity: 1 } 75%, 85% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes hb-shoot { 0% { transform: translate(-3px, 3px); opacity: 0 } 30%, 60% { transform: translate(0, 0); opacity: 1 } 100% { transform: translate(3px, -3px); opacity: 0 } }
@keyframes hb-wave { 0% { transform: translateX(-2px); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateX(3px); opacity: 0 } }

svg:is([data-hb-draw], [data-hb-loading], [data-hb-active]) > * {
  transform-box: view-box;
  transform-origin: 12px 12px;
}
/* A bell hangs from its crown, cloth from its rod; a shaken box stays on the table. */
svg:is([data-hb-symbol="nav.learn"], [data-hb-symbol="action.open-guide"], [data-hb-symbol="status.help"], [data-hb-symbol="object.tag"], [data-hb-symbol="object.notification"], [data-hb-symbol="object.attachment"], [data-hb-symbol="object.banknote"], [data-hb-symbol="object.guild"]) { transform-origin: 50% 12%; }
svg:is([data-hb-symbol="action.report-bug"], [data-hb-symbol="action.delete"], [data-hb-symbol="action.unlink"], [data-hb-symbol="status.warning"], [data-hb-symbol="status.error"], [data-hb-symbol="status.locked"], [data-hb-symbol="status.not-found"], [data-hb-symbol="status.alert"], [data-hb-symbol="status.image-unavailable"], [data-hb-symbol="object.gift"], [data-hb-symbol="object.shield-alert"], [data-hb-symbol="object.campaign"], [data-hb-symbol="object.bug"]) { transform-origin: 50% 85%; }
/* Level: parts above it are dimmed, never removed. A state, not a motion. */
svg[data-hb-level="0"][data-hb-symbol="nav.campaigns"] > :nth-child(1),
svg[data-hb-level="1"][data-hb-symbol="nav.campaigns"] > :nth-child(1),
svg[data-hb-level="2"][data-hb-symbol="nav.campaigns"] > :nth-child(1),
svg[data-hb-level="0"][data-hb-symbol="nav.campaigns"] > :nth-child(2),
svg[data-hb-level="1"][data-hb-symbol="nav.campaigns"] > :nth-child(2),
svg[data-hb-level="0"][data-hb-symbol="nav.campaigns"] > :nth-child(3),
svg[data-hb-level="0"][data-hb-symbol="nav.teams"] > :nth-child(1),
svg[data-hb-level="0"][data-hb-symbol="nav.teams"] > :nth-child(2),
svg[data-hb-level="0"][data-hb-symbol="nav.teams"] > :nth-child(3),
svg[data-hb-level="1"][data-hb-symbol="nav.teams"] > :nth-child(3),
svg[data-hb-level="0"][data-hb-symbol="nav.teams"] > :nth-child(4),
svg[data-hb-level="1"][data-hb-symbol="nav.teams"] > :nth-child(4),
svg[data-hb-level="0"][data-hb-symbol="nav.teams"] > :nth-child(5),
svg[data-hb-level="1"][data-hb-symbol="nav.teams"] > :nth-child(5),
svg[data-hb-level="2"][data-hb-symbol="nav.teams"] > :nth-child(5),
svg[data-hb-level="0"][data-hb-symbol="nav.teams"] > :nth-child(6),
svg[data-hb-level="1"][data-hb-symbol="nav.teams"] > :nth-child(6),
svg[data-hb-level="2"][data-hb-symbol="nav.teams"] > :nth-child(6),
svg[data-hb-level="0"][data-hb-symbol="action.more"] > :nth-child(1),
svg[data-hb-level="1"][data-hb-symbol="action.more"] > :nth-child(1),
svg[data-hb-level="0"][data-hb-symbol="action.more"] > :nth-child(2),
svg[data-hb-level="1"][data-hb-symbol="action.more"] > :nth-child(2),
svg[data-hb-level="2"][data-hb-symbol="action.more"] > :nth-child(2),
svg[data-hb-level="0"][data-hb-symbol="action.more"] > :nth-child(3),
svg[data-hb-level="0"][data-hb-symbol="action.speed"] > :nth-child(1),
svg[data-hb-level="0"][data-hb-symbol="action.speed"] > :nth-child(2),
svg[data-hb-level="1"][data-hb-symbol="action.speed"] > :nth-child(2),
svg[data-hb-level="0"][data-hb-symbol="action.speed"] > :nth-child(3),
svg[data-hb-level="1"][data-hb-symbol="action.speed"] > :nth-child(3),
svg[data-hb-level="2"][data-hb-symbol="action.speed"] > :nth-child(3),
svg[data-hb-level="0"][data-hb-symbol="status.read"] > :nth-child(1),
svg[data-hb-level="0"][data-hb-symbol="status.read"] > :nth-child(2),
svg[data-hb-level="1"][data-hb-symbol="status.read"] > :nth-child(2),
svg[data-hb-level="0"][data-hb-symbol="object.team"] > :nth-child(1),
svg[data-hb-level="0"][data-hb-symbol="object.team"] > :nth-child(2),
svg[data-hb-level="0"][data-hb-symbol="object.team"] > :nth-child(3),
svg[data-hb-level="1"][data-hb-symbol="object.team"] > :nth-child(3),
svg[data-hb-level="0"][data-hb-symbol="object.team"] > :nth-child(4),
svg[data-hb-level="1"][data-hb-symbol="object.team"] > :nth-child(4),
svg[data-hb-level="0"][data-hb-symbol="object.team"] > :nth-child(5),
svg[data-hb-level="1"][data-hb-symbol="object.team"] > :nth-child(5),
svg[data-hb-level="2"][data-hb-symbol="object.team"] > :nth-child(5),
svg[data-hb-level="0"][data-hb-symbol="object.team"] > :nth-child(6),
svg[data-hb-level="1"][data-hb-symbol="object.team"] > :nth-child(6),
svg[data-hb-level="2"][data-hb-symbol="object.team"] > :nth-child(6),
svg[data-hb-level="0"][data-hb-symbol="object.chart"] > :nth-child(1),
svg[data-hb-level="1"][data-hb-symbol="object.chart"] > :nth-child(1),
svg[data-hb-level="0"][data-hb-symbol="object.chart"] > :nth-child(2),
svg[data-hb-level="1"][data-hb-symbol="object.chart"] > :nth-child(2),
svg[data-hb-level="2"][data-hb-symbol="object.chart"] > :nth-child(2),
svg[data-hb-level="0"][data-hb-symbol="object.chart"] > :nth-child(3),
svg[data-hb-level="0"][data-hb-symbol="object.subscription"] > :nth-child(1),
svg[data-hb-level="1"][data-hb-symbol="object.subscription"] > :nth-child(1),
svg[data-hb-level="0"][data-hb-symbol="object.subscription"] > :nth-child(2),
svg[data-hb-level="1"][data-hb-symbol="object.subscription"] > :nth-child(2),
svg[data-hb-level="2"][data-hb-symbol="object.subscription"] > :nth-child(2),
svg[data-hb-level="0"][data-hb-symbol="object.subscription"] > :nth-child(3) { opacity: 0.25; }
/* Full: what the container holds is shown. A state, not a motion, so it holds under reduced motion too. */
svg[data-hb-full] > [data-hb-content] { opacity: 1; }
svg > [data-hb-content] { transform-box: fill-box; transform-origin: center; }
/* An open booklet: the cover lies flipped to the left of its spine and the identity page shows. A state, not a motion, so it holds under reduced motion too. */
svg:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) { --hb-open-shift: 4.75px; }
svg:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-cover] { transform-origin: 7.25px 12px; }
svg[data-hb-active]:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > * { transform: translateX(var(--hb-open-shift)); }
svg[data-hb-active]:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-cover] { transform: translateX(var(--hb-open-shift)) scaleX(-1); }
svg[data-hb-active]:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-cover="mark"] { opacity: 0; }
svg[data-hb-active]:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-inside] { opacity: 1; }
/* A reaction: each bubble swells about its own centre and drifts toward the middle of the flask, clear of the glass. */
svg:is([data-hb-symbol="nav.playground"]) > [data-hb-inside] { transform-box: fill-box; transform-origin: center; }
svg:is([data-hb-symbol="nav.playground"]) > :nth-child(2) { transform-origin: 12px 15px; }
svg:is([data-hb-symbol="nav.playground"]) > :nth-child(4) { --hb-drift: 1.75px; --hb-rise: -8.75px; }
svg:is([data-hb-symbol="nav.playground"]) > :nth-child(5) { --hb-drift: -1.5px; --hb-rise: -8.25px; }
svg:is([data-hb-symbol="nav.playground"]) > :nth-child(6) { --hb-drift: 0.25px; --hb-rise: -8.5px; }
svg:is([data-hb-symbol="action.collapse"], [data-hb-symbol="action.previous"], [data-hb-symbol="action.back"]) { --hb-dx: -1; --hb-dy: 0; }
svg:is([data-hb-symbol="action.minimize"]) { --hb-dx: -1; --hb-dy: 1; }
svg:is([data-hb-symbol="action.upload"], [data-hb-symbol="action.up"], [data-hb-symbol="action.submit"]) { --hb-dx: 0; --hb-dy: -1; }
svg:is([data-hb-symbol="nav.inbox"], [data-hb-symbol="action.download"], [data-hb-symbol="action.expand"], [data-hb-symbol="object.location"]) { --hb-dx: 0; --hb-dy: 1; }
svg:is([data-hb-symbol="action.open"], [data-hb-symbol="action.external"], [data-hb-symbol="action.send"], [data-hb-symbol="action.maximize"], [data-hb-symbol="object.trend"], [data-hb-symbol="social.telegram"]) { --hb-dx: 1; --hb-dy: -1; }
svg:is([data-hb-symbol="action.next"], [data-hb-symbol="action.forward"], [data-hb-symbol="action.login"], [data-hb-symbol="action.logout"], [data-hb-symbol="action.play"], [data-hb-symbol="action.speed"], [data-hb-symbol="object.mail"]) { --hb-dx: 1; --hb-dy: 0; }
svg:is([data-hb-symbol="object.trend-down"]) { --hb-dx: 1; --hb-dy: 1; }
svg:is([data-hb-symbol="action.retry"], [data-hb-symbol="object.history"]) { --hb-turn: -1; --hb-spin: -1; }
svg:is([data-hb-symbol="action.refresh"], [data-hb-symbol="action.repeat"], [data-hb-symbol="status.pending"], [data-hb-symbol="status.loading"], [data-hb-symbol="object.skill"]) { --hb-turn: 1; --hb-spin: 1; }
svg:is([data-hb-symbol="action.settings"], [data-hb-symbol="action.close"]) { --hb-turn: 0.25; --hb-spin: 1; }
svg:is([data-hb-symbol="action.swap"]) { --hb-turn: 0.5; --hb-spin: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Hover: the symbol redraws itself. A touch has no hover, so it never plays there. */
  @media (hover: hover) and (pointer: fine) {
    svg[data-hb-draw]:not([data-hb-loading]):not([data-hb-active]):hover > :not([data-hb-fill], [data-hb-inside], [data-hb-content]),
    :is(a, button, [role="button"], [data-hb-symbol-host]):is(:hover, :focus-visible) svg[data-hb-draw]:not([data-hb-loading]):not([data-hb-active]) > :not([data-hb-fill], [data-hb-inside], [data-hb-content]) {
      stroke-dasharray: 1;
      animation: hb-draw-once 360ms cubic-bezier(0.2, 0, 0, 1) both;
      animation-delay: calc(var(--hb-i, 0) * 90ms);
    }
    svg[data-hb-draw]:not([data-hb-loading]):not([data-hb-active]):hover > [data-hb-fill],
    :is(a, button, [role="button"], [data-hb-symbol-host]):is(:hover, :focus-visible) svg[data-hb-draw]:not([data-hb-loading]):not([data-hb-active]) > [data-hb-fill] {
      stroke: currentColor;
      stroke-width: 0.9;
      stroke-dasharray: 1;
      animation: hb-trace-once 620ms cubic-bezier(0.2, 0, 0, 1) both;
    }
  }

  /* Pressed: a transition, not keyframes, so a quick tap retargets instead of restarting. */
  svg[data-hb-press] { transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms cubic-bezier(0.2, 0, 0, 1); }
  :is(a, button, [role="button"], [data-hb-symbol-host]):active svg[data-hb-press],
  svg[data-hb-press]:active { transform: scale(0.88); }
  :is(a, button, [role="button"], [data-hb-symbol-host]):active svg[data-hb-press]:is([data-hb-symbol="nav.inbox"], [data-hb-symbol="action.open"], [data-hb-symbol="action.external"], [data-hb-symbol="action.download"], [data-hb-symbol="action.upload"], [data-hb-symbol="action.collapse"], [data-hb-symbol="action.expand"], [data-hb-symbol="action.previous"], [data-hb-symbol="action.next"], [data-hb-symbol="action.up"], [data-hb-symbol="action.back"], [data-hb-symbol="action.forward"], [data-hb-symbol="action.login"], [data-hb-symbol="action.logout"], [data-hb-symbol="action.send"], [data-hb-symbol="action.submit"], [data-hb-symbol="action.maximize"], [data-hb-symbol="action.minimize"], [data-hb-symbol="action.play"], [data-hb-symbol="action.speed"], [data-hb-symbol="object.mail"], [data-hb-symbol="object.location"], [data-hb-symbol="object.trend"], [data-hb-symbol="object.trend-down"], [data-hb-symbol="social.telegram"]),
  svg[data-hb-press]:is([data-hb-symbol="nav.inbox"], [data-hb-symbol="action.open"], [data-hb-symbol="action.external"], [data-hb-symbol="action.download"], [data-hb-symbol="action.upload"], [data-hb-symbol="action.collapse"], [data-hb-symbol="action.expand"], [data-hb-symbol="action.previous"], [data-hb-symbol="action.next"], [data-hb-symbol="action.up"], [data-hb-symbol="action.back"], [data-hb-symbol="action.forward"], [data-hb-symbol="action.login"], [data-hb-symbol="action.logout"], [data-hb-symbol="action.send"], [data-hb-symbol="action.submit"], [data-hb-symbol="action.maximize"], [data-hb-symbol="action.minimize"], [data-hb-symbol="action.play"], [data-hb-symbol="action.speed"], [data-hb-symbol="object.mail"], [data-hb-symbol="object.location"], [data-hb-symbol="object.trend"], [data-hb-symbol="object.trend-down"], [data-hb-symbol="social.telegram"]):active { transform: translate(calc(var(--hb-dx) * 1.5px), calc(var(--hb-dy) * 1.5px)); }
  :is(a, button, [role="button"], [data-hb-symbol-host]):active svg[data-hb-press]:is([data-hb-symbol="action.retry"], [data-hb-symbol="action.refresh"], [data-hb-symbol="action.settings"], [data-hb-symbol="action.close"], [data-hb-symbol="action.swap"], [data-hb-symbol="action.repeat"], [data-hb-symbol="status.pending"], [data-hb-symbol="status.loading"], [data-hb-symbol="object.history"], [data-hb-symbol="object.skill"]),
  svg[data-hb-press]:is([data-hb-symbol="action.retry"], [data-hb-symbol="action.refresh"], [data-hb-symbol="action.settings"], [data-hb-symbol="action.close"], [data-hb-symbol="action.swap"], [data-hb-symbol="action.repeat"], [data-hb-symbol="status.pending"], [data-hb-symbol="status.loading"], [data-hb-symbol="object.history"], [data-hb-symbol="object.skill"]):active { transform: rotate(calc(var(--hb-spin) * 30deg)); }
  :is(a, button, [role="button"], [data-hb-symbol-host]):active svg[data-hb-press]:is([data-hb-symbol="social.github"], [data-hb-symbol="social.huggingface"], [data-hb-symbol="social.kaggle"], [data-hb-symbol="social.x"]),
  svg[data-hb-press]:is([data-hb-symbol="social.github"], [data-hb-symbol="social.huggingface"], [data-hb-symbol="social.kaggle"], [data-hb-symbol="social.x"]):active { transform: none; opacity: 0.55; }

  svg[data-hb-level] > * { transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1); }

  /* Filling and emptying: the contents arrive and leave, never from nothing. */
  svg > [data-hb-content] { transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1); }
  svg:not([data-hb-full]) > [data-hb-content] { transform: scale(0.6); }

  /* Activated: the act, once. */
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.inbox"], [data-hb-symbol="action.open"], [data-hb-symbol="action.external"], [data-hb-symbol="action.download"], [data-hb-symbol="action.upload"], [data-hb-symbol="action.collapse"], [data-hb-symbol="action.expand"], [data-hb-symbol="action.previous"], [data-hb-symbol="action.next"], [data-hb-symbol="action.up"], [data-hb-symbol="action.back"], [data-hb-symbol="action.forward"], [data-hb-symbol="action.login"], [data-hb-symbol="action.logout"], [data-hb-symbol="action.send"], [data-hb-symbol="action.submit"], [data-hb-symbol="action.maximize"], [data-hb-symbol="action.minimize"], [data-hb-symbol="action.play"], [data-hb-symbol="action.speed"], [data-hb-symbol="object.mail"], [data-hb-symbol="object.location"], [data-hb-symbol="object.trend"], [data-hb-symbol="object.trend-down"], [data-hb-symbol="social.telegram"]) { animation: hb-travel-once 280ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="action.retry"], [data-hb-symbol="action.refresh"], [data-hb-symbol="action.settings"], [data-hb-symbol="action.close"], [data-hb-symbol="action.swap"], [data-hb-symbol="action.repeat"], [data-hb-symbol="status.pending"], [data-hb-symbol="status.loading"], [data-hb-symbol="object.history"], [data-hb-symbol="object.skill"]) { animation: hb-spin-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="object.notification"]) { animation: hb-ring-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.contributions"], [data-hb-symbol="nav.ownership"], [data-hb-symbol="nav.referral"], [data-hb-symbol="nav.data-assets"], [data-hb-symbol="nav.agent-exchange"], [data-hb-symbol="nav.your-agents"], [data-hb-symbol="action.add"], [data-hb-symbol="action.camera"], [data-hb-symbol="status.new"], [data-hb-symbol="object.agent"], [data-hb-symbol="object.coin"], [data-hb-symbol="object.leaderboard"], [data-hb-symbol="object.star"], [data-hb-symbol="object.message"], [data-hb-symbol="object.target"], [data-hb-symbol="object.flame"], [data-hb-symbol="object.lightning"], [data-hb-symbol="object.video"], [data-hb-symbol="object.staking"], [data-hb-symbol="object.referral"], [data-hb-symbol="object.announcement"]) { animation: hb-beat-once 280ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="action.report-bug"], [data-hb-symbol="action.delete"], [data-hb-symbol="action.unlink"], [data-hb-symbol="status.warning"], [data-hb-symbol="status.error"], [data-hb-symbol="status.locked"], [data-hb-symbol="status.not-found"], [data-hb-symbol="status.alert"], [data-hb-symbol="status.image-unavailable"], [data-hb-symbol="object.gift"], [data-hb-symbol="object.shield-alert"], [data-hb-symbol="object.campaign"], [data-hb-symbol="object.bug"]) { animation: hb-shake-once 280ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="action.search"], [data-hb-symbol="action.preview"], [data-hb-symbol="action.zoom-in"], [data-hb-symbol="action.zoom-out"], [data-hb-symbol="action.scan"]) { animation: hb-scan-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.learn"], [data-hb-symbol="action.open-guide"], [data-hb-symbol="status.help"], [data-hb-symbol="object.tag"], [data-hb-symbol="object.attachment"], [data-hb-symbol="object.banknote"], [data-hb-symbol="object.guild"]) { animation: hb-sway-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.trust"], [data-hb-symbol="action.copy"], [data-hb-symbol="action.hide"], [data-hb-symbol="action.remove"], [data-hb-symbol="action.link"], [data-hb-symbol="action.mint"], [data-hb-symbol="status.success"], [data-hb-symbol="status.info"], [data-hb-symbol="status.verified"], [data-hb-symbol="status.todo"], [data-hb-symbol="object.check"], [data-hb-symbol="object.receipt"], [data-hb-symbol="object.shield"], [data-hb-symbol="object.medal"], [data-hb-symbol="object.reputation"], [data-hb-symbol="object.certificate"], [data-hb-symbol="object.calendar-check"], [data-hb-symbol="object.identity-card"], [data-hb-symbol="object.enrollment"]) { animation: hb-stamp-once 240ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-cover] { animation: hb-open-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-cover="mark"] { animation: hb-open-once 300ms cubic-bezier(0.2, 0, 0, 1), hb-open-hide-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > :not([data-hb-cover]) { animation: hb-open-slide-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-inside] { animation: hb-open-slide-once 300ms cubic-bezier(0.2, 0, 0, 1), hb-open-show-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  /* The glass stays put: the bubbles rise one after another and the liquid settles under them. */
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.playground"]) > [data-hb-inside] { animation: hb-bubble-once 220ms ease-out; }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.playground"]) > :nth-child(5) { animation-delay: 40ms; }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.playground"]) > :nth-child(6) { animation-delay: 80ms; }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.playground"]) > :nth-child(2) { animation: hb-settle-once 300ms cubic-bezier(0.2, 0, 0, 1); }
  /* A cascade ends on each part's own opacity and then lets go, so a level still dims and still eases. */
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.campaigns"], [data-hb-symbol="nav.teams"], [data-hb-symbol="nav.organization"], [data-hb-symbol="action.more"], [data-hb-symbol="action.filter"], [data-hb-symbol="action.grid"], [data-hb-symbol="status.read"], [data-hb-symbol="object.database"], [data-hb-symbol="object.blocks"], [data-hb-symbol="object.microchip"], [data-hb-symbol="object.statement"], [data-hb-symbol="object.team"], [data-hb-symbol="object.chart"], [data-hb-symbol="object.network"], [data-hb-symbol="object.subscription"]) > * {
    animation: hb-cascade-once 180ms cubic-bezier(0.2, 0, 0, 1) backwards;
    animation-delay: calc(var(--hb-i, 0) * 12ms);
  }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="nav.home"], [data-hb-symbol="nav.my-work"], [data-hb-symbol="nav.earnings"], [data-hb-symbol="nav.marketplace"], [data-hb-symbol="nav.api-keys"], [data-hb-symbol="nav.billing"], [data-hb-symbol="nav.account"], [data-hb-symbol="nav.docs"], [data-hb-symbol="action.edit"], [data-hb-symbol="object.code"], [data-hb-symbol="object.api-key"], [data-hb-symbol="object.document"], [data-hb-symbol="object.invoice"], [data-hb-symbol="object.image"], [data-hb-symbol="object.wallet"], [data-hb-symbol="object.user"], [data-hb-symbol="object.fingerprint"], [data-hb-symbol="object.lineage"], [data-hb-symbol="object.payout"], [data-hb-symbol="object.globe"]) > :not([data-hb-fill], [data-hb-inside], [data-hb-content]) {
    stroke-dasharray: 1;
    animation: hb-draw-once 240ms cubic-bezier(0.2, 0, 0, 1) both;
    animation-delay: calc(var(--hb-i, 0) * 12ms);
  }
  svg[data-hb-active="entered"]:not([data-hb-loading]):is([data-hb-symbol="social.github"], [data-hb-symbol="social.huggingface"], [data-hb-symbol="social.kaggle"], [data-hb-symbol="social.x"]) > [data-hb-fill] {
    stroke: currentColor;
    stroke-width: 0.9;
    stroke-dasharray: 1;
    animation: hb-trace-once 620ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  /* Loading: the act, looped. */
  svg[data-hb-loading]:is([data-hb-symbol="nav.inbox"], [data-hb-symbol="action.open"], [data-hb-symbol="action.download"], [data-hb-symbol="action.upload"], [data-hb-symbol="action.collapse"], [data-hb-symbol="action.expand"], [data-hb-symbol="action.previous"], [data-hb-symbol="action.next"], [data-hb-symbol="action.up"], [data-hb-symbol="action.back"], [data-hb-symbol="action.forward"], [data-hb-symbol="action.login"], [data-hb-symbol="action.logout"], [data-hb-symbol="action.send"], [data-hb-symbol="action.submit"], [data-hb-symbol="action.maximize"], [data-hb-symbol="action.minimize"], [data-hb-symbol="action.play"], [data-hb-symbol="action.speed"], [data-hb-symbol="object.mail"], [data-hb-symbol="object.location"], [data-hb-symbol="object.trend-down"]) { animation: hb-travel-loop 1.3s cubic-bezier(0.2, 0, 0, 1) infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="action.retry"], [data-hb-symbol="action.refresh"], [data-hb-symbol="action.settings"], [data-hb-symbol="action.close"], [data-hb-symbol="action.swap"], [data-hb-symbol="action.repeat"], [data-hb-symbol="status.pending"], [data-hb-symbol="status.loading"], [data-hb-symbol="object.history"], [data-hb-symbol="object.skill"]) { animation: hb-spin-loop 1s linear infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="object.notification"]) { animation: hb-ring-loop 0.45s ease-in-out infinite alternate; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.contributions"], [data-hb-symbol="nav.ownership"], [data-hb-symbol="nav.referral"], [data-hb-symbol="nav.data-assets"], [data-hb-symbol="nav.agent-exchange"], [data-hb-symbol="nav.your-agents"], [data-hb-symbol="action.add"], [data-hb-symbol="action.camera"], [data-hb-symbol="status.new"], [data-hb-symbol="object.agent"], [data-hb-symbol="object.coin"], [data-hb-symbol="object.leaderboard"], [data-hb-symbol="object.star"], [data-hb-symbol="object.message"], [data-hb-symbol="object.target"], [data-hb-symbol="object.flame"], [data-hb-symbol="object.lightning"], [data-hb-symbol="object.video"], [data-hb-symbol="object.staking"], [data-hb-symbol="object.referral"]) { animation: hb-beat-loop 1.2s ease-in-out infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="action.report-bug"], [data-hb-symbol="action.delete"], [data-hb-symbol="action.unlink"], [data-hb-symbol="status.warning"], [data-hb-symbol="status.error"], [data-hb-symbol="status.locked"], [data-hb-symbol="status.not-found"], [data-hb-symbol="status.alert"], [data-hb-symbol="status.image-unavailable"], [data-hb-symbol="object.gift"], [data-hb-symbol="object.shield-alert"], [data-hb-symbol="object.campaign"]) { animation: hb-shake-loop 1.6s ease-in-out infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="action.search"], [data-hb-symbol="action.preview"], [data-hb-symbol="action.zoom-in"], [data-hb-symbol="action.zoom-out"], [data-hb-symbol="action.scan"]) { animation: hb-scan-loop 1.4s ease-in-out infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.learn"], [data-hb-symbol="action.open-guide"], [data-hb-symbol="status.help"], [data-hb-symbol="object.tag"], [data-hb-symbol="object.attachment"], [data-hb-symbol="object.banknote"]) { animation: hb-sway-loop 1.4s ease-in-out infinite alternate; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.trust"], [data-hb-symbol="action.copy"], [data-hb-symbol="action.hide"], [data-hb-symbol="action.remove"], [data-hb-symbol="action.link"], [data-hb-symbol="action.mint"], [data-hb-symbol="status.success"], [data-hb-symbol="status.info"], [data-hb-symbol="status.verified"], [data-hb-symbol="status.todo"], [data-hb-symbol="object.check"], [data-hb-symbol="object.receipt"], [data-hb-symbol="object.shield"], [data-hb-symbol="object.medal"], [data-hb-symbol="object.reputation"], [data-hb-symbol="object.certificate"], [data-hb-symbol="object.calendar-check"], [data-hb-symbol="object.identity-card"], [data-hb-symbol="object.enrollment"]) { animation: hb-stamp-loop 1.4s cubic-bezier(0.2, 0, 0, 1) infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-cover] { animation: hb-open-loop 1.6s cubic-bezier(0.2, 0, 0, 1) infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-cover="mark"] { animation: hb-open-loop 1.6s cubic-bezier(0.2, 0, 0, 1) infinite, hb-open-hide-loop 1.6s cubic-bezier(0.2, 0, 0, 1) infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > :not([data-hb-cover]) { animation: hb-open-slide-loop 1.6s cubic-bezier(0.2, 0, 0, 1) infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.passport"], [data-hb-symbol="object.passport"]) > [data-hb-inside] { animation: hb-open-slide-loop 1.6s cubic-bezier(0.2, 0, 0, 1) infinite, hb-open-show-loop 1.6s cubic-bezier(0.2, 0, 0, 1) infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.playground"]) > [data-hb-inside] { animation: hb-bubble-loop 1.2s ease-out infinite; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.playground"]) > :nth-child(5) { animation-delay: 0.4s; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.playground"]) > :nth-child(6) { animation-delay: 0.8s; }
  svg[data-hb-loading]:is([data-hb-symbol="nav.campaigns"], [data-hb-symbol="nav.organization"], [data-hb-symbol="action.more"], [data-hb-symbol="action.filter"], [data-hb-symbol="action.grid"], [data-hb-symbol="status.read"], [data-hb-symbol="object.database"], [data-hb-symbol="object.blocks"], [data-hb-symbol="object.microchip"], [data-hb-symbol="object.statement"], [data-hb-symbol="object.chart"], [data-hb-symbol="object.network"], [data-hb-symbol="object.subscription"]) > * {
    animation: hb-cascade-loop 1.5s ease-in-out infinite;
    animation-delay: calc(var(--hb-i, 0) * 150ms);
  }
  svg[data-hb-loading]:is([data-hb-symbol="nav.home"], [data-hb-symbol="nav.my-work"], [data-hb-symbol="nav.earnings"], [data-hb-symbol="nav.marketplace"], [data-hb-symbol="nav.api-keys"], [data-hb-symbol="nav.billing"], [data-hb-symbol="nav.account"], [data-hb-symbol="nav.docs"], [data-hb-symbol="action.edit"], [data-hb-symbol="object.code"], [data-hb-symbol="object.api-key"], [data-hb-symbol="object.document"], [data-hb-symbol="object.invoice"], [data-hb-symbol="object.image"], [data-hb-symbol="object.wallet"], [data-hb-symbol="object.user"], [data-hb-symbol="object.fingerprint"], [data-hb-symbol="object.lineage"], [data-hb-symbol="object.payout"], [data-hb-symbol="object.globe"]) > :not([data-hb-fill], [data-hb-inside], [data-hb-content]) {
    stroke-dasharray: 1;
    animation: hb-draw-loop 1.7s cubic-bezier(0.2, 0, 0, 1) infinite;
    animation-delay: calc(var(--hb-i, 0) * 90ms);
  }
  svg[data-hb-loading]:is([data-hb-symbol="social.github"], [data-hb-symbol="social.huggingface"], [data-hb-symbol="social.kaggle"], [data-hb-symbol="social.x"]) > [data-hb-fill] {
    fill-opacity: 0.18;
    stroke: currentColor;
    stroke-width: 0.9;
    stroke-dasharray: 0.3 0.7;
    animation: hb-trace-loop 1.4s linear infinite;
  }

  /* Sending: the plane leaves to the upper right and the next one arrives. */
  svg[data-hb-loading][data-hb-symbol="social.telegram"] { animation: hb-fly 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

  /* Hunting: the bug sways as it crawls and its antennae twitch. */
  svg[data-hb-loading][data-hb-symbol="object.bug"] { transform-origin: 50% 50%; animation: hb-crawl 0.9s ease-in-out infinite alternate; }
  svg[data-hb-loading][data-hb-symbol="object.bug"] > :nth-child(3) { transform-origin: 10.6px 5.3px; animation: hb-twitch-left 0.45s ease-in-out infinite alternate; }
  svg[data-hb-loading][data-hb-symbol="object.bug"] > :nth-child(4) { transform-origin: 13.4px 5.3px; animation: hb-twitch-right 0.45s ease-in-out infinite alternate; }

  /* The figure is updating: the line climbs to its peak again and again. */
  svg[data-hb-loading][data-hb-symbol="object.trend"] > * { stroke-dasharray: 1; }
  svg[data-hb-loading][data-hb-symbol="object.trend"] > :nth-child(1) { animation: hb-draw-loop 1.7s cubic-bezier(0.2, 0, 0, 1) infinite; }
  svg[data-hb-loading][data-hb-symbol="object.trend"] > :nth-child(2) { animation: hb-arrowhead 1.7s cubic-bezier(0.2, 0, 0, 1) infinite; }

  /* The link is opening: the arrow keeps leaving the box. */
  svg[data-hb-loading][data-hb-symbol="action.external"] > :nth-child(n + 2) { animation: hb-shoot 1.3s cubic-bezier(0.2, 0, 0, 1) infinite; }

  /* Sound keeps leaving the horn. */
  svg[data-hb-loading][data-hb-symbol="object.announcement"] > :nth-child(2) { animation: hb-wave 1.1s ease-out infinite; }

  /* The roster is filling: left, centre, right. */
  svg[data-hb-loading][data-hb-symbol="object.team"] > *,
  svg[data-hb-loading][data-hb-symbol="nav.teams"] > * { animation: hb-cascade-loop 1.5s ease-in-out infinite; }
  svg[data-hb-loading][data-hb-symbol="object.team"] > :nth-child(-n + 2),
  svg[data-hb-loading][data-hb-symbol="nav.teams"] > :nth-child(-n + 2) { animation-delay: 0.22s; }
  svg[data-hb-loading][data-hb-symbol="object.team"] > :nth-child(n + 5),
  svg[data-hb-loading][data-hb-symbol="nav.teams"] > :nth-child(n + 5) { animation-delay: 0.44s; }

  /* The banner sways from its rod and the star rides on the cloth. */
  svg[data-hb-loading][data-hb-symbol="object.guild"] > :nth-child(n + 2) { transform-origin: 12px 3px; animation: hb-sway-loop 1.4s ease-in-out infinite alternate; }
}