/* Nvestiv animated illustrations — design gospel #illustration-contract (owner rules 2026-10-12, B054; homepage B061).
   Each visual is a fixed stage (960×540, or 540×540 square) of real HTML + one SVG of wires, scaled to its slot by src/site.js
   (--k). Components copy measured 21st.dev styles (magicui animated-beam/animated-list, isaiahbjork agent-plan, n8n workflow
   block, shadcnspace integration-card, kokonutd v0 chat; all MIT, re-implemented) in Nvestiv tokens.
   Motion: beat--{in|pop|out|draw|type|show|on}-N[-M] classes (N, M = deciseconds into --illus-loop). Their keyframes are
   generated below the marker by scripts/build_illustrations.exs; the spring easing sits on each element, not in keyframes. */
@layer components {
  .illus {
    /* Short local names for the --illus-* / --status-* tokens in brand/tokens.css (the fragments' inline styles use these). */
    --ok: var(--status-success); --warn: var(--status-attention);
    --ink: var(--illus-ink); --ink-2: var(--illus-ink-2); --ink-3: var(--illus-ink-3); --ink-4: var(--illus-ink-4);
    --hair: var(--illus-hair); --hair-2: var(--illus-hair-2); --well: var(--illus-well);
    --illus-w: var(--illus-stage-w); --illus-h: var(--illus-stage-h);
    display: block; overflow: hidden; contain: layout paint; margin: 0; padding: 0; /* position comes from the slot: gallery and bento visuals are absolute fills */
    /* Black-teal stage (owner 2026-10-12: no blue), muted to glass (owner 2026-10-13): only the UI on it is solid. */
    background: var(--illus-stage-fill);
    font: 400 14px/1.4 var(--font-ui); color: var(--ink); text-align: start;
  }
  .illus--square { --illus-w: var(--illus-stage-square); --illus-h: var(--illus-stage-square); }
  /* Free sections and the hero stage have no card around them: the stage is its own framed 16:9 surface. */
  .hero-layout__visual.illus { margin-top: var(--gap-header-content); }
  .free-split__visual.illus, .hero-layout__visual.illus, .split-card__visual.illus { position: relative; aspect-ratio: 16 / 9; min-height: 0; align-self: center; border: 1px solid var(--hair); border-radius: var(--feature-card-radius); }
  /* With no card behind them, these stages carry the card glass themselves: sheen and fill over the scene. */
  .free-split__visual.illus, .hero-layout__visual.illus { background: var(--nav-glass-sheen), var(--illus-stage-fill), var(--card-glass-fill); box-shadow: inset 0 1px 0 var(--nav-glass-highlight); }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .illus, .free-split__visual.illus, .hero-layout__visual.illus { background: var(--surface-stage); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  /* Square free-section visuals (spec rule 22): the visual column is wider than the copy so UI text reads near real size. */
  .free-split__visual.illus.illus--square, .split-card__visual.illus { aspect-ratio: 1; }
  @media (min-width: 48rem) {
    .free-split:has(> .illus--square) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
    .free-split--reverse:has(> .illus--square) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  }
  /* Card visual (spec rule 21): laid over its 16:9 slot; on hover / focus it grows to fill the card while the label and
     title slide to the bottom (--card-grow, --card-drop from src/site.js) and the body fades. The card keeps its size. */
  .content-card__media:has(> .illus) { position: relative; overflow: visible; }
  .content-card__media > .illus.content-card__visual { animation: none; scale: none; translate: none; } /* no scroll drift: it would crop the stage edges and, unclipped, spill past the card */
  .content-card__media > .illus { position: absolute; inset: 0 0 auto; height: 100%; border-radius: var(--bento-inner-radius) var(--bento-inner-radius) 0 0; transition: height var(--feature-card-duration) var(--feature-card-ease), border-radius var(--feature-card-duration) var(--feature-card-ease); }
  .content-card:has(> .content-card__media > .illus) > .content-card__copy { position: relative; z-index: 1; }
  .content-card:has(> .content-card__media > .illus) > .content-card__copy::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 0 0 var(--bento-inner-radius) var(--bento-inner-radius); background: var(--gallery-scrim); opacity: 0; transition: opacity var(--feature-card-duration) var(--feature-card-ease); }
  .content-card:has(> .content-card__media > .illus) > .content-card__copy > * { transition: transform var(--feature-card-duration) var(--feature-card-ease), opacity var(--duration-moderate) var(--ease-enter); }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .content-card:is(:hover, :focus-within) > .content-card__media > .illus { height: calc(100% + var(--card-grow, 0px)); border-radius: var(--bento-inner-radius); transform: none; }
    .content-card:has(> .content-card__media > .illus):is(:hover, :focus-within) > .content-card__copy::before { opacity: 1; }
    .content-card:has(> .content-card__media > .illus):is(:hover, :focus-within) > .content-card__copy > :is(h3, .section-label) { transform: translateY(var(--card-drop, 0)); }
    .content-card:has(> .content-card__media > .illus):is(:hover, :focus-within) > .content-card__copy > :not(h3, .section-label) { opacity: 0; }
  }
  .gallery__visual.illus { padding: 0; }
  .illus::before { /* film grain, as on the live-site backdrops */
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .18;
    background: url("backgrounds/site-grain.webp") 0 0 / 200px 200px;
  }
  /* Stage: centred and contained by default; --top pins it to the top edge (gallery, bento). --k comes from src/site.js. */
  /* --illus-dx / --illus-dy (src/site.js) centre the stage's content box, not the stage, in its slot (fit to content). */
  .illus__canvas { position: absolute; left: 50%; top: 50%; width: var(--illus-w); height: var(--illus-h); transform: translate(-50%, -50%) translate(var(--illus-dx, 0px), var(--illus-dy, 0px)) scale(var(--k, .4)); transform-origin: 50% 50%; }
  .illus--top .illus__canvas { top: 0; transform: translateX(-50%) translate(var(--illus-dx, 0px), var(--illus-dy, 0px)) scale(var(--k, .4)); transform-origin: 50% 0; }
  .illus .illus__canvas > * { position: absolute; box-sizing: border-box; }
  .illus__wires { inset: 0; width: var(--illus-w); height: var(--illus-h); overflow: visible; pointer-events: none; }

  .illus__icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .illus__icon--sm { width: 13px; height: 13px; }
  .illus__icon--spin { animation: illus-spin .9s linear infinite; transform-box: fill-box; transform-origin: center; }

  /* Card: translucent UI black, hairline border, inset top glow, layered soft shadow (animated-list dark + agent-plan) */
  .illus__card {
    box-sizing: border-box; padding: 16px; border-radius: 16px; border: 1px solid var(--hair); background: var(--illus-card-fill);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), inset 0 -20px 60px -24px rgb(255 255 255 / 6%), 0 0 0 1px rgb(0 0 0 / 35%), 0 2px 4px rgb(0 0 0 / 20%), 0 24px 48px -12px rgb(0 0 0 / 55%);
    display: flex; flex-direction: column; gap: 10px;
  }
  /* A pop-up card sits over other parts: it keeps the card's opaque base, or the rows under it show through. */
  .illus__card--pop { background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1.5%)), var(--illus-card-fill); }
  .illus__card--dim { opacity: .45; filter: saturate(.6); }
  .illus__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .illus__end { margin-left: auto; }
  .illus__title { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
  .illus__sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
  .illus__label { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
  .illus__meta { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .illus__text { font-size: 13px; color: var(--ink-2); }
  .illus__sep { height: 1px; background: var(--hair-2); margin: 2px -16px; }
  .illus__stack { display: flex; flex-direction: column; gap: 6px; }
  .illus__skel { height: 7px; border-radius: 4px; background: rgb(207 213 227 / 11%); }

  /* Rows (agent-plan task rows, well variant from the n8n canvas) */
  .illus__row { box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--ink-2); min-width: 0; position: relative; }
  .illus__row--well { background: var(--well); border: 1px solid var(--hair-2); }
  .illus__row--hl { background: rgb(91 152 182 / 9%); border-color: rgb(91 152 182 / 30%); }
  .illus__row--warn { background: rgb(229 161 58 / 8%); border-color: rgb(229 161 58 / 35%); }
  .illus__row > .illus__meta:last-child, .illus__row > .illus__chip:last-child { margin-left: auto; }
  .illus__row .illus__icon { color: var(--ink-3); }

  /* Chips and badges: icon + word, tinted 10% fill / 38% border (n8n status pill) */
  .illus__chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 500; white-space: nowrap; color: var(--ink-2); background: rgb(255 255 255 / 5%); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgb(0 0 0 / 20%); box-sizing: border-box; }
  .illus__chip .illus__icon { width: 13px; height: 13px; }
  .illus__chip img { width: 14px; height: 14px; border-radius: 3px; }
  .illus__chip.is-ok { color: var(--ok); background: rgb(63 182 139 / 10%); border-color: rgb(63 182 139 / 38%); }
  .illus__chip.is-warn { color: var(--warn); background: rgb(229 161 58 / 10%); border-color: rgb(229 161 58 / 38%); }
  .illus__chip.is-flow { color: var(--teal-300); background: rgb(91 152 182 / 10%); border-color: rgb(91 152 182 / 38%); }
  .illus__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--navy-900); background: var(--teal-200); }
  .illus__cite { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 10.5px; font-weight: 600; color: var(--teal-200); background: rgb(91 152 182 / 14%); border: 1px solid rgb(91 152 182 / 40%); box-sizing: border-box; vertical-align: 1px; }
  .illus__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

  /* App tiles (integration-card). Before the small parts below: .illus__ini and .illus__src resize a tile, and at equal
     specificity the later rule wins (a 52px tile in a 44px row spilled out of it). */
  .illus__tile { display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; border-radius: 14px; background: var(--icon-tile-fill); border: 1px solid var(--hair); box-shadow: var(--icon-tile-shadow); }
  .illus__tile img { width: 26px; height: 26px; object-fit: contain; }
  .illus__tile--light { background: var(--navy-50); }
  .illus__tile .illus__icon { width: 22px; height: 22px; color: var(--ink-2); }

  /* Small parts first built inside single visuals (IL-08, IL-10, IL-11) */
  .illus__ini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
  .illus__col { display: flex; width: 96px; }
  .illus__tabs { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--well); border: 1px solid var(--hair-2); }
  .illus__tabs > span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 12px; color: var(--ink-3); }
  .illus__tabs > .is-on { color: var(--ink); background: rgb(255 255 255 / 8%); box-shadow: inset 0 0 0 1px var(--hair); }
  .illus__src { width: 26px; height: 26px; border-radius: 7px; }
  .illus__src img { width: 16px; height: 16px; }
  .illus__src .illus__icon { width: 15px; height: 15px; }
  .illus__bar { position: absolute; left: 330px; top: 21px; width: 110px; height: 2px; border-radius: 1px; background: var(--hair); }
  .illus__bar--fill { background: var(--teal-400); }

  /* People: initials only */
  .illus__avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--ink); background: var(--illus-avatar-fill); box-shadow: 0 0 0 1px rgb(255 255 255 / 14%), 0 2px 6px rgb(0 0 0 / 40%); }
  .illus__avatar--sm { width: 20px; height: 20px; font-size: 8.5px; }
  .illus__avatar--lg { width: 40px; height: 40px; font-size: 13px; }
  .illus__avatars { display: flex; } .illus__avatars > * + * { margin-left: -6px; }

  /* IRIS: the app's animated GradientOrb (shared WebGL painter in src/site.js; owner 2026-10-12) + italic speech.
     The CSS disc in the same palette is the no-JS fallback. */
  .illus__orb { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--illus-orb-fallback); }
  .illus__orb > canvas { position: absolute; inset: -10%; width: 120%; height: 120%; }
  .illus__orb.has-gl { background: none; }
  .illus__iris { display: flex; gap: 10px; align-items: flex-start; }
  .illus__iris p { margin: 0; font-size: 13.5px; font-style: italic; line-height: 1.5; color: var(--peri-200); }

  /* Chat (v0-ai-chat composer; bubbles in the same hairline style) */
  .illus__bubble { box-sizing: border-box; padding: 9px 13px; border-radius: 14px 14px 4px 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink); background: rgb(255 255 255 / 8%); border: 1px solid var(--hair); }
  .illus__composer { display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 10px 10px 10px 14px; border-radius: 12px; font-size: 14px; color: var(--ink); background: rgb(0 0 0 / 58%); border: 1px solid rgb(255 255 255 / 12%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 16px 40px -12px rgb(0 0 0 / 60%); }
  .illus__composer-ph { color: var(--ink-4); }
  .illus__send { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; flex: none; border-radius: 8px; color: var(--ink-3); border: 1px solid rgb(255 255 255 / 15%); }
  .illus__send.is-ready { color: var(--navy-900); background: var(--navy-50); border-color: transparent; }
  .illus__caret { display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: var(--teal-300); animation: illus-caret 1s steps(1) infinite; }

  /* Buttons: the site's two looks (primary off-white pill, secondary hairline pill) */
  .illus__btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; color: var(--ink); border: 1px solid rgb(255 255 255 / 18%); box-sizing: border-box; white-space: nowrap; }
  .illus__btn--primary { color: var(--navy-900); background: var(--navy-50); border-color: transparent; }

  /* Workflow nodes (n8n block) */
  .illus__node { box-sizing: border-box; width: 196px; padding: 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 8px; background: rgb(0 0 0 / 50%); border: 1px solid rgb(91 152 182 / 32%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 10px 15px -3px rgb(0 0 0 / 35%), 0 4px 6px -4px rgb(0 0 0 / 30%); }
  .illus__node-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--teal-300); background: rgb(91 152 182 / 12%); border: 1px solid rgb(91 152 182 / 40%); box-sizing: border-box; }
  .illus__node-type { align-self: flex-start; padding: 1px 6px; border-radius: var(--radius-pill); font-size: 9px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); background: rgb(255 255 255 / 5%); }
  .illus__node-title { font-size: 13px; font-weight: 600; letter-spacing: -.02em; }
  .illus__node-desc { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
  .illus__node-foot { display: flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

  /* App window chrome */
  .illus__window { padding: 0; gap: 0; overflow: hidden; }
  .illus__window-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--hair-2); flex: none; }
  .illus__window-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 14%); }

  /* Wires: 1.5px line + a light beam travelling source → destination (integration-card dash method; paths are drawn
     from source to destination, pathLength="1"). Joints mark both ends. */
  .illus__wire { fill: none; stroke: rgb(91 152 182 / 42%); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
  .illus__wire.is-dim { stroke: rgb(207 213 227 / 22%); stroke-dasharray: 4 6; }
  .illus__beam { fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .07 1.4; stroke-dashoffset: .07; opacity: 0; filter: drop-shadow(0 0 2px var(--teal-200)) drop-shadow(0 0 7px var(--teal-400)); }
  .illus__beam--tail { stroke: var(--teal-200); stroke-width: 2; stroke-linecap: butt; stroke-dasharray: .3 1.4; stroke-dashoffset: .3; filter: drop-shadow(0 0 4px var(--teal-500)); stroke-opacity: .55; }
  .illus__joint { fill: var(--navy-900); stroke: var(--teal-400); stroke-width: 1.5; }

  /* Active element: the site card border beam (.content-card::after), revealed by a beat--on-N[-M] class. */
  .illus .is-active { isolation: isolate; }
  .illus .is-active::after { content: ''; position: absolute; inset: -1px; padding: var(--card-beam-width); border-radius: inherit; background: conic-gradient(from var(--card-beam-angle), transparent, var(--card-beam-color) var(--card-beam-length), transparent calc(var(--card-beam-length) * 1.2)); -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); mask-composite: exclude; opacity: 0; pointer-events: none; }

  .illus [class*="beat--"] { transform-box: fill-box; transform-origin: center; }
  /* Paused off screen and in closed gallery panels (src/site.js sets .is-paused). */
  .illus.is-paused *, .illus.is-paused *::after { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) {
    .illus *, .illus *::after { animation: none !important; }
    .illus .illus__beam { display: none; }
  }
}
@keyframes illus-beam { from { stroke-dashoffset: .07; } to { stroke-dashoffset: -1.07; } }
@keyframes illus-beam-tail { from { stroke-dashoffset: .3; } to { stroke-dashoffset: -.84; } }
@keyframes illus-caret { 50% { opacity: 0; } }
@keyframes illus-spin { to { rotate: 360deg; } }
/* beats:generated — everything below is written by scripts/build_illustrations.exs; do not edit by hand. */
@keyframes beat--draw-10 { 0%, 11.11% { stroke-dashoffset: 1; opacity: 1; } 18.89%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-10 { animation: beat--draw-10 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-12 { 0%, 13.33% { stroke-dashoffset: 1; opacity: 1; } 21.11%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-12 { animation: beat--draw-12 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-13 { 0%, 14.44% { stroke-dashoffset: 1; opacity: 1; } 22.22%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-13 { animation: beat--draw-13 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-14 { 0%, 15.56% { stroke-dashoffset: 1; opacity: 1; } 23.33%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-14 { animation: beat--draw-14 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-16 { 0%, 17.78% { stroke-dashoffset: 1; opacity: 1; } 25.56%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-16 { animation: beat--draw-16 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-18 { 0%, 20.00% { stroke-dashoffset: 1; opacity: 1; } 27.78%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-18 { animation: beat--draw-18 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-20 { 0%, 22.22% { stroke-dashoffset: 1; opacity: 1; } 30.00%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-20 { animation: beat--draw-20 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-22 { 0%, 24.44% { stroke-dashoffset: 1; opacity: 1; } 32.22%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-22 { animation: beat--draw-22 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-24 { 0%, 26.67% { stroke-dashoffset: 1; opacity: 1; } 34.44%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-24 { animation: beat--draw-24 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-26 { 0%, 28.89% { stroke-dashoffset: 1; opacity: 1; } 36.67%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-26 { animation: beat--draw-26 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-27 { 0%, 30.00% { stroke-dashoffset: 1; opacity: 1; } 37.78%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-27 { animation: beat--draw-27 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-28 { 0%, 31.11% { stroke-dashoffset: 1; opacity: 1; } 38.89%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-28 { animation: beat--draw-28 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-30 { 0%, 33.33% { stroke-dashoffset: 1; opacity: 1; } 41.11%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-30 { animation: beat--draw-30 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-32 { 0%, 35.56% { stroke-dashoffset: 1; opacity: 1; } 43.33%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-32 { animation: beat--draw-32 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-34 { 0%, 37.78% { stroke-dashoffset: 1; opacity: 1; } 45.56%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-34 { animation: beat--draw-34 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-38 { 0%, 42.22% { stroke-dashoffset: 1; opacity: 1; } 50.00%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-38 { animation: beat--draw-38 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-4 { 0%, 4.44% { stroke-dashoffset: 1; opacity: 1; } 12.22%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-4 { animation: beat--draw-4 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-40 { 0%, 44.44% { stroke-dashoffset: 1; opacity: 1; } 52.22%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-40 { animation: beat--draw-40 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-41 { 0%, 45.56% { stroke-dashoffset: 1; opacity: 1; } 53.33%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-41 { animation: beat--draw-41 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-44 { 0%, 48.89% { stroke-dashoffset: 1; opacity: 1; } 56.67%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-44 { animation: beat--draw-44 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-46 { 0%, 51.11% { stroke-dashoffset: 1; opacity: 1; } 58.89%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-46 { animation: beat--draw-46 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-48 { 0%, 53.33% { stroke-dashoffset: 1; opacity: 1; } 61.11%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-48 { animation: beat--draw-48 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-6 { 0%, 6.67% { stroke-dashoffset: 1; opacity: 1; } 14.44%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-6 { animation: beat--draw-6 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--draw-8 { 0%, 8.89% { stroke-dashoffset: 1; opacity: 1; } 16.67%, 94.4% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.beat--draw-8 { animation: beat--draw-8 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--in-10 { 0%, 11.11% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 18.89%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-10 { animation: beat--in-10 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-11 { 0%, 12.22% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 20.00%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-11 { animation: beat--in-11 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-12 { 0%, 13.33% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 21.11%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-12 { animation: beat--in-12 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-14 { 0%, 15.56% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 23.33%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-14 { animation: beat--in-14 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-16 { 0%, 17.78% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 25.56%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-16 { animation: beat--in-16 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-17 { 0%, 18.89% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 26.67%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-17 { animation: beat--in-17 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-18 { 0%, 20.00% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 27.78%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-18 { animation: beat--in-18 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-19 { 0%, 21.11% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 28.89%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-19 { animation: beat--in-19 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-2 { 0%, 2.22% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 10.00%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-2 { animation: beat--in-2 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-20 { 0%, 22.22% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 30.00%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-20 { animation: beat--in-20 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-22 { 0%, 24.44% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 32.22%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-22 { animation: beat--in-22 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-24 { 0%, 26.67% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 34.44%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-24 { animation: beat--in-24 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-26 { 0%, 28.89% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 36.67%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-26 { animation: beat--in-26 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-28 { 0%, 31.11% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 38.89%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-28 { animation: beat--in-28 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-30 { 0%, 33.33% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 41.11%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-30 { animation: beat--in-30 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-32 { 0%, 35.56% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 43.33%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-32 { animation: beat--in-32 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-34 { 0%, 37.78% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 45.56%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-34 { animation: beat--in-34 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-36 { 0%, 40.00% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 47.78%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-36 { animation: beat--in-36 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-38 { 0%, 42.22% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 50.00%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-38 { animation: beat--in-38 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-4 { 0%, 4.44% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 12.22%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-4 { animation: beat--in-4 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-40 { 0%, 44.44% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 52.22%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-40 { animation: beat--in-40 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-42 { 0%, 46.67% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 54.44%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-42 { animation: beat--in-42 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-44 { 0%, 48.89% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 56.67%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-44 { animation: beat--in-44 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-45 { 0%, 50.00% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 57.78%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-45 { animation: beat--in-45 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-46 { 0%, 51.11% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 58.89%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-46 { animation: beat--in-46 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-48 { 0%, 53.33% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 61.11%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-48 { animation: beat--in-48 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-50 { 0%, 55.56% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 63.33%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-50 { animation: beat--in-50 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-52 { 0%, 57.78% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 65.56%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-52 { animation: beat--in-52 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-54 { 0%, 60.00% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 67.78%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-54 { animation: beat--in-54 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-57 { 0%, 63.33% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 71.11%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-57 { animation: beat--in-57 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-6 { 0%, 6.67% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 14.44%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-6 { animation: beat--in-6 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-60 { 0%, 66.67% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 74.44%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-60 { animation: beat--in-60 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--in-8 { 0%, 8.89% { opacity: 0; translate: var(--from, 0 12px); scale: var(--from-scale, .98); } 16.67%, 94.4% { opacity: 1; translate: 0 0; scale: 1; } 99%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
.beat--in-8 { animation: beat--in-8 var(--illus-loop) var(--ease-spring-snappy) infinite; }
@keyframes beat--on-0-14 { 0%, 0.00% { opacity: 0; } 5.56%, 15.56% { opacity: 1; } 21.11%, 100% { opacity: 0; } }
.beat--on-0-14::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-0-14 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-10-16 { 0%, 11.11% { opacity: 0; } 16.67%, 17.78% { opacity: 1; } 23.33%, 100% { opacity: 0; } }
.beat--on-10-16::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-10-16 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-10-20 { 0%, 11.11% { opacity: 0; } 16.67%, 22.22% { opacity: 1; } 27.78%, 100% { opacity: 0; } }
.beat--on-10-20::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-10-20 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-11-18 { 0%, 12.22% { opacity: 0; } 17.78%, 20.00% { opacity: 1; } 25.56%, 100% { opacity: 0; } }
.beat--on-11-18::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-11-18 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-12-22 { 0%, 13.33% { opacity: 0; } 18.89%, 24.44% { opacity: 1; } 30.00%, 100% { opacity: 0; } }
.beat--on-12-22::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-12-22 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-14 { 0%, 15.56% { opacity: 0; } 21.11%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-14::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-14 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-14-24 { 0%, 15.56% { opacity: 0; } 21.11%, 26.67% { opacity: 1; } 32.22%, 100% { opacity: 0; } }
.beat--on-14-24::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-14-24 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-16 { 0%, 17.78% { opacity: 0; } 23.33%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-16::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-16 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-16-24 { 0%, 17.78% { opacity: 0; } 23.33%, 26.67% { opacity: 1; } 32.22%, 100% { opacity: 0; } }
.beat--on-16-24::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-16-24 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-16-28 { 0%, 17.78% { opacity: 0; } 23.33%, 31.11% { opacity: 1; } 36.67%, 100% { opacity: 0; } }
.beat--on-16-28::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-16-28 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-16-46 { 0%, 17.78% { opacity: 0; } 23.33%, 51.11% { opacity: 1; } 56.67%, 100% { opacity: 0; } }
.beat--on-16-46::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-16-46 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-18-25 { 0%, 20.00% { opacity: 0; } 25.56%, 27.78% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
.beat--on-18-25::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-18-25 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-18-30 { 0%, 20.00% { opacity: 0; } 25.56%, 33.33% { opacity: 1; } 38.89%, 100% { opacity: 0; } }
.beat--on-18-30::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-18-30 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-19-31 { 0%, 21.11% { opacity: 0; } 26.67%, 34.44% { opacity: 1; } 40.00%, 100% { opacity: 0; } }
.beat--on-19-31::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-19-31 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-12 { 0%, 2.22% { opacity: 0; } 7.78%, 13.33% { opacity: 1; } 18.89%, 100% { opacity: 0; } }
.beat--on-2-12::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-12 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-14 { 0%, 2.22% { opacity: 0; } 7.78%, 15.56% { opacity: 1; } 21.11%, 100% { opacity: 0; } }
.beat--on-2-14::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-14 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-18 { 0%, 2.22% { opacity: 0; } 7.78%, 20.00% { opacity: 1; } 25.56%, 100% { opacity: 0; } }
.beat--on-2-18::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-18 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-24 { 0%, 2.22% { opacity: 0; } 7.78%, 26.67% { opacity: 1; } 32.22%, 100% { opacity: 0; } }
.beat--on-2-24::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-24 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-26 { 0%, 2.22% { opacity: 0; } 7.78%, 28.89% { opacity: 1; } 34.44%, 100% { opacity: 0; } }
.beat--on-2-26::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-26 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-28 { 0%, 2.22% { opacity: 0; } 7.78%, 31.11% { opacity: 1; } 36.67%, 100% { opacity: 0; } }
.beat--on-2-28::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-28 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-36 { 0%, 2.22% { opacity: 0; } 7.78%, 40.00% { opacity: 1; } 45.56%, 100% { opacity: 0; } }
.beat--on-2-36::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-36 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-44 { 0%, 2.22% { opacity: 0; } 7.78%, 48.89% { opacity: 1; } 54.44%, 100% { opacity: 0; } }
.beat--on-2-44::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-44 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-2-6 { 0%, 2.22% { opacity: 0; } 7.78%, 6.67% { opacity: 1; } 12.22%, 100% { opacity: 0; } }
.beat--on-2-6::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-2-6 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-20-30 { 0%, 22.22% { opacity: 0; } 27.78%, 33.33% { opacity: 1; } 38.89%, 100% { opacity: 0; } }
.beat--on-20-30::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-20-30 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-20-36 { 0%, 22.22% { opacity: 0; } 27.78%, 40.00% { opacity: 1; } 45.56%, 100% { opacity: 0; } }
.beat--on-20-36::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-20-36 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-24-32 { 0%, 26.67% { opacity: 0; } 32.22%, 35.56% { opacity: 1; } 41.11%, 100% { opacity: 0; } }
.beat--on-24-32::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-24-32 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-24-34 { 0%, 26.67% { opacity: 0; } 32.22%, 37.78% { opacity: 1; } 43.33%, 100% { opacity: 0; } }
.beat--on-24-34::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-24-34 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-25-32 { 0%, 27.78% { opacity: 0; } 33.33%, 35.56% { opacity: 1; } 41.11%, 100% { opacity: 0; } }
.beat--on-25-32::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-25-32 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-26 { 0%, 28.89% { opacity: 0; } 34.44%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-26::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-26 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-26-34 { 0%, 28.89% { opacity: 0; } 34.44%, 37.78% { opacity: 1; } 43.33%, 100% { opacity: 0; } }
.beat--on-26-34::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-26-34 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-26-36 { 0%, 28.89% { opacity: 0; } 34.44%, 40.00% { opacity: 1; } 45.56%, 100% { opacity: 0; } }
.beat--on-26-36::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-26-36 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-26-44 { 0%, 28.89% { opacity: 0; } 34.44%, 48.89% { opacity: 1; } 54.44%, 100% { opacity: 0; } }
.beat--on-26-44::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-26-44 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-28 { 0%, 31.11% { opacity: 0; } 36.67%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-28::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-28 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-28-48 { 0%, 31.11% { opacity: 0; } 36.67%, 53.33% { opacity: 1; } 58.89%, 100% { opacity: 0; } }
.beat--on-28-48::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-28-48 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-30 { 0%, 33.33% { opacity: 0; } 38.89%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-30::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-30 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-30-48 { 0%, 33.33% { opacity: 0; } 38.89%, 53.33% { opacity: 1; } 58.89%, 100% { opacity: 0; } }
.beat--on-30-48::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-30-48 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-32-39 { 0%, 35.56% { opacity: 0; } 41.11%, 43.33% { opacity: 1; } 48.89%, 100% { opacity: 0; } }
.beat--on-32-39::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-32-39 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-32-44 { 0%, 35.56% { opacity: 0; } 41.11%, 48.89% { opacity: 1; } 54.44%, 100% { opacity: 0; } }
.beat--on-32-44::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-32-44 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-34 { 0%, 37.78% { opacity: 0; } 43.33%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-34::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-34 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-34-42 { 0%, 37.78% { opacity: 0; } 43.33%, 46.67% { opacity: 1; } 52.22%, 100% { opacity: 0; } }
.beat--on-34-42::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-34-42 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-34-44 { 0%, 37.78% { opacity: 0; } 43.33%, 48.89% { opacity: 1; } 54.44%, 100% { opacity: 0; } }
.beat--on-34-44::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-34-44 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-34-46 { 0%, 37.78% { opacity: 0; } 43.33%, 51.11% { opacity: 1; } 56.67%, 100% { opacity: 0; } }
.beat--on-34-46::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-34-46 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-34-50 { 0%, 37.78% { opacity: 0; } 43.33%, 55.56% { opacity: 1; } 61.11%, 100% { opacity: 0; } }
.beat--on-34-50::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-34-50 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-39-46 { 0%, 43.33% { opacity: 0; } 48.89%, 51.11% { opacity: 1; } 56.67%, 100% { opacity: 0; } }
.beat--on-39-46::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-39-46 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-4-11 { 0%, 4.44% { opacity: 0; } 10.00%, 12.22% { opacity: 1; } 17.78%, 100% { opacity: 0; } }
.beat--on-4-11::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-4-11 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-4-12 { 0%, 4.44% { opacity: 0; } 10.00%, 13.33% { opacity: 1; } 18.89%, 100% { opacity: 0; } }
.beat--on-4-12::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-4-12 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-4-14 { 0%, 4.44% { opacity: 0; } 10.00%, 15.56% { opacity: 1; } 21.11%, 100% { opacity: 0; } }
.beat--on-4-14::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-4-14 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-4-30 { 0%, 4.44% { opacity: 0; } 10.00%, 33.33% { opacity: 1; } 38.89%, 100% { opacity: 0; } }
.beat--on-4-30::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-4-30 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-4-32 { 0%, 4.44% { opacity: 0; } 10.00%, 35.56% { opacity: 1; } 41.11%, 100% { opacity: 0; } }
.beat--on-4-32::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-4-32 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-40 { 0%, 44.44% { opacity: 0; } 50.00%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-40::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-40 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-42-50 { 0%, 46.67% { opacity: 0; } 52.22%, 55.56% { opacity: 1; } 61.11%, 100% { opacity: 0; } }
.beat--on-42-50::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-42-50 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-42-52 { 0%, 46.67% { opacity: 0; } 52.22%, 57.78% { opacity: 1; } 63.33%, 100% { opacity: 0; } }
.beat--on-42-52::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-42-52 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-44 { 0%, 48.89% { opacity: 0; } 54.44%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-44::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-44 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-44-52 { 0%, 48.89% { opacity: 0; } 54.44%, 57.78% { opacity: 1; } 63.33%, 100% { opacity: 0; } }
.beat--on-44-52::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-44-52 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-44-56 { 0%, 48.89% { opacity: 0; } 54.44%, 62.22% { opacity: 1; } 67.78%, 100% { opacity: 0; } }
.beat--on-44-56::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-44-56 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-45-57 { 0%, 50.00% { opacity: 0; } 55.56%, 63.33% { opacity: 1; } 68.89%, 100% { opacity: 0; } }
.beat--on-45-57::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-45-57 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-46 { 0%, 51.11% { opacity: 0; } 56.67%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-46::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-46 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-48 { 0%, 53.33% { opacity: 0; } 58.89%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-48::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-48 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-48-66 { 0%, 53.33% { opacity: 0; } 58.89%, 73.33% { opacity: 1; } 78.89%, 100% { opacity: 0; } }
.beat--on-48-66::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-48-66 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-50 { 0%, 55.56% { opacity: 0; } 61.11%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-50::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-50 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-52 { 0%, 57.78% { opacity: 0; } 63.33%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-52::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-52 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-52-62 { 0%, 57.78% { opacity: 0; } 63.33%, 68.89% { opacity: 1; } 74.44%, 100% { opacity: 0; } }
.beat--on-52-62::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-52-62 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-58-70 { 0%, 64.44% { opacity: 0; } 70.00%, 77.78% { opacity: 1; } 83.33%, 100% { opacity: 0; } }
.beat--on-58-70::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-58-70 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-6-10 { 0%, 6.67% { opacity: 0; } 12.22%, 11.11% { opacity: 1; } 16.67%, 100% { opacity: 0; } }
.beat--on-6-10::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-6-10 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-6-16 { 0%, 6.67% { opacity: 0; } 12.22%, 17.78% { opacity: 1; } 23.33%, 100% { opacity: 0; } }
.beat--on-6-16::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-6-16 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-6-18 { 0%, 6.67% { opacity: 0; } 12.22%, 20.00% { opacity: 1; } 25.56%, 100% { opacity: 0; } }
.beat--on-6-18::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-6-18 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-6-22 { 0%, 6.67% { opacity: 0; } 12.22%, 24.44% { opacity: 1; } 30.00%, 100% { opacity: 0; } }
.beat--on-6-22::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-6-22 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-6-26 { 0%, 6.67% { opacity: 0; } 12.22%, 28.89% { opacity: 1; } 34.44%, 100% { opacity: 0; } }
.beat--on-6-26::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-6-26 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-60 { 0%, 66.67% { opacity: 0; } 72.22%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-60::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-60 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--on-62 { 0%, 68.89% { opacity: 0; } 74.44%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--on-62::after { animation: card-beam var(--card-beam-duration) linear infinite, beat--on-62 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-10 { 0%, 11.11% { opacity: 1; scale: 1; } 16.67%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-10 { opacity: 0; animation: beat--out-10 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-11 { 0%, 12.22% { opacity: 1; scale: 1; } 17.78%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-11 { opacity: 0; animation: beat--out-11 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-12 { 0%, 13.33% { opacity: 1; scale: 1; } 18.89%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-12 { opacity: 0; animation: beat--out-12 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-13 { 0%, 14.44% { opacity: 1; scale: 1; } 20.00%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-13 { opacity: 0; animation: beat--out-13 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-14 { 0%, 15.56% { opacity: 1; scale: 1; } 21.11%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-14 { opacity: 0; animation: beat--out-14 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-16 { 0%, 17.78% { opacity: 1; scale: 1; } 23.33%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-16 { opacity: 0; animation: beat--out-16 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-17 { 0%, 18.89% { opacity: 1; scale: 1; } 24.44%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-17 { opacity: 0; animation: beat--out-17 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-18 { 0%, 20.00% { opacity: 1; scale: 1; } 25.56%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-18 { opacity: 0; animation: beat--out-18 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-19 { 0%, 21.11% { opacity: 1; scale: 1; } 26.67%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-19 { opacity: 0; animation: beat--out-19 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-20 { 0%, 22.22% { opacity: 1; scale: 1; } 27.78%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-20 { opacity: 0; animation: beat--out-20 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-22 { 0%, 24.44% { opacity: 1; scale: 1; } 30.00%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-22 { opacity: 0; animation: beat--out-22 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-24 { 0%, 26.67% { opacity: 1; scale: 1; } 32.22%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-24 { opacity: 0; animation: beat--out-24 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-26 { 0%, 28.89% { opacity: 1; scale: 1; } 34.44%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-26 { opacity: 0; animation: beat--out-26 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-27 { 0%, 30.00% { opacity: 1; scale: 1; } 35.56%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-27 { opacity: 0; animation: beat--out-27 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-28 { 0%, 31.11% { opacity: 1; scale: 1; } 36.67%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-28 { opacity: 0; animation: beat--out-28 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-30 { 0%, 33.33% { opacity: 1; scale: 1; } 38.89%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-30 { opacity: 0; animation: beat--out-30 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-31 { 0%, 34.44% { opacity: 1; scale: 1; } 40.00%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-31 { opacity: 0; animation: beat--out-31 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-32 { 0%, 35.56% { opacity: 1; scale: 1; } 41.11%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-32 { opacity: 0; animation: beat--out-32 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-34 { 0%, 37.78% { opacity: 1; scale: 1; } 43.33%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-34 { opacity: 0; animation: beat--out-34 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-36 { 0%, 40.00% { opacity: 1; scale: 1; } 45.56%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-36 { opacity: 0; animation: beat--out-36 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-37 { 0%, 41.11% { opacity: 1; scale: 1; } 46.67%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-37 { opacity: 0; animation: beat--out-37 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-38 { 0%, 42.22% { opacity: 1; scale: 1; } 47.78%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-38 { opacity: 0; animation: beat--out-38 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-4 { 0%, 4.44% { opacity: 1; scale: 1; } 10.00%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-4 { opacity: 0; animation: beat--out-4 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-40 { 0%, 44.44% { opacity: 1; scale: 1; } 50.00%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-40 { opacity: 0; animation: beat--out-40 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-41 { 0%, 45.56% { opacity: 1; scale: 1; } 51.11%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-41 { opacity: 0; animation: beat--out-41 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-42 { 0%, 46.67% { opacity: 1; scale: 1; } 52.22%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-42 { opacity: 0; animation: beat--out-42 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-43 { 0%, 47.78% { opacity: 1; scale: 1; } 53.33%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-43 { opacity: 0; animation: beat--out-43 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-44 { 0%, 48.89% { opacity: 1; scale: 1; } 54.44%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-44 { opacity: 0; animation: beat--out-44 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-45 { 0%, 50.00% { opacity: 1; scale: 1; } 55.56%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-45 { opacity: 0; animation: beat--out-45 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-46 { 0%, 51.11% { opacity: 1; scale: 1; } 56.67%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-46 { opacity: 0; animation: beat--out-46 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-48 { 0%, 53.33% { opacity: 1; scale: 1; } 58.89%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-48 { opacity: 0; animation: beat--out-48 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-50 { 0%, 55.56% { opacity: 1; scale: 1; } 61.11%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-50 { opacity: 0; animation: beat--out-50 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-52 { 0%, 57.78% { opacity: 1; scale: 1; } 63.33%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-52 { opacity: 0; animation: beat--out-52 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-54 { 0%, 60.00% { opacity: 1; scale: 1; } 65.56%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-54 { opacity: 0; animation: beat--out-54 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-56 { 0%, 62.22% { opacity: 1; scale: 1; } 67.78%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-56 { opacity: 0; animation: beat--out-56 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-57 { 0%, 63.33% { opacity: 1; scale: 1; } 68.89%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-57 { opacity: 0; animation: beat--out-57 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-58 { 0%, 64.44% { opacity: 1; scale: 1; } 70.00%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-58 { opacity: 0; animation: beat--out-58 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-6 { 0%, 6.67% { opacity: 1; scale: 1; } 12.22%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-6 { opacity: 0; animation: beat--out-6 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-60 { 0%, 66.67% { opacity: 1; scale: 1; } 72.22%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-60 { opacity: 0; animation: beat--out-60 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-7 { 0%, 7.78% { opacity: 1; scale: 1; } 13.33%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-7 { opacity: 0; animation: beat--out-7 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-8 { 0%, 8.89% { opacity: 1; scale: 1; } 14.44%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-8 { opacity: 0; animation: beat--out-8 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--out-9 { 0%, 10.00% { opacity: 1; scale: 1; } 15.56%, 94.4% { opacity: 0; scale: .98; } 99%, 100% { opacity: 1; scale: 1; } }
.beat--out-9 { opacity: 0; animation: beat--out-9 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--pop-10 { 0%, 11.11% { opacity: 0; scale: .6; } 20.00%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-10 { animation: beat--pop-10 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-12 { 0%, 13.33% { opacity: 0; scale: .6; } 22.22%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-12 { animation: beat--pop-12 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-14 { 0%, 15.56% { opacity: 0; scale: .6; } 24.44%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-14 { animation: beat--pop-14 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-16 { 0%, 17.78% { opacity: 0; scale: .6; } 26.67%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-16 { animation: beat--pop-16 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-17 { 0%, 18.89% { opacity: 0; scale: .6; } 27.78%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-17 { animation: beat--pop-17 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-18 { 0%, 20.00% { opacity: 0; scale: .6; } 28.89%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-18 { animation: beat--pop-18 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-19 { 0%, 21.11% { opacity: 0; scale: .6; } 30.00%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-19 { animation: beat--pop-19 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-20 { 0%, 22.22% { opacity: 0; scale: .6; } 31.11%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-20 { animation: beat--pop-20 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-22 { 0%, 24.44% { opacity: 0; scale: .6; } 33.33%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-22 { animation: beat--pop-22 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-24 { 0%, 26.67% { opacity: 0; scale: .6; } 35.56%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-24 { animation: beat--pop-24 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-26 { 0%, 28.89% { opacity: 0; scale: .6; } 37.78%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-26 { animation: beat--pop-26 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-28 { 0%, 31.11% { opacity: 0; scale: .6; } 40.00%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-28 { animation: beat--pop-28 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-30 { 0%, 33.33% { opacity: 0; scale: .6; } 42.22%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-30 { animation: beat--pop-30 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-31 { 0%, 34.44% { opacity: 0; scale: .6; } 43.33%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-31 { animation: beat--pop-31 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-32 { 0%, 35.56% { opacity: 0; scale: .6; } 44.44%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-32 { animation: beat--pop-32 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-33 { 0%, 36.67% { opacity: 0; scale: .6; } 45.56%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-33 { animation: beat--pop-33 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-34 { 0%, 37.78% { opacity: 0; scale: .6; } 46.67%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-34 { animation: beat--pop-34 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-36 { 0%, 40.00% { opacity: 0; scale: .6; } 48.89%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-36 { animation: beat--pop-36 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-38 { 0%, 42.22% { opacity: 0; scale: .6; } 51.11%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-38 { animation: beat--pop-38 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-4 { 0%, 4.44% { opacity: 0; scale: .6; } 13.33%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-4 { animation: beat--pop-4 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-40 { 0%, 44.44% { opacity: 0; scale: .6; } 53.33%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-40 { animation: beat--pop-40 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-41 { 0%, 45.56% { opacity: 0; scale: .6; } 54.44%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-41 { animation: beat--pop-41 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-42 { 0%, 46.67% { opacity: 0; scale: .6; } 55.56%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-42 { animation: beat--pop-42 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-43 { 0%, 47.78% { opacity: 0; scale: .6; } 56.67%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-43 { animation: beat--pop-43 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-44 { 0%, 48.89% { opacity: 0; scale: .6; } 57.78%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-44 { animation: beat--pop-44 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-45 { 0%, 50.00% { opacity: 0; scale: .6; } 58.89%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-45 { animation: beat--pop-45 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-46 { 0%, 51.11% { opacity: 0; scale: .6; } 60.00%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-46 { animation: beat--pop-46 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-47 { 0%, 52.22% { opacity: 0; scale: .6; } 61.11%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-47 { animation: beat--pop-47 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-48 { 0%, 53.33% { opacity: 0; scale: .6; } 62.22%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-48 { animation: beat--pop-48 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-50 { 0%, 55.56% { opacity: 0; scale: .6; } 64.44%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-50 { animation: beat--pop-50 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-52 { 0%, 57.78% { opacity: 0; scale: .6; } 66.67%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-52 { animation: beat--pop-52 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-54 { 0%, 60.00% { opacity: 0; scale: .6; } 68.89%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-54 { animation: beat--pop-54 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-56 { 0%, 62.22% { opacity: 0; scale: .6; } 71.11%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-56 { animation: beat--pop-56 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-57 { 0%, 63.33% { opacity: 0; scale: .6; } 72.22%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-57 { animation: beat--pop-57 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-58 { 0%, 64.44% { opacity: 0; scale: .6; } 73.33%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-58 { animation: beat--pop-58 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-6 { 0%, 6.67% { opacity: 0; scale: .6; } 15.56%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-6 { animation: beat--pop-6 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-60 { 0%, 66.67% { opacity: 0; scale: .6; } 75.56%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-60 { animation: beat--pop-60 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-62 { 0%, 68.89% { opacity: 0; scale: .6; } 77.78%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-62 { animation: beat--pop-62 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-64 { 0%, 71.11% { opacity: 0; scale: .6; } 80.00%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-64 { animation: beat--pop-64 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-7 { 0%, 7.78% { opacity: 0; scale: .6; } 16.67%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-7 { animation: beat--pop-7 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--pop-8 { 0%, 8.89% { opacity: 0; scale: .6; } 17.78%, 94.4% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; scale: 1; } }
.beat--pop-8 { animation: beat--pop-8 var(--illus-loop) var(--ease-spring-bouncy) infinite; }
@keyframes beat--show-11 { 0%, 12.22% { opacity: 0; } 20.00%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-11 { animation: beat--show-11 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-11 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-11 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-11 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-11 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-12 { 0%, 13.33% { opacity: 0; } 21.11%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-12 { animation: beat--show-12 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-12 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-12 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-12 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-12 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-14 { 0%, 15.56% { opacity: 0; } 23.33%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-14 { animation: beat--show-14 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-14 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-14 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-14 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-14 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-16 { 0%, 17.78% { opacity: 0; } 25.56%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-16 { animation: beat--show-16 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-16 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-16 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-16 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-16 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-18 { 0%, 20.00% { opacity: 0; } 27.78%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-18 { animation: beat--show-18 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-18 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-18 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-18 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-18 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-19 { 0%, 21.11% { opacity: 0; } 28.89%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-19 { animation: beat--show-19 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-19 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-19 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-19 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-19 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-20 { 0%, 22.22% { opacity: 0; } 30.00%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-20 { animation: beat--show-20 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-20 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-20 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-20 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-20 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-22 { 0%, 24.44% { opacity: 0; } 32.22%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-22 { animation: beat--show-22 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-22 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-22 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-22 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-22 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-24 { 0%, 26.67% { opacity: 0; } 34.44%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-24 { animation: beat--show-24 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-24 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-24 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-24 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-24 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-25 { 0%, 27.78% { opacity: 0; } 35.56%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-25 { animation: beat--show-25 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-25 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-25 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-25 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-25 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-26 { 0%, 28.89% { opacity: 0; } 36.67%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-26 { animation: beat--show-26 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-26 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-26 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-26 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-26 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-28 { 0%, 31.11% { opacity: 0; } 38.89%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-28 { animation: beat--show-28 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-28 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-28 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-28 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-28 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-30 { 0%, 33.33% { opacity: 0; } 41.11%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-30 { animation: beat--show-30 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-30 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-30 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-30 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-30 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-32 { 0%, 35.56% { opacity: 0; } 43.33%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-32 { animation: beat--show-32 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-32 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-32 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-32 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-32 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-33 { 0%, 36.67% { opacity: 0; } 44.44%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-33 { animation: beat--show-33 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-33 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-33 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-33 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-33 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-34 { 0%, 37.78% { opacity: 0; } 45.56%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-34 { animation: beat--show-34 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-34 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-34 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-34 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-34 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-36 { 0%, 40.00% { opacity: 0; } 47.78%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-36 { animation: beat--show-36 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-36 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-36 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-36 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-36 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-38 { 0%, 42.22% { opacity: 0; } 50.00%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-38 { animation: beat--show-38 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-38 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-38 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-38 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-38 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-39 { 0%, 43.33% { opacity: 0; } 51.11%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-39 { animation: beat--show-39 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-39 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-39 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-39 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-39 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-4 { 0%, 4.44% { opacity: 0; } 12.22%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-4 { animation: beat--show-4 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-4 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-4 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-4 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-4 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-40 { 0%, 44.44% { opacity: 0; } 52.22%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-40 { animation: beat--show-40 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-40 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-40 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-40 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-40 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-42 { 0%, 46.67% { opacity: 0; } 54.44%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-42 { animation: beat--show-42 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-42 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-42 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-42 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-42 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-44 { 0%, 48.89% { opacity: 0; } 56.67%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-44 { animation: beat--show-44 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-44 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-44 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-44 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-44 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-46 { 0%, 51.11% { opacity: 0; } 58.89%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-46 { animation: beat--show-46 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-46 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-46 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-46 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-46 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-47 { 0%, 52.22% { opacity: 0; } 60.00%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-47 { animation: beat--show-47 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-47 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-47 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-47 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-47 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-50 { 0%, 55.56% { opacity: 0; } 63.33%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-50 { animation: beat--show-50 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-50 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-50 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-50 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-50 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-52 { 0%, 57.78% { opacity: 0; } 65.56%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-52 { animation: beat--show-52 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-52 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-52 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-52 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-52 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-54 { 0%, 60.00% { opacity: 0; } 67.78%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-54 { animation: beat--show-54 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-54 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-54 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-54 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-54 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-60 { 0%, 66.67% { opacity: 0; } 74.44%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-60 { animation: beat--show-60 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-60 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-60 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-60 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-60 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--show-9 { 0%, 10.00% { opacity: 0; } 17.78%, 94.4% { opacity: 1; } 99%, 100% { opacity: 0; } }
.beat--show-9 { animation: beat--show-9 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam.beat--show-9 { animation: illus-beam var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-9 var(--illus-loop) var(--ease-spring) infinite; } .illus__beam--tail.beat--show-9 { animation: illus-beam-tail var(--illus-beam-period) linear var(--beam-delay, 0s) infinite, beat--show-9 var(--illus-loop) var(--ease-spring) infinite; }
@keyframes beat--type-10 { 0%, 11.11% { clip-path: inset(0 100% 0 0); opacity: 1; } 24.44%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-10 { animation: beat--type-10 var(--illus-loop) linear infinite; }
@keyframes beat--type-13 { 0%, 14.44% { clip-path: inset(0 100% 0 0); opacity: 1; } 27.78%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-13 { animation: beat--type-13 var(--illus-loop) linear infinite; }
@keyframes beat--type-16 { 0%, 17.78% { clip-path: inset(0 100% 0 0); opacity: 1; } 31.11%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-16 { animation: beat--type-16 var(--illus-loop) linear infinite; }
@keyframes beat--type-17 { 0%, 18.89% { clip-path: inset(0 100% 0 0); opacity: 1; } 32.22%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-17 { animation: beat--type-17 var(--illus-loop) linear infinite; }
@keyframes beat--type-19 { 0%, 21.11% { clip-path: inset(0 100% 0 0); opacity: 1; } 34.44%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-19 { animation: beat--type-19 var(--illus-loop) linear infinite; }
@keyframes beat--type-20 { 0%, 22.22% { clip-path: inset(0 100% 0 0); opacity: 1; } 35.56%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-20 { animation: beat--type-20 var(--illus-loop) linear infinite; }
@keyframes beat--type-22 { 0%, 24.44% { clip-path: inset(0 100% 0 0); opacity: 1; } 37.78%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-22 { animation: beat--type-22 var(--illus-loop) linear infinite; }
@keyframes beat--type-24 { 0%, 26.67% { clip-path: inset(0 100% 0 0); opacity: 1; } 40.00%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-24 { animation: beat--type-24 var(--illus-loop) linear infinite; }
@keyframes beat--type-26 { 0%, 28.89% { clip-path: inset(0 100% 0 0); opacity: 1; } 42.22%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-26 { animation: beat--type-26 var(--illus-loop) linear infinite; }
@keyframes beat--type-28 { 0%, 31.11% { clip-path: inset(0 100% 0 0); opacity: 1; } 44.44%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-28 { animation: beat--type-28 var(--illus-loop) linear infinite; }
@keyframes beat--type-30 { 0%, 33.33% { clip-path: inset(0 100% 0 0); opacity: 1; } 46.67%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-30 { animation: beat--type-30 var(--illus-loop) linear infinite; }
@keyframes beat--type-31 { 0%, 34.44% { clip-path: inset(0 100% 0 0); opacity: 1; } 47.78%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-31 { animation: beat--type-31 var(--illus-loop) linear infinite; }
@keyframes beat--type-32 { 0%, 35.56% { clip-path: inset(0 100% 0 0); opacity: 1; } 48.89%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-32 { animation: beat--type-32 var(--illus-loop) linear infinite; }
@keyframes beat--type-34 { 0%, 37.78% { clip-path: inset(0 100% 0 0); opacity: 1; } 51.11%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-34 { animation: beat--type-34 var(--illus-loop) linear infinite; }
@keyframes beat--type-36 { 0%, 40.00% { clip-path: inset(0 100% 0 0); opacity: 1; } 53.33%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-36 { animation: beat--type-36 var(--illus-loop) linear infinite; }
@keyframes beat--type-38 { 0%, 42.22% { clip-path: inset(0 100% 0 0); opacity: 1; } 55.56%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-38 { animation: beat--type-38 var(--illus-loop) linear infinite; }
@keyframes beat--type-4 { 0%, 4.44% { clip-path: inset(0 100% 0 0); opacity: 1; } 17.78%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-4 { animation: beat--type-4 var(--illus-loop) linear infinite; }
@keyframes beat--type-41 { 0%, 45.56% { clip-path: inset(0 100% 0 0); opacity: 1; } 58.89%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-41 { animation: beat--type-41 var(--illus-loop) linear infinite; }
@keyframes beat--type-42 { 0%, 46.67% { clip-path: inset(0 100% 0 0); opacity: 1; } 60.00%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-42 { animation: beat--type-42 var(--illus-loop) linear infinite; }
@keyframes beat--type-44 { 0%, 48.89% { clip-path: inset(0 100% 0 0); opacity: 1; } 62.22%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-44 { animation: beat--type-44 var(--illus-loop) linear infinite; }
@keyframes beat--type-45 { 0%, 50.00% { clip-path: inset(0 100% 0 0); opacity: 1; } 63.33%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-45 { animation: beat--type-45 var(--illus-loop) linear infinite; }
@keyframes beat--type-46 { 0%, 51.11% { clip-path: inset(0 100% 0 0); opacity: 1; } 64.44%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-46 { animation: beat--type-46 var(--illus-loop) linear infinite; }
@keyframes beat--type-48 { 0%, 53.33% { clip-path: inset(0 100% 0 0); opacity: 1; } 66.67%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-48 { animation: beat--type-48 var(--illus-loop) linear infinite; }
@keyframes beat--type-50 { 0%, 55.56% { clip-path: inset(0 100% 0 0); opacity: 1; } 68.89%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-50 { animation: beat--type-50 var(--illus-loop) linear infinite; }
@keyframes beat--type-52 { 0%, 57.78% { clip-path: inset(0 100% 0 0); opacity: 1; } 71.11%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-52 { animation: beat--type-52 var(--illus-loop) linear infinite; }
@keyframes beat--type-53 { 0%, 58.89% { clip-path: inset(0 100% 0 0); opacity: 1; } 72.22%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-53 { animation: beat--type-53 var(--illus-loop) linear infinite; }
@keyframes beat--type-54 { 0%, 60.00% { clip-path: inset(0 100% 0 0); opacity: 1; } 73.33%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-54 { animation: beat--type-54 var(--illus-loop) linear infinite; }
@keyframes beat--type-6 { 0%, 6.67% { clip-path: inset(0 100% 0 0); opacity: 1; } 20.00%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-6 { animation: beat--type-6 var(--illus-loop) linear infinite; }
@keyframes beat--type-60 { 0%, 66.67% { clip-path: inset(0 100% 0 0); opacity: 1; } 80.00%, 94.4% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.beat--type-60 { animation: beat--type-60 var(--illus-loop) linear infinite; }