.dashboard-animation {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.dashboard-animation-svg {
  width: 100%;
  height: auto;
  max-height: 70vh;
  overflow: hidden;
}

.dashboard-animation svg {
  overflow: hidden;
}


.dashboard-animation--mobile {
  display: none;
}


.dashboard-hub {
  transition: transform var(--sp-duration-moderate) var(--sp-ease-out);
}


.skill-node {
  transition: transform var(--sp-duration-moderate) var(--sp-ease-out),
              opacity var(--sp-duration-moderate) var(--sp-ease-out);
}


.dashboard-particles circle,
.dashboard-particles-mobile circle {
  will-change: transform;
}


@media (max-width: 768px) {
  .dashboard-animation:not(.dashboard-animation--mobile) {
    display: none;
  }

  .dashboard-animation--mobile {
    display: block;
    max-width: 320px;
    margin: 0 auto;
  }

  .dashboard-animation-svg--mobile {
    max-height: 60vh;
  }
}


@media (max-width: 480px) {
  .dashboard-animation--mobile {
    max-width: 280px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .dashboard-animation.dashboard-animation animateMotion,
  .dashboard-animation.dashboard-animation animate {
    animation: none;
  }

  .dashboard-particles,
  .dashboard-particles-mobile {
    display: none;
  }

  .dashboard-hub,
  .skill-node {
    transition: none;
  }
}


@media print {
  .dashboard-animation {
    display: none;
  }
}