.cx-outline-path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference) {
  .cx-outline-motion .cx-outline-art { opacity: 0; }
  .cx-outline-motion .cx-outline-art:is(.is-drawing, .is-complete) { opacity: 1; }
  .cx-outline-motion .cx-outline-art.is-drawing .cx-outline-path {
    stroke-dasharray: var(--cx-outline-length);
    stroke-dashoffset: var(--cx-outline-length);
    animation: cx-outline-trace 700ms cubic-bezier(.22, .61, .36, 1) var(--cx-outline-delay, 0ms) both;
  }
}

@keyframes cx-outline-trace {
  from { stroke-dashoffset: var(--cx-outline-length); }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-outline-art { opacity: 1 !important; }
  .cx-outline-path {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}