/* Onboarding only. Sources/choreography: specs/onboarding-success-motion-20260911.md.
   The shared gradient is identical to Logo Intro Gradient. No animation dependency. */
.onb-motion-create .onb6-create-moment__card {
  width: min(460px, calc(100vw - var(--space-12)));
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-9);
  min-height: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  animation: onb-motion-enter .48s cubic-bezier(.16,1,.3,1) both;
}
.onb-motion-create .onb6-create-copy { align-items: center; text-align: center; }
.onb-motion-create .onb6-create-agent-name { max-width: none; }
.onb-motion-create .onb6-create-assembly {
  width: calc(var(--space-14) * 3); height: calc(var(--space-14) * 2);
  flex: none; border: 0; background: transparent; animation: none;
}
.onb-motion-create .onb6-create-assembly::before,
.onb-motion-create .onb6-create-assembly::after { display: none; }
.onb-motion-create .onb6-create-core {
  inset: auto; left: 50%; top: 50%; margin: calc(var(--space-13) / -2);
  width: var(--space-13); height: var(--space-13);
  border-radius: 0; box-shadow: none;
  background: var(--noimos-motion-gradient);
  mask: url('assets/noimosai-symbol-gradient.svg') center / contain no-repeat;
  animation: onb-motion-logo 1.35s cubic-bezier(.4,0,.2,1) both;
}
.onb-motion-create .onb6-create-orbit {
  top: 50%; left: 50%; right: auto; bottom: auto;
  width: var(--space-10); height: var(--space-10);
  margin: calc(var(--space-10) / -2);
  border-radius: var(--radius-lg); color: var(--neutral-500);
  box-shadow: var(--shadow-1); animation: onb-motion-gather 1.25s cubic-bezier(.22,1,.36,1) both;
}
.onb-motion-create .onb6-create-orbit .ph { font-size: var(--space-6); }
.onb-motion-create .onb6-create-orbit--one { --gather-x: -76px; --gather-y: -8px; --gather-rotation: -12deg; }
.onb-motion-create .onb6-create-orbit--two { --gather-x: 68px; --gather-y: -28px; --gather-rotation: 10deg; animation-delay: .08s; }
.onb-motion-create .onb6-create-orbit--three { --gather-x: 54px; --gather-y: 34px; --gather-rotation: 6deg; animation-delay: .16s; }
.onb-motion-create .onb6-create-ready {
  inset: auto; left: 50%; top: 50%;
  width: var(--space-14); height: var(--space-14); margin: calc(var(--space-14) / -2);
  background: var(--noimos-motion-gradient); color: var(--neutral-900); box-shadow: none;
  animation: onb-motion-disc .5s cubic-bezier(.34,1.56,.64,1) 1.15s both;
}
.onb-motion-create .onb6-create-ready::before {
  content: ''; position: absolute; inset: var(--space-2);
  border-radius: inherit; background: var(--surface);
}
.onb-motion-create .onb6-create-ready .ph {
  position: relative; font-size: var(--space-8);
  animation: onb-motion-check .4s cubic-bezier(.16,1,.3,1) 1.42s both;
}
/* The destination remains the real sidebar row. */
.onb-motion-create.is-transferring { animation: none; opacity: 0; transition: opacity .12s ease-out; }

.onb-motion-success .onb6-complete__celebration {
  width: calc(var(--space-14) * 4); height: calc(var(--space-14) * 3);
}
.onb-motion-success .onb6-complete__mark {
  width: calc(var(--space-14) * 2); height: calc(var(--space-14) * 2);
  animation: none;
}
.onb-motion-success .onb6-complete__mark::before,
.onb-motion-success .onb6-complete__mark::after { display: none; }
.onb-motion-success .onb6-complete__core {
  width: calc(var(--space-12) * 2); height: calc(var(--space-12) * 2);
  border: 0; box-shadow: inset 0 0 0 var(--stroke-1) var(--neutral-100); background: var(--noimos-motion-gradient);
  animation: onb-motion-disc .5s cubic-bezier(.34,1.56,.64,1) .24s both;
}
.onb-motion-success .onb6-complete__core::before {
  content: ''; position: absolute; inset: var(--space-3);
  background: var(--surface); border-radius: inherit;
  animation: onb-motion-disc .45s cubic-bezier(.16,1,.3,1) .45s both;
}
.onb-motion-success .onb6-complete__core .ph {
  position: relative; font-size: var(--space-10);
  animation: onb-motion-check .46s cubic-bezier(.16,1,.3,1) .6s both;
}
.onb-motion-success .onb6-complete__orbit {
  inset: var(--space-6); border: 0; background: var(--noimos-motion-gradient);
  animation: onb-motion-wave 1s cubic-bezier(.16,1,.3,1) .32s both;
}
.onb-motion-success .onb6-complete__orbit--inner { animation-delay: .42s; }
.onb-motion-success .onb6-complete__node,
.onb-motion-success__particle {
  position: absolute; left: 50%; top: 50%; right: auto; bottom: auto;
  width: var(--space-2); height: var(--space-3); border-radius: var(--radius-full);
  background: var(--primary-400);
  animation: onb-motion-particle .95s cubic-bezier(.16,1,.3,1) .48s both;
}
.onb-motion-success .onb6-complete__node--one { --burst-x: -82px; --burst-y: -30px; --burst-r: -25deg; }
.onb-motion-success .onb6-complete__node--two { --burst-x: -40px; --burst-y: -74px; --burst-r: 36deg; background: var(--secondary-indigo); }
.onb-motion-success .onb6-complete__node--three { --burst-x: 70px; --burst-y: -57px; --burst-r: 52deg; background: var(--success-500); }
.onb-motion-success__particle--a { --burst-x: 87px; --burst-y: 24px; --burst-r: 25deg; background: var(--info-100); }
.onb-motion-success__particle--b { --burst-x: 32px; --burst-y: 78px; --burst-r: -38deg; background: var(--secondary-green); }
.onb-motion-success__particle--c { --burst-x: -63px; --burst-y: 64px; --burst-r: -45deg; }
.onb-motion-success .onb6-complete__copy { gap: var(--space-3); }
.onb-motion-success .onb6-complete__copy > :nth-child(1) { animation-delay: .72s; }
.onb-motion-success .onb6-complete__copy > :nth-child(2) { animation-delay: .84s; }

@keyframes onb-motion-enter {
  from { opacity: 0; transform: translateY(var(--space-5)) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes onb-motion-logo {
  0% { opacity: 0; transform: rotate(-120deg) scale(.6); }
  20% { opacity: 1; }
  74% { opacity: 1; transform: rotate(200deg) scale(1); }
  100% { opacity: 0; transform: rotate(300deg) scale(.15); }
}
@keyframes onb-motion-gather {
  0% { opacity: 0; transform: translate(var(--gather-x), var(--gather-y)) rotate(var(--gather-rotation)) scale(.8); }
  24%, 48% { opacity: 1; transform: translate(var(--gather-x), var(--gather-y)) rotate(var(--gather-rotation)); }
  100% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.2); }
}
@keyframes onb-motion-disc {
  from { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.15); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes onb-motion-check {
  from { clip-path: inset(0 100% 0 0); transform: scale(.86); }
  to { clip-path: inset(0); transform: scale(1); }
}
@keyframes onb-motion-wave {
  from { opacity: 0; transform: scale(.4); }
  22% { opacity: .15; }
  to { opacity: 0; transform: scale(1.8); }
}
@keyframes onb-motion-particle {
  0% { opacity: 0; transform: scale(.4); }
  12% { opacity: .85; }
  62% { opacity: .65; }
  100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--burst-r)); }
}
@media (max-width: 600px) {
  .onb-motion-create { left: 0; }
  .onb-motion-create .onb6-create-copy > strong { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-motion-create *, .onb-motion-success *, .onb-motion-success *::before {
    animation: none !important; transition: none !important;
  }
  .onb-motion-create .onb6-create-core,
  .onb-motion-create .onb6-create-orbit,
  .onb-motion-success .onb6-complete__orbit,
  .onb-motion-success .onb6-complete__node,
  .onb-motion-success__particle { display: none; }
  .onb-motion-create .onb6-create-ready,
  .onb-motion-success .onb6-complete__core { opacity: 1; transform: none; }
}