.assembly-logo {
  position: relative;
  z-index: 3;
  width: min(35vw, 168px);
  height: auto;
  overflow: visible;
  filter:
    drop-shadow(0 0 24px rgb(230 184 107 / 34%))
    drop-shadow(0 20px 34px rgb(0 0 0 / 34%));
}

.logo-part {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-part-assemble 1.35s cubic-bezier(.16, 1, .3, 1) both;
}

.logo-part path,
.logo-part circle {
  vector-effect: non-scaling-stroke;
}

.logo-part-designer {
  --from-x: -38px;
  --from-y: -28px;
  --from-rotate: -38deg;
  animation-delay: 360ms;
  stroke: #58d8ff;
}

.logo-part-architect {
  --from-x: 42px;
  --from-y: -8px;
  --from-rotate: 34deg;
  animation-delay: 520ms;
  stroke: #18c7b5;
}

.logo-part-principal {
  --from-x: 28px;
  --from-y: 42px;
  --from-rotate: 42deg;
  animation-delay: 680ms;
  stroke: #9b86ff;
}

.logo-part-reviewer {
  --from-x: -42px;
  --from-y: 24px;
  --from-rotate: -46deg;
  animation-delay: 840ms;
  stroke: #68b7ff;
}

.logo-part-security {
  --from-x: -18px;
  --from-y: -48px;
  --from-rotate: 58deg;
  animation-delay: 1000ms;
  stroke: #f2b84b;
}

.logo-part-core {
  --from-x: 0;
  --from-y: 0;
  --from-rotate: 0deg;
  transform-origin: 60px 60px;
  animation:
    logo-core-assemble 1.2s cubic-bezier(.16, 1, .3, 1) 1280ms both,
    logo-core-pulse 760ms ease 2.35s both;
}

.logo-core-cut {
  fill: #181510;
}

@keyframes logo-part-assemble {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-rotate)) scale(.74);
  }

  70% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
}

@keyframes logo-core-assemble {
  0% {
    opacity: 0;
    transform: scale(.36);
  }

  72% {
    opacity: 1;
    transform: scale(1.18);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes logo-core-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgb(242 184 75 / 0%));
  }

  45% {
    filter: drop-shadow(0 0 18px rgb(242 184 75 / 76%));
  }
}

@media (max-width: 720px) {
  .assembly-logo {
    width: min(42vw, 154px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-shell,
  .logo-frame,
  .logo-part,
  .logo-part-core {
    opacity: 1;
    transform: none;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}