/* Card 03 art, "rebuilt in pieces": an empty product-page outline, then the pieces of a stronger page fly in and snap
   into their slots (photo, reviews, price, button, delivery and payment, benefits). Conversion and order value then tick up.
   Each piece sets its own timing and
   fly-in offset inline (--d delay, --x/--y offset, --r tilt). */
.art--build { flex: 1; min-height: 196px; margin: 18px -8px 16px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; position: relative; }
.art--build::before { content: ""; position: absolute; inset: -10% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 50% at 50% 45%, rgba(122, 244, 208, 0.09), transparent 70%); }

/* the page */
.bp { position: relative; padding: 9px 10px 10px; border-radius: 15px; display: grid; gap: 6px;
  background: linear-gradient(180deg, rgba(40, 42, 43, 0.7), rgba(28, 30, 31, 0.7));
  box-shadow: inset 0 0.5px 0 rgba(250, 250, 248, 0.14), inset 0 0 0 0.5px rgba(250, 250, 248, 0.07), 0 14px 30px -16px rgba(0, 0, 0, 0.95); }
.bp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0.5px 0 rgba(122, 244, 208, 0.5), inset 0 0 0 1px rgba(122, 244, 208, 0.35), 0 0 34px -12px rgba(122, 244, 208, 0.6); }

/* each slot shows a dashed outline until its piece lands in it */
.pc { position: relative; }
.pc::before { content: ""; position: absolute; inset: 0; border-radius: 8px; border: 1px dashed rgba(250, 250, 248, 0.16); pointer-events: none; }
.pc-in { display: block; }

.bp-img { position: relative; height: 54px; border-radius: 9px; display: grid; place-items: center;
  background: radial-gradient(60% 90% at 50% 40%, rgba(122, 244, 208, 0.28), rgba(122, 244, 208, 0.04)); }
.bp-img svg { width: 22px; height: auto; }
.bp-badge { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 500; color: #0B0B0C; background: var(--growth); }
.bp-tx { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 14px; }
.bp-ln { height: 6px; width: 46%; border-radius: 3px; background: rgba(250, 250, 248, 0.22); }
.bp-st { font-size: 10px; letter-spacing: 1px; line-height: 1; color: var(--growth); }
.bp-pr { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.bp-now { font-size: 13px; font-weight: 500; color: var(--milk); }
.bp-old { font-size: 11px; color: rgba(250, 250, 248, 0.4); text-decoration: line-through; }
.bp-btn { display: grid; place-items: center; height: 26px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: #0B0B0C;
  background: linear-gradient(180deg, #9af8dc, #6fe6c4); box-shadow: 0 0 22px -6px rgba(122, 244, 208, 0.7); }
.bp-tr { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.bp-tr span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: rgba(250, 250, 248, 0.68); white-space: nowrap; }
.bp-tr svg, .bp-ok svg { width: 13px; height: 13px; flex: none; }
.bp-ok { display: grid; gap: 4px; }
.bp-ok span { display: flex; align-items: center; gap: 6px; }
.bp-ok i { display: block; height: 4px; width: 70%; border-radius: 2px; background: rgba(250, 250, 248, 0.16); }
.bp-ok span + span i { width: 52%; }

/* the outcome: two small gauges, each a run of bars that climbs */
.bk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.kq { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 58, 51, 0.7), rgba(24, 40, 35, 0.7));
  box-shadow: inset 0 0.5px 0 rgba(122, 244, 208, 0.5), inset 0 0 0 0.5px rgba(122, 244, 208, 0.28), 0 0 26px -14px rgba(122, 244, 208, 0.6); }
.kq-bars { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; }
.kq-bars i { width: 4px; border-radius: 1.5px; background: rgba(122, 244, 208, 0.45); transform-origin: 50% 100%; }
.kq-bars i:nth-child(1) { height: 30%; } .kq-bars i:nth-child(2) { height: 48%; } .kq-bars i:nth-child(3) { height: 70%; }
.kq-bars i:nth-child(4) { height: 100%; background: var(--growth); box-shadow: 0 0 8px rgba(122, 244, 208, 0.6); }
.kq-t { font-size: 11.5px; font-weight: 500; color: var(--milk); }
.kq-up { margin-left: auto; width: 12px; height: 12px; flex: none; }

/* sequence, played once when the card is in view (script adds .play) */
.art--build .bp, .art--build .kq { opacity: 0; transform: translateY(8px) scale(.98); }
.art--build .pc-in { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(.92); }
.art--build .kq-bars i { transform: scaleY(0); }
.art--build .kq-up { opacity: 0; }
.art--build.play .bp { animation: bdIn .7s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.art--build.play .pc-in { animation: bdSnap .75s cubic-bezier(.3, 1.35, .5, 1) var(--d) forwards; }
.art--build.play .pc::before { animation: bdOut .3s ease calc(var(--d) + .45s) forwards; }
.art--build.play .bp::after { animation: bdFade .9s ease 2.9s forwards; }
.art--build.play .kq { animation: bdIn .7s cubic-bezier(.2, .8, .2, 1) var(--d) forwards; }
.art--build.play .kq-bars i { animation: bdGrow .45s cubic-bezier(.2, .8, .2, 1) forwards; }
.art--build.play .kq-bars i:nth-child(1) { animation-delay: calc(var(--d) + .35s); }
.art--build.play .kq-bars i:nth-child(2) { animation-delay: calc(var(--d) + .5s); }
.art--build.play .kq-bars i:nth-child(3) { animation-delay: calc(var(--d) + .65s); }
.art--build.play .kq-bars i:nth-child(4) { animation-delay: calc(var(--d) + .8s); }
.art--build.play .kq-up { animation: bdArrow .6s cubic-bezier(.2, .8, .2, 1) calc(var(--d) + 1.05s) forwards; }
@keyframes bdIn { to { opacity: 1; transform: none; } }
@keyframes bdSnap { to { opacity: 1; transform: none; } }
@keyframes bdOut { to { opacity: 0; } }
@keyframes bdFade { to { opacity: 1; } }
@keyframes bdGrow { to { transform: scaleY(1); } }
@keyframes bdArrow { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .art--build .bp, .art--build .kq, .art--build .pc-in, .art--build .kq-up, .art--build .bp::after,
  .art--build.play .bp, .art--build.play .kq, .art--build.play .pc-in, .art--build.play .kq-up, .art--build.play .bp::after { opacity: 1; transform: none; animation: none; }
  .art--build .pc::before { display: none; }
  .art--build .kq-bars i, .art--build.play .kq-bars i { transform: none; animation: none; }
}
@media (max-width: 860px) {
  .art--build { min-height: 200px; margin: 14px 0 16px; gap: 10px; }
  .bp { padding: 11px 12px 12px; gap: 8px; }
  .bp-img { height: 80px; } .bp-tx { height: 16px; }
  .bp-badge, .bp-st { font-size: 11px; } .bp-tr span { font-size: 12px; }
  .bp-now { font-size: 15px; } .bp-old { font-size: 12.5px; }
  .bp-btn { height: 32px; font-size: 13px; }
  .kq { padding: 9px 12px 9px 10px; } .kq-t { font-size: 13px; } .kq-bars { height: 22px; } .kq-bars i { width: 5px; }
}