:root {
  --insinio-ease: cubic-bezier(.2, .8, .2, 1);
  --insinio-dur-fast: 120ms;
  --insinio-dur-signature: 1400ms;
}

@property --insinio-pen {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.insinio-wordmark,
.insinio-mark { display: block; color: inherit; }

.insinio-wordmark {
  --insinio-pen-lift: 70;
  --insinio-pen-length: calc(2685 + 4 * var(--insinio-pen-lift));
  --insinio-pen-pop: 300;
  --insinio-pen-curve: cubic-bezier(.25, 0, .45, 1);
}

@supports (animation-timing-function: linear(0, 1)) {
  .insinio-wordmark {
    --insinio-pen-curve: linear(0, .003 4%, .023 8%, .062 12%, .111 16%, .185 22%, .284 30%, .407 40%, .53 50%, .654 60%, .777 70%, .85 76%, .914 82%, .96 88%, .986 94%, 1);
  }
}

.insinio-wordmark [data-part='in-1'] { --insinio-part-start: 0; --insinio-part-length: 702; }
.insinio-wordmark [data-part='s'] { --insinio-part-start: calc(702 + var(--insinio-pen-lift)); --insinio-part-length: 506; }
.insinio-wordmark [data-part='in-2'] { --insinio-part-start: calc(1208 + 2 * var(--insinio-pen-lift)); --insinio-part-length: 702; }
.insinio-wordmark [data-part='i-3'] { --insinio-part-start: calc(1910 + 3 * var(--insinio-pen-lift)); --insinio-part-length: 160; }
.insinio-wordmark [data-part='o'] { --insinio-part-start: calc(2070 + 4 * var(--insinio-pen-lift)); --insinio-part-length: 615; }
.insinio-wordmark [data-part='dot-1'] { --insinio-dot-at: 100; }
.insinio-wordmark [data-part='dot-2'] { --insinio-dot-at: calc(1308 + 2 * var(--insinio-pen-lift)); }
.insinio-wordmark [data-part='dot-3'] { --insinio-dot-at: calc(2070 + 3 * var(--insinio-pen-lift)); }

.insinio-wordmark-draw [data-part] {
  stroke-dasharray: 100;
  stroke-dashoffset: clamp(0, 100 - (var(--insinio-pen) - var(--insinio-part-start)) * 100 / var(--insinio-part-length), 100);
}

.insinio-wordmark-draw [data-part='o'] {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(90deg) scaleX(-1);
}

.insinio-wordmark-draw .insinio-dot {
  --insinio-dot-t: clamp(0, (var(--insinio-pen) - var(--insinio-dot-at)) / var(--insinio-pen-pop), 1);
  transform-box: fill-box;
  transform-origin: center;
  opacity: calc(min(1, var(--insinio-dot-t) / .5));
  transform: scale(calc(.6 + .4 * min(1, var(--insinio-dot-t) / .5) + .15 * sin(pi * var(--insinio-dot-t))));
}

@keyframes insinio-pen {
  from { --insinio-pen: 0; }
  to { --insinio-pen: var(--insinio-pen-length); }
}

@keyframes insinio-draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes insinio-dot-in {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

.insinio-wordmark-draw { animation: insinio-pen var(--insinio-dur-signature) var(--insinio-pen-curve) forwards; }
.insinio-mark-draw [data-part] { stroke-dasharray: 100; stroke-dashoffset: 100; animation: insinio-draw var(--insinio-dur-signature) var(--insinio-ease) forwards; }
.insinio-mark-draw .insinio-dot { transform-box: fill-box; transform-origin: center; opacity: 0; animation: insinio-dot-in var(--insinio-dur-fast) var(--insinio-ease) var(--insinio-dot-delay, 0ms) forwards; }
.insinio-mark-draw [data-part='dot-1'] { --insinio-dot-delay: 120ms; }
.insinio-mark-draw [data-part='dot-2'] { --insinio-dot-delay: var(--insinio-dur-signature); }

@media (prefers-reduced-motion: reduce) {
  .insinio-wordmark-draw { animation: none; --insinio-pen: var(--insinio-pen-length); }
  .insinio-mark-draw [data-part] { animation: none; stroke-dashoffset: 0; }
  .insinio-mark-draw .insinio-dot { animation: none; opacity: 1; transform: none; }
}