/**
 * Namaste N motion component.
 *
 * Portable contract:
 * <span class="namaste-n" data-namaste-n data-namaste-n-autoplay="true">
 *   <svg class="namaste-n__svg">…</svg>
 * </span>
 */
.namaste-n {
  position: relative;
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  perspective: 18rem;
  isolation: isolate;
}

.namaste-n__svg {
  position: relative;
  z-index: 2;
  overflow: visible;
  transform-origin: 50% 52%;
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
}

.namaste-n__stroke {
  transform-box: fill-box;
  transform-origin: center;
}

.namaste-n__particles {
  position: absolute;
  z-index: 1;
  inset: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.namaste-n__particle {
  --particle-size: .16rem;
  position: absolute;
  width: var(--particle-size);
  height: var(--particle-size);
  margin: calc(var(--particle-size) * -.5);
  border-radius: 999px;
  background: #ff6a00;
  box-shadow: 0 0 .45rem rgb(255 106 0 / .55);
  opacity: 0;
  transform: translate3d(var(--particle-x), var(--particle-y), 0) scale(.25);
}

.namaste-n.is-assembling .namaste-n__svg {
  animation: namaste-n-arrive 920ms cubic-bezier(.16, 1, .3, 1) both;
}
.namaste-n.is-assembling .namaste-n__stroke--back {
  stroke-dasharray: 78;
  animation: namaste-n-draw 760ms 100ms cubic-bezier(.65, 0, .35, 1) both;
}
.namaste-n.is-assembling .namaste-n__stroke--front {
  stroke-dasharray: 104;
  animation: namaste-n-draw 820ms 40ms cubic-bezier(.65, 0, .35, 1) both;
}
.namaste-n.is-assembling .namaste-n__particle {
  animation: namaste-n-gather 720ms var(--particle-delay) cubic-bezier(.2, .75, .25, 1) both;
}
.namaste-n.is-replaying .namaste-n__svg {
  animation: namaste-n-fold 620ms cubic-bezier(.16, 1, .3, 1);
}
.namaste-n.is-replaying .namaste-n__particle {
  animation: namaste-n-pulse 560ms var(--particle-delay) cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes namaste-n-arrive {
  0% {
    opacity: 0;
    filter: blur(.22rem);
    transform: rotateX(24deg) rotateY(-48deg) rotateZ(-8deg) scale(.68);
  }
  55% { opacity: 1; }
  78% { transform: rotateX(-3deg) rotateY(6deg) rotateZ(1deg) scale(1.06); }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: rotateX(0) rotateY(0) rotateZ(0) scale(1);
  }
}

@keyframes namaste-n-draw {
  from { stroke-dashoffset: var(--namaste-n-dash, 104); }
  to { stroke-dashoffset: 0; }
}

.namaste-n__stroke--back { --namaste-n-dash: 78; }
.namaste-n__stroke--front { --namaste-n-dash: 104; }

@keyframes namaste-n-gather {
  0% {
    opacity: 0;
    transform: translate3d(var(--particle-x), var(--particle-y), 0) scale(.25);
  }
  24% { opacity: .9; }
  74% {
    opacity: .68;
    transform: translate3d(calc(var(--particle-x) * .16), calc(var(--particle-y) * .16), .5rem) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.2);
  }
}

@keyframes namaste-n-fold {
  0%, 100% { transform: rotateX(0) rotateY(0) scale(1); }
  36% { transform: rotateX(-9deg) rotateY(22deg) rotateZ(2deg) scale(1.08); }
  68% { transform: rotateX(4deg) rotateY(-7deg) scale(.98); }
}

@keyframes namaste-n-pulse {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.2); }
  32% { opacity: .72; transform: translate3d(calc(var(--particle-x) * .35), calc(var(--particle-y) * .35), 0) scale(.85); }
  100% { opacity: 0; transform: translate3d(var(--particle-x), var(--particle-y), 0) scale(.1); }
}

@media (prefers-reduced-motion: reduce) {
  .namaste-n *,
  .namaste-n *::before,
  .namaste-n *::after {
    animation: none !important;
    transition: none !important;
  }
  .namaste-n__svg {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .namaste-n__particle { display: none; }
}