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

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

.cowork-animation svg {
  overflow: hidden;
}


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


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


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


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


g.skill-node {
  opacity: 0;
  animation: cowork-skill-appear var(--sp-duration-slower) var(--sp-ease-out) forwards;
}

.cowork-animation svg g.skill-node:nth-of-type(1) { animation-delay: 0.2s; }
.cowork-animation svg g.skill-node:nth-of-type(2) { animation-delay: 0.4s; }
.cowork-animation svg g.skill-node:nth-of-type(3) { animation-delay: 0.6s; }

@keyframes cowork-skill-appear {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


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


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

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

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


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


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

  .skill-node.skill-node {
    animation: none;
    opacity: 1;
  }

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

  .cowork-node,
  .bridge-node,
  .dashboard-node {
    transition: none;
  }
}


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