.i622 { width: 56px; height: 56px; margin-bottom: 22px; }
.i622 svg { display: block; overflow: visible; width: 100%; height: 100%; }
.i622 .i622-dot { transform-box: fill-box; transform-origin: center; }
.i622 .i622-spark { stroke: var(--teal, #0E5E63); }
.i622-dark .i622-spark { stroke: var(--amber-soft, #F0D19C); }
.i622-tile { width: 52px; height: 52px; margin-bottom: 26px; }
.i622-hero { width: 72px; height: 72px; margin-bottom: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .i622 .i622-line { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); }
  .i622 .i622-dot { transform: scale(0); }
  .i622.is-in .i622-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.4,.1,.2,1); }
  .i622.is-in .i622-dot { transform: scale(1); transition: transform .5s cubic-bezier(.3,1.6,.5,1) .9s; }
  @keyframes i622pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.45) } }
  .card:hover .i622.is-in .i622-dot, .tile:hover .i622.is-in .i622-dot { animation: i622pulse .8s ease-in-out; }
}