/* Shared NameVerity generation engine. Theme with data-nv-theme: baby, pet, business, boat, or create. */

.nv-engine[data-nv-theme="baby"] {
  --nv-ink: #14264e;
  --nv-core: #fffaf4;
  --nv-orbit-a: #bd7095;
  --nv-orbit-b: #9ebbd8;
  --nv-orbit-c: #c49cce;
}

.nv-engine[data-nv-theme="pet"] {
  --nv-ink: #1d3f38;
  --nv-core: #fffdf6;
  --nv-orbit-a: #2f9486;
  --nv-orbit-b: #e0a63a;
  --nv-orbit-c: #207060;
}

.nv-engine[data-nv-theme="business"] {
  --nv-ink: #0e1c36;
  --nv-core: #f7fafd;
  --nv-orbit-a: #27476e;
  --nv-orbit-b: #d9a441;
  --nv-orbit-c: #7ea0c8;
}

.nv-engine[data-nv-theme="boat"] {
  --nv-ink: #f0ead8;
  --nv-core: #102033;
  --nv-orbit-a: #e0b45f;
  --nv-orbit-b: #6d8cb8;
  --nv-orbit-c: #c8963e;
}

.nv-engine[data-nv-theme="create"] {
  --nv-ink: #f6f2ff;
  --nv-core: #10182f;
  --nv-orbit-a: #735be8;
  --nv-orbit-b: #d8b879;
  --nv-orbit-c: #b6a6ff;
}

.nv-engine .nv-engine-mark-stroke { stroke: var(--nv-ink); }
.nv-engine .nv-engine-mark-fill { fill: var(--nv-ink); }

.nv-engine .nv-engine-halo {
  transform-origin: 320px 320px;
  transform-box: view-box;
  animation: nv-engine-breathe 5.6s ease-in-out infinite;
}

.nv-engine .nv-engine-spin {
  transform-origin: 320px 320px;
  transform-box: view-box;
}

.nv-engine .nv-engine-spin-a { animation: nv-engine-turn 46s linear infinite; }
.nv-engine .nv-engine-spin-b { animation: nv-engine-turn 28s linear infinite reverse; }
.nv-engine .nv-engine-spin-c { animation: nv-engine-turn 18s linear infinite; }
.nv-engine .nv-engine-spin-d { animation: nv-engine-turn 36s linear infinite reverse; }
.nv-engine .nv-engine-flow { animation: nv-engine-travel 16s linear infinite; }

.nv-engine .nv-engine-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: nv-engine-signal 3.2s ease-in-out infinite;
}

.nv-engine .nv-engine-node-b { animation-delay: -1.1s; }
.nv-engine .nv-engine-node-c { animation-delay: -2.2s; }

.nv-engine .nv-engine-n {
  transform-box: fill-box;
  transform-origin: center;
  animation: nv-engine-pulse 2.2s ease-in-out infinite;
}

@keyframes nv-engine-turn { to { transform: rotate(360deg); } }
@keyframes nv-engine-travel { to { stroke-dashoffset: -280; } }
@keyframes nv-engine-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes nv-engine-signal {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes nv-engine-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .nv-engine .nv-engine-halo,
  .nv-engine .nv-engine-spin,
  .nv-engine .nv-engine-flow,
  .nv-engine .nv-engine-node,
  .nv-engine .nv-engine-n {
    animation: none;
  }
}

/* Pet, Business, and Boat use the same engine inside their existing progress panels. */
@media (min-width: 761px) {
  body.vertical-pet .progress-panel,
  body.vertical-business .progress-panel {
    grid-template-columns: minmax(260px, 340px) minmax(220px, 1fr);
    align-items: center;
    width: min(840px, 100%);
  }

  body.vertical-pet .pet-progress-visual,
  body.vertical-business .progress-visual,
  body.vertical-boat .boat-progress-visual {
    width: min(100%, 320px);
  }
}

body.vertical-pet .pet-progress-visual,
body.vertical-business .progress-visual,
body.vertical-boat .boat-progress-visual {
  aspect-ratio: 1;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}

body.vertical-pet .pet-progress-visual > .nv-engine,
body.vertical-business .progress-visual > .nv-engine,
body.vertical-boat .boat-progress-visual > .nv-engine {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.vertical-pet .pet-progress-visual > :not(.nv-engine),
body.vertical-business .progress-visual > :not(.nv-engine),
body.vertical-boat .boat-progress-visual > :not(.nv-engine) {
  display: none !important;
}

body.vertical-pet .pet-progress-visual::before,
body.vertical-pet .pet-progress-visual::after,
body.vertical-business .progress-visual::before,
body.vertical-business .progress-visual::after,
body.vertical-boat .boat-progress-visual::before,
body.vertical-boat .boat-progress-visual::after {
  content: none;
  display: none;
  animation: none;
}

body.vertical-pet .pet-progress-visual.is-searching,
body.vertical-pet .pet-progress-visual.is-pulsing,
body.vertical-business .progress-visual.is-searching,
body.vertical-business .progress-visual.is-pulsing,
body.vertical-boat .boat-progress-visual.is-searching,
body.vertical-boat .boat-progress-visual.is-pulsing {
  animation: none;
}

@media (max-width: 760px) {
  body.vertical-pet .pet-progress-visual,
  body.vertical-business .progress-visual,
  body.vertical-boat .boat-progress-visual {
    width: min(100%, 280px, 78vw);
  }
}