/* Blueprint ? product � dotted pastel grid, looping */

.bp-scene {
  --bp-loop: 16s;
  --bp-pastel-charcoal: color-mix(in srgb, var(--palette-charcoal) 38%, white);
  --bp-pastel-baltic: color-mix(in srgb, var(--palette-baltic) 40%, white);
  --bp-pastel-sky: color-mix(in srgb, var(--palette-sky) 48%, white);
  --bp-pastel-honey: color-mix(in srgb, var(--palette-honey) 45%, white);
  --bp-pastel-blaze: color-mix(in srgb, var(--palette-blaze) 42%, white);
  --bp-pastel-blaze-deep: color-mix(in srgb, var(--palette-blaze-deep) 36%, white);

  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.bp-art {
  width: min(100%, 640px);
  height: auto;
  max-height: 100%;
  display: block;
  overflow: visible;
}

.bp-glow {
  opacity: 0.18;
  animation: bp-glow-pulse var(--bp-loop) ease-in-out infinite;
}

/* --- Dotted grid --- */
.bp-grid-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 0.01 9;
  opacity: 0;
  animation: bp-enter-a var(--bp-loop) ease-in-out infinite;
}

.bp-grid-line--fine {
  stroke-width: 1.7;
  stroke-dasharray: 0.01 8;
}

.bp-grid-line--h1 { stroke: var(--bp-pastel-sky); animation-name: bp-enter-a; }
.bp-grid-line--h2 { stroke: var(--bp-pastel-baltic); animation-name: bp-enter-b; }
.bp-grid-line--h3 { stroke: var(--bp-pastel-honey); animation-name: bp-enter-c; }
.bp-grid-line--h4 { stroke: var(--bp-pastel-blaze); animation-name: bp-enter-d; }
.bp-grid-line--h5 { stroke: var(--bp-pastel-charcoal); animation-name: bp-enter-e; }
.bp-grid-line--h6 { stroke: var(--bp-pastel-sky); animation-name: bp-enter-f; }
.bp-grid-line--extra-h { stroke: var(--bp-pastel-baltic); animation-name: bp-enter-g; }

.bp-grid-line--v1 { stroke: var(--bp-pastel-honey); animation-name: bp-enter-a; }
.bp-grid-line--v2 { stroke: var(--bp-pastel-blaze); animation-name: bp-enter-b; }
.bp-grid-line--v3 { stroke: var(--bp-pastel-sky); animation-name: bp-enter-c; }
.bp-grid-line--v4 { stroke: var(--bp-pastel-charcoal); animation-name: bp-enter-d; }
.bp-grid-line--v5 { stroke: var(--bp-pastel-baltic); animation-name: bp-enter-e; }
.bp-grid-line--v6 { stroke: var(--bp-pastel-honey); animation-name: bp-enter-f; }
.bp-grid-line--extra-v { stroke: var(--bp-pastel-blaze); animation-name: bp-enter-g; }

.bp-frame {
  fill: none;
  stroke: var(--bp-pastel-baltic);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-d var(--bp-loop) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bp-frame-inner {
  fill: none;
  stroke: var(--bp-pastel-sky);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 0.01 7;
  opacity: 0;
  animation: bp-enter-h var(--bp-loop) ease-in-out infinite;
}

.bp-dim {
  fill: none;
  stroke: var(--bp-pastel-sky);
  stroke-width: 1.35;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-e var(--bp-loop) ease-in-out infinite;
}

.bp-dim--1 { stroke: var(--bp-pastel-sky); animation-name: bp-draw-e; }
.bp-dim--2 { stroke: var(--bp-pastel-baltic); animation-name: bp-draw-f; }
.bp-dim--3 { stroke: var(--bp-pastel-charcoal); animation-name: bp-draw-g; }

.bp-corner {
  fill: none;
  stroke: var(--bp-pastel-honey);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  animation: bp-enter-h var(--bp-loop) ease-in-out infinite;
}

.bp-corner--1 { stroke: var(--bp-pastel-honey); animation-name: bp-enter-h; }
.bp-corner--2 { stroke: var(--bp-pastel-blaze); animation-name: bp-enter-i; }
.bp-corner--3 { stroke: var(--bp-pastel-sky); animation-name: bp-enter-j; }
.bp-corner--4 { stroke: var(--bp-pastel-baltic); animation-name: bp-enter-k; }

.bp-cross {
  fill: none;
  stroke: var(--bp-pastel-honey);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  animation: bp-enter-i var(--bp-loop) ease-in-out infinite;
}

.bp-cross--1 { stroke: var(--bp-pastel-honey); animation-name: bp-enter-i; }
.bp-cross--2 { stroke: var(--bp-pastel-blaze); animation-name: bp-enter-j; }
.bp-cross--3 { stroke: var(--bp-pastel-sky); animation-name: bp-enter-k; }
.bp-cross--4 { stroke: var(--bp-pastel-baltic); animation-name: bp-enter-l; }
.bp-cross--5 { stroke: var(--bp-pastel-charcoal); animation-name: bp-enter-m; }

.bp-callout {
  fill: none;
  stroke: var(--bp-pastel-blaze);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-h var(--bp-loop) ease-in-out infinite;
}

.bp-callout--1 { stroke: var(--bp-pastel-blaze); animation-name: bp-draw-h; }
.bp-callout--2 { stroke: var(--bp-pastel-honey); animation-name: bp-draw-i; }

.bp-label {
  fill: var(--bp-pastel-baltic);
  opacity: 0;
  animation: bp-enter-l var(--bp-loop) ease-in-out infinite;
}

.bp-label--1 { fill: var(--bp-pastel-sky); animation-name: bp-enter-l; }
.bp-label--2 { fill: var(--bp-pastel-honey); animation-name: bp-enter-m; }

/* --- System --- */
.bp-module {
  fill: color-mix(in srgb, var(--bp-pastel-baltic) 42%, transparent);
  stroke: var(--bp-pastel-baltic);
  stroke-width: 1.35;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: bp-module-n var(--bp-loop) cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}

.bp-module--1 {
  fill: color-mix(in srgb, var(--bp-pastel-sky) 48%, transparent);
  stroke: var(--bp-pastel-sky);
  animation-name: bp-module-n;
}
.bp-module--2 {
  fill: color-mix(in srgb, var(--bp-pastel-baltic) 42%, transparent);
  stroke: var(--bp-pastel-baltic);
  animation-name: bp-module-o;
}
.bp-module--3 {
  fill: color-mix(in srgb, var(--bp-pastel-honey) 45%, transparent);
  stroke: var(--bp-pastel-honey);
  animation-name: bp-module-p;
}
.bp-module--4 {
  fill: color-mix(in srgb, var(--bp-pastel-blaze) 40%, transparent);
  stroke: var(--bp-pastel-blaze);
  animation-name: bp-module-q;
}
.bp-module--5 {
  fill: color-mix(in srgb, var(--bp-pastel-charcoal) 38%, transparent);
  stroke: var(--bp-pastel-charcoal);
  animation-name: bp-module-r;
}
.bp-module--6 {
  fill: color-mix(in srgb, var(--bp-pastel-sky) 45%, transparent);
  stroke: var(--bp-pastel-sky);
  animation-name: bp-module-s;
}
.bp-module--7 {
  fill: color-mix(in srgb, var(--bp-pastel-honey) 42%, transparent);
  stroke: var(--bp-pastel-honey);
  animation-name: bp-module-t;
}

.bp-module-line {
  fill: none;
  stroke: var(--bp-pastel-sky);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0;
  animation: bp-enter-n var(--bp-loop) ease-in-out infinite;
}

.bp-module-line--1 { stroke: var(--bp-pastel-charcoal); animation-name: bp-enter-n; }
.bp-module-line--2 { stroke: var(--bp-pastel-baltic); animation-name: bp-enter-o; }
.bp-module-line--3 { stroke: var(--bp-pastel-honey); animation-name: bp-enter-p; }
.bp-module-line--4 { stroke: var(--bp-pastel-blaze); animation-name: bp-enter-q; }
.bp-module-line--5 { stroke: var(--bp-pastel-sky); animation-name: bp-enter-r; }
.bp-module-line--6 { stroke: var(--bp-pastel-charcoal); animation-name: bp-enter-s; }

.bp-flow {
  fill: none;
  stroke: var(--bp-pastel-honey);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-n var(--bp-loop) ease-in-out infinite;
}

.bp-flow--1 { stroke: var(--bp-pastel-honey); animation-name: bp-draw-n; }
.bp-flow--2 { stroke: var(--bp-pastel-blaze); animation-name: bp-draw-o; }
.bp-flow--3 { stroke: var(--bp-pastel-sky); animation-name: bp-draw-p; }

.bp-node {
  fill: var(--bp-pastel-blaze);
  opacity: 0;
  animation: bp-enter-o var(--bp-loop) ease-in-out infinite;
}

.bp-node--1 { fill: var(--bp-pastel-honey); animation-name: bp-enter-o; }
.bp-node--2 { fill: var(--bp-pastel-blaze); animation-name: bp-enter-p; }
.bp-node--3 { fill: var(--bp-pastel-sky); animation-name: bp-enter-q; }

/* --- AI: prompt ? generate ? product spark --- */
.bp-ai-prompt {
  opacity: 0;
  animation: bp-ai-prompt var(--bp-loop) ease-in-out infinite;
}

.bp-ai-prompt-shell {
  fill: color-mix(in srgb, var(--palette-charcoal) 78%, var(--palette-baltic));
  stroke: var(--palette-sky);
  stroke-width: 1.5;
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--palette-charcoal) 30%, transparent));
}

.bp-ai-prompt-type {
  fill: color-mix(in srgb, var(--palette-sky) 55%, white);
  opacity: 0;
}

.bp-ai-prompt-type--1 { animation: bp-ai-type-1 var(--bp-loop) ease-in-out infinite; }
.bp-ai-prompt-type--2 { animation: bp-ai-type-2 var(--bp-loop) ease-in-out infinite; }

.bp-ai-cursor {
  fill: var(--palette-honey);
  opacity: 0;
  animation: bp-ai-cursor var(--bp-loop) steps(1, end) infinite;
}

.bp-ai-spark {
  fill: var(--palette-honey);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.bp-ai-spark--prompt {
  animation: bp-ai-spark-pulse var(--bp-loop) ease-in-out infinite;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--palette-honey) 70%, transparent));
}

.bp-ai-spark--a {
  fill: var(--palette-sky);
  animation: bp-ai-spark-float-a var(--bp-loop) ease-in-out infinite;
}

.bp-ai-spark--b {
  fill: var(--palette-honey);
  animation: bp-ai-spark-float-b var(--bp-loop) ease-in-out infinite;
}

.bp-ai-spark--c {
  fill: var(--palette-blaze);
  animation: bp-ai-spark-float-c var(--bp-loop) ease-in-out infinite;
}

.bp-ai-spark--product {
  fill: var(--palette-honey);
  opacity: 1;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--palette-honey) 65%, transparent));
}

.bp-ai-reply {
  fill: color-mix(in srgb, var(--palette-sky) 45%, transparent);
}

.bp-ai-beam {
  fill: none;
  stroke: var(--palette-honey);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.01 7;
  opacity: 0;
  animation: bp-ai-beam var(--bp-loop) ease-in-out infinite;
}

.bp-ai-token {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.bp-ai-token--1 {
  fill: var(--palette-sky);
  animation: bp-ai-token-1 var(--bp-loop) ease-in-out infinite;
}
.bp-ai-token--2 {
  fill: var(--palette-honey);
  animation: bp-ai-token-2 var(--bp-loop) ease-in-out infinite;
}
.bp-ai-token--3 {
  fill: var(--palette-blaze);
  animation: bp-ai-token-3 var(--bp-loop) ease-in-out infinite;
}
.bp-ai-token--4 {
  fill: var(--palette-baltic);
  animation: bp-ai-token-4 var(--bp-loop) ease-in-out infinite;
}
.bp-ai-token--5 {
  fill: var(--palette-sky);
  animation: bp-ai-token-5 var(--bp-loop) ease-in-out infinite;
}

.bp-ai-draft {
  fill: color-mix(in srgb, var(--palette-sky) 22%, transparent);
  stroke: var(--palette-honey);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.bp-ai-draft--1 { animation: bp-ai-draft-1 var(--bp-loop) ease-in-out infinite; }
.bp-ai-draft--2 { animation: bp-ai-draft-2 var(--bp-loop) ease-in-out infinite; }
.bp-ai-draft--3 { animation: bp-ai-draft-3 var(--bp-loop) ease-in-out infinite; }

.bp-ai-in-product {
  opacity: 1;
}

/* --- Flight --- */
.bp-product {
  transform-origin: 240px 280px;
  opacity: 0;
  animation: bp-product-loop var(--bp-loop) cubic-bezier(0.2, 0.85, 0.2, 1) infinite;
}

.bp-product-shell {
  fill: color-mix(in srgb, var(--palette-charcoal) 72%, var(--bp-pastel-baltic));
  stroke: color-mix(in srgb, var(--bp-pastel-sky) 70%, var(--palette-baltic));
  stroke-width: 1.5;
  filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--palette-charcoal) 28%, transparent));
}

.bp-product-chrome {
  fill: color-mix(in srgb, var(--palette-baltic) 62%, var(--palette-charcoal));
}

.bp-product-chrome-fill {
  fill: color-mix(in srgb, var(--palette-baltic) 48%, var(--palette-charcoal));
}

.bp-product-side {
  fill: color-mix(in srgb, var(--palette-charcoal) 78%, var(--palette-baltic));
}

.bp-product-dot { fill: var(--bp-pastel-honey); opacity: 0.95; }
.bp-product-dot--2 { fill: var(--bp-pastel-sky); }
.bp-product-dot--3 { fill: var(--bp-pastel-blaze); }

.bp-product-bar {
  fill: color-mix(in srgb, var(--bp-pastel-sky) 70%, transparent);
}

.bp-product-nav {
  fill: color-mix(in srgb, var(--bp-pastel-baltic) 55%, transparent);
}

.bp-product-card {
  fill: color-mix(in srgb, var(--bp-pastel-sky) 40%, transparent);
  stroke: var(--bp-pastel-baltic);
  stroke-width: 1;
}

.bp-product-card--alt {
  fill: color-mix(in srgb, var(--bp-pastel-honey) 35%, transparent);
  stroke: var(--bp-pastel-honey);
}

.bp-product-card--soft {
  fill: color-mix(in srgb, var(--bp-pastel-blaze) 28%, transparent);
  stroke: var(--bp-pastel-blaze);
}

.bp-product-accent { fill: var(--bp-pastel-blaze); opacity: 0.95; }
.bp-product-soft { fill: var(--bp-pastel-honey); opacity: 0.75; }
.bp-product-chart { fill: var(--bp-pastel-sky); opacity: 0.7; }
.bp-product-chart--a { fill: var(--bp-pastel-charcoal); opacity: 0.45; }
.bp-product-chart--b { fill: var(--bp-pastel-baltic); opacity: 0.65; }
.bp-product-chart--c { fill: var(--bp-pastel-honey); opacity: 0.8; }
.bp-product-avatar {
  fill: var(--bp-pastel-blaze);
}

.bp-product-detail {
  fill: none;
  stroke: var(--bp-pastel-charcoal);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.55;
}

.bp-lift-mark {
  fill: none;
  stroke: var(--bp-pastel-honey);
  stroke-width: 1.45;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-u var(--bp-loop) ease-in-out infinite;
}

.bp-lift-mark--2 {
  stroke: var(--bp-pastel-sky);
  stroke-width: 1.2;
  animation-name: bp-draw-v;
}

.bp-spark {
  fill: var(--bp-pastel-honey);
  opacity: 0;
  animation: bp-spark-u var(--bp-loop) ease-in-out infinite;
}

.bp-spark--2 {
  fill: var(--bp-pastel-blaze);
  animation-name: bp-spark-v;
}

/* Enter windows staggered; hold ~78%; fade for reset */
@keyframes bp-enter-a { 0%,1%{opacity:0} 5%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-b { 0%,3%{opacity:0} 7%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-c { 0%,5%{opacity:0} 9%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-d { 0%,7%{opacity:0} 11%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-e { 0%,9%{opacity:0} 13%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-f { 0%,11%{opacity:0} 15%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-g { 0%,13%{opacity:0} 17%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-h { 0%,16%{opacity:0} 21%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-i { 0%,18%{opacity:0} 23%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-j { 0%,20%{opacity:0} 25%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-k { 0%,22%{opacity:0} 27%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-l { 0%,24%{opacity:0} 29%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-m { 0%,26%{opacity:0} 31%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-n { 0%,30%{opacity:0} 35%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-o { 0%,33%{opacity:0} 38%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-p { 0%,36%{opacity:0} 41%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-q { 0%,39%{opacity:0} 44%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-r { 0%,42%{opacity:0} 47%,78%{opacity:.9} 90%,100%{opacity:0} }
@keyframes bp-enter-s { 0%,45%{opacity:0} 50%,78%{opacity:.9} 90%,100%{opacity:0} }

@keyframes bp-draw-d {
  0%,14%{opacity:0;stroke-dashoffset:100}
  16%{opacity:1}
  24%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-e {
  0%,18%{opacity:0;stroke-dashoffset:100}
  20%{opacity:1}
  28%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-f {
  0%,20%{opacity:0;stroke-dashoffset:100}
  22%{opacity:1}
  30%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-g {
  0%,22%{opacity:0;stroke-dashoffset:100}
  24%{opacity:1}
  32%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-h {
  0%,25%{opacity:0;stroke-dashoffset:100}
  27%{opacity:1}
  34%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-i {
  0%,27%{opacity:0;stroke-dashoffset:100}
  29%{opacity:1}
  36%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-n {
  0%,36%{opacity:0;stroke-dashoffset:100}
  38%{opacity:1}
  44%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-o {
  0%,39%{opacity:0;stroke-dashoffset:100}
  41%{opacity:1}
  47%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-p {
  0%,42%{opacity:0;stroke-dashoffset:100}
  44%{opacity:1}
  50%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-u {
  0%,58%{opacity:0;stroke-dashoffset:100}
  60%{opacity:1}
  68%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}
@keyframes bp-draw-v {
  0%,60%{opacity:0;stroke-dashoffset:100}
  62%{opacity:1}
  70%,78%{opacity:1;stroke-dashoffset:0}
  90%,100%{opacity:0;stroke-dashoffset:100}
}

@keyframes bp-module-n {
  0%,28%{opacity:0;transform:translateY(14px) scale(.94)}
  34%,78%{opacity:1;transform:translateY(0) scale(1)}
  90%,100%{opacity:0;transform:translateY(10px) scale(.96)}
}
@keyframes bp-module-o {
  0%,31%{opacity:0;transform:translateY(14px) scale(.94)}
  37%,78%{opacity:1;transform:translateY(0) scale(1)}
  90%,100%{opacity:0;transform:translateY(10px) scale(.96)}
}
@keyframes bp-module-p {
  0%,34%{opacity:0;transform:translateY(14px) scale(.94)}
  40%,78%{opacity:1;transform:translateY(0) scale(1)}
  90%,100%{opacity:0;transform:translateY(10px) scale(.96)}
}
@keyframes bp-module-q {
  0%,37%{opacity:0;transform:translateY(14px) scale(.94)}
  43%,78%{opacity:1;transform:translateY(0) scale(1)}
  90%,100%{opacity:0;transform:translateY(10px) scale(.96)}
}
@keyframes bp-module-r {
  0%,40%{opacity:0;transform:translateY(14px) scale(.94)}
  46%,78%{opacity:1;transform:translateY(0) scale(1)}
  90%,100%{opacity:0;transform:translateY(10px) scale(.96)}
}
@keyframes bp-module-s {
  0%,43%{opacity:0;transform:translateY(14px) scale(.94)}
  49%,78%{opacity:1;transform:translateY(0) scale(1)}
  90%,100%{opacity:0;transform:translateY(10px) scale(.96)}
}
@keyframes bp-module-t {
  0%,46%{opacity:0;transform:translateY(14px) scale(.94)}
  52%,78%{opacity:1;transform:translateY(0) scale(1)}
  90%,100%{opacity:0;transform:translateY(10px) scale(.96)}
}

@keyframes bp-product-loop {
  0%,50%{opacity:0;transform:translateY(28px) scale(.94)}
  58%{opacity:1;transform:translateY(-6px) scale(1.015)}
  64%,78%{opacity:1;transform:translateY(0) scale(1)}
  72%,78%{opacity:1;transform:translateY(-8px) scale(1)}
  90%,100%{opacity:0;transform:translateY(16px) scale(.95)}
}

@keyframes bp-spark-u {
  0%,62%{opacity:0;transform:scale(.4)}
  68%{opacity:1;transform:scale(1.12)}
  74%,78%{opacity:.75;transform:scale(1)}
  90%,100%{opacity:0;transform:scale(.5)}
}
@keyframes bp-spark-v {
  0%,64%{opacity:0;transform:scale(.4)}
  70%{opacity:1;transform:scale(1.1)}
  76%,78%{opacity:.7;transform:scale(1)}
  90%,100%{opacity:0;transform:scale(.5)}
}

@keyframes bp-glow-pulse {
  0%,100%{opacity:.12}
  40%{opacity:.22}
  70%{opacity:.16}
}

/* AI prompt ? generate ? settle */
@keyframes bp-ai-prompt {
  0%,18%{opacity:0;transform:translateY(10px)}
  24%{opacity:1;transform:translateY(0)}
  72%{opacity:1;transform:translateY(0)}
  82%,100%{opacity:0;transform:translateY(6px)}
}

@keyframes bp-ai-type-1 {
  0%,26%{opacity:0;transform:scaleX(.2)}
  32%,70%{opacity:.9;transform:scaleX(1)}
  80%,100%{opacity:0}
}

@keyframes bp-ai-type-2 {
  0%,30%{opacity:0;transform:scaleX(.2)}
  36%,70%{opacity:.75;transform:scaleX(1)}
  80%,100%{opacity:0}
}

@keyframes bp-ai-cursor {
  0%,24%{opacity:0}
  26%,30%{opacity:1}
  32%,36%{opacity:0}
  38%,42%{opacity:1}
  44%,48%{opacity:0}
  50%,54%{opacity:1}
  56%,70%{opacity:0}
  100%{opacity:0}
}

@keyframes bp-ai-spark-pulse {
  0%,20%{opacity:0;transform:scale(.4)}
  26%{opacity:1;transform:scale(1.15)}
  34%,68%{opacity:1;transform:scale(1)}
  78%,100%{opacity:0;transform:scale(.6)}
}

@keyframes bp-ai-beam {
  0%,28%{opacity:0}
  34%{opacity:.9}
  48%,62%{opacity:.55}
  72%,100%{opacity:0}
}

@keyframes bp-ai-token-1 {
  0%,32%{opacity:0;transform:translateY(24px) scale(.8)}
  38%{opacity:1;transform:translateY(0) scale(1)}
  52%{opacity:.9}
  60%,100%{opacity:0}
}
@keyframes bp-ai-token-2 {
  0%,34%{opacity:0;transform:translateY(28px) scale(.8)}
  40%{opacity:1;transform:translateY(0) scale(1)}
  54%{opacity:.9}
  62%,100%{opacity:0}
}
@keyframes bp-ai-token-3 {
  0%,36%{opacity:0;transform:translateY(22px) scale(.8)}
  42%{opacity:1;transform:translateY(0) scale(1)}
  56%{opacity:.9}
  64%,100%{opacity:0}
}
@keyframes bp-ai-token-4 {
  0%,38%{opacity:0;transform:translateY(30px) scale(.8)}
  44%{opacity:1;transform:translateY(0) scale(1)}
  58%{opacity:.85}
  66%,100%{opacity:0}
}
@keyframes bp-ai-token-5 {
  0%,40%{opacity:0;transform:translateY(26px) scale(.8)}
  46%{opacity:1;transform:translateY(0) scale(1)}
  60%{opacity:.85}
  68%,100%{opacity:0}
}

@keyframes bp-ai-draft-1 {
  0%,36%{opacity:0;transform:scale(.9)}
  42%,54%{opacity:.85;transform:scale(1)}
  62%,100%{opacity:0}
}
@keyframes bp-ai-draft-2 {
  0%,38%{opacity:0;transform:scale(.9)}
  44%,56%{opacity:.9;transform:scale(1)}
  64%,100%{opacity:0}
}
@keyframes bp-ai-draft-3 {
  0%,40%{opacity:0;transform:scale(.9)}
  46%,58%{opacity:.8;transform:scale(1)}
  66%,100%{opacity:0}
}

@keyframes bp-ai-spark-float-a {
  0%,34%{opacity:0;transform:translateY(12px) scale(.5)}
  40%{opacity:1;transform:translateY(0) scale(1.1)}
  55%{opacity:.9;transform:translateY(-8px) scale(1)}
  68%,100%{opacity:0;transform:translateY(-18px) scale(.6)}
}
@keyframes bp-ai-spark-float-b {
  0%,36%{opacity:0;transform:translateY(14px) scale(.5)}
  42%{opacity:1;transform:translateY(0) scale(1.15)}
  58%{opacity:.95;transform:translateY(-10px) scale(1)}
  70%,100%{opacity:0;transform:translateY(-20px) scale(.55)}
}
@keyframes bp-ai-spark-float-c {
  0%,38%{opacity:0;transform:translateY(10px) scale(.5)}
  44%{opacity:1;transform:translateY(0) scale(1.1)}
  60%{opacity:.9;transform:translateY(-6px) scale(1)}
  72%,100%{opacity:0;transform:translateY(-16px) scale(.6)}
}

@media (prefers-reduced-motion: reduce) {
  .bp-glow,
  .bp-grid-line,
  .bp-frame,
  .bp-frame-inner,
  .bp-dim,
  .bp-corner,
  .bp-cross,
  .bp-callout,
  .bp-label,
  .bp-module,
  .bp-module-line,
  .bp-flow,
  .bp-node,
  .bp-ai-prompt,
  .bp-ai-prompt-type,
  .bp-ai-cursor,
  .bp-ai-spark,
  .bp-ai-beam,
  .bp-ai-token,
  .bp-ai-draft,
  .bp-product,
  .bp-lift-mark,
  .bp-spark {
    animation: none !important;
  }
  .bp-glow { opacity: 0.18; }
  .bp-grid-line,
  .bp-frame-inner,
  .bp-corner,
  .bp-cross,
  .bp-label,
  .bp-node { opacity: 0.9; }
  .bp-frame,
  .bp-dim,
  .bp-callout,
  .bp-flow,
  .bp-lift-mark {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  .bp-module,
  .bp-module-line,
  .bp-product,
  .bp-spark,
  .bp-ai-prompt,
  .bp-ai-spark--prompt,
  .bp-ai-spark--product,
  .bp-ai-beam,
  .bp-ai-token--2,
  .bp-ai-draft--2 {
    opacity: 1;
    transform: none;
  }
  .bp-ai-prompt-type { opacity: 0.8; }
  .bp-ai-cursor,
  .bp-ai-token--1,
  .bp-ai-token--3,
  .bp-ai-token--4,
  .bp-ai-token--5,
  .bp-ai-draft--1,
  .bp-ai-draft--3,
  .bp-ai-spark--a,
  .bp-ai-spark--c {
    opacity: 0.35;
  }
}