/**
 * This CSS was automatically generated from a source file.
 * Editing this file directly isn't recommended. Modifying the styles of this module can be done
 * with an external stylesheet attached to the page or module.
 */

.int-anim {
  --width: 564;
  --height: 517;
  --node-duration: 670ms;
  padding: var(--module-padding) 0;
}
@media (min-width: 1040px) {
  .int-anim {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    gap: 109px;
  }
  .int-anim__canvas {
    width: 50%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
.int-anim__canvas {
  position: relative;
  aspect-ratio: var(--width)/var(--height);
}
@media not screen and (min-width: 1040px) {
  .int-anim__canvas {
    margin-top: 63px;
  }
}
.int-anim__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.int-anim__svg * {
  transform-box: fill-box;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.int-anim__node:not(.init), .int-anim__connection:not(.init) {
  display: none;
}
.int-anim__node--in, .int-anim__node-icon--in {
  opacity: 0;
}
.int-anim__node--in.in, .int-anim__node-icon--in.in {
  scale: 0.9;
  -webkit-animation: card-fade-in var(--node-duration) var(--ease-pr) forwards;
          animation: card-fade-in var(--node-duration) var(--ease-pr) forwards;
}
.int-anim__node--in.in .int-anim__node-stroke, .int-anim__node-icon--in.in .int-anim__node-stroke {
  stroke-opacity: 0;
  -webkit-animation: stroke-in var(--node-duration) 500ms var(--ease-pr) forwards;
          animation: stroke-in var(--node-duration) 500ms var(--ease-pr) forwards;
}
.int-anim__node--in.in-end, .int-anim__node-icon--in.in-end {
  opacity: 1;
}
.int-anim__node--out, .int-anim__node-icon--out {
  visibility: hidden;
  opacity: 0;
}
.int-anim__node--out.out, .int-anim__node-icon--out.out {
  visibility: visible;
  opacity: 1;
  -webkit-animation: card-fade-out var(--node-duration) var(--ease-pr) forwards;
          animation: card-fade-out var(--node-duration) var(--ease-pr) forwards;
}
.int-anim__node--out.out .icon,
.int-anim__node--out.out .icon *, .int-anim__node-icon--out.out .icon,
.int-anim__node-icon--out.out .icon * {
  opacity: 1 !important;
  -webkit-animation: none !important;
          animation: none !important;
  stroke-dasharray: unset !important;
  stroke-dashoffset: 0 !important;
  scale: 1 !important;
}
.int-anim__node--out .int-anim__node-stroke, .int-anim__node-icon--out .int-anim__node-stroke {
  stroke-opacity: 1;
  animation: stroke-in var(--node-duration) var(--ease-pr) reverse;
}
.int-anim__node[data-node="0"], .int-anim__node-icon[data-node="0"] {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.int-anim__node[data-node="1"], .int-anim__node-icon[data-node="1"] {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.int-anim__node[data-node="2"], .int-anim__node-icon[data-node="2"] {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.int-anim__node[data-node="3"], .int-anim__node-icon[data-node="3"] {
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
.int-anim__node[data-node="4"], .int-anim__node-icon[data-node="4"] {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.animate-on-scroll .int-anim__center, .animate-on-scroll .int-anim__center-logo {
  opacity: 0;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.animate-on-scroll.animated .int-anim__center, .animate-on-scroll.animated .int-anim__center-logo {
  -webkit-animation: center-scale-in var(--node-duration) var(--ease-pr) forwards;
          animation: center-scale-in var(--node-duration) var(--ease-pr) forwards;
}
.animate-on-scroll.animated .int-anim__center-logo {
  -webkit-animation-delay: 60ms;
          animation-delay: 60ms;
}
.int-anim__connection[data-node="0"] {
  --stroke-length: 141;
  --highlight-start: 19;
  --highlight-end: -140;
}
.int-anim__connection[data-node="1"] {
  --stroke-length: 241;
  --highlight-start: -201;
  --highlight-end: 72;
}
.int-anim__connection[data-node="2"] {
  --stroke-length: 97;
  --highlight-start: -46;
  --highlight-end: 30;
}
.int-anim__connection[data-node="3"] {
  --stroke-length: 197;
  --highlight-start: -197;
  --highlight-end: 59;
}
.int-anim__connection[data-node="4"] {
  --stroke-length: 258;
  --highlight-start: 24;
  --highlight-end: -256;
}
.int-anim__connection--highlight {
  stroke-dasharray: calc(var(--stroke-length) * 0.3) calc(var(--stroke-length) * 1.7);
  stroke-dashoffset: var(--highlight-start);
}
.int-anim__connection--highlight.in {
  -webkit-animation: connection-highlight 500ms linear;
          animation: connection-highlight 500ms linear;
}
.int-anim__node-icon {
  position: absolute;
  width: calc(134 / var(--width) * 100%);
  height: calc(134 / var(--height) * 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-transform: uppercase;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  padding: 16px;
  font-size: 14px;
  text-align: center;
  container-type: inline-size;
}
.int-anim__node-icon p {
  margin: 0;
  margin-top: 10px;
}
@supports not (container-type: inline-size) {
  @media not screen and (min-width: 1040px) {
    .int-anim__node-icon p {
      position: absolute;
      overflow: hidden;
      clip: rect(0 0 0 0);
      height: 1px;
      width: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
    }
  }
}
@supports (container-type: inline-size) {
  .int-anim__node-icon p {
    display: block;
  }
}
@container (max-width: 100px) {
  .int-anim__node-icon p {
    font-size: 9px;
  }
}
@container (max-width: 60px) {
  .int-anim__node-icon p {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
  }
}
.int-anim__node-icon .icon {
  width: 48px;
  height: 48px;
}
.int-anim__node-icon[data-node="0"] {
  top: calc(1 / var(--height) * 100%);
  left: calc(317 / var(--width) * 100%);
}
.int-anim__node-icon[data-node="1"] {
  top: calc(192 / var(--height) * 100%);
  left: calc(417 / var(--width) * 100%);
}
.int-anim__node-icon[data-node="2"] {
  top: calc(324 / var(--height) * 100%);
  left: calc(231 / var(--width) * 100%);
}
.int-anim__node-icon[data-node="3"] {
  top: calc(271 / var(--height) * 100%);
  left: calc(36 / var(--width) * 100%);
}
.int-anim__node-icon[data-node="4"] {
  top: calc(29 / var(--height) * 100%);
  left: calc(50 / var(--width) * 100%);
}
.int-anim .statistics__stat {
  background-color: transparent;
  padding: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.int-anim .statistics__stat::before, .int-anim .statistics__stat::after {
  display: none;
}