/**
 * Lifecycle-loop phase animations - Think / Create / Publish / Convert / Engage.
 *
 * Five pure SVG + CSS loops, one per tab of the "Everything your business needs,
 * end to end" section. The markup lives in template-parts/landing/loop-anim/*.php
 * and main.js runs ONE IntersectionObserver over every .qyx-anim, so a loop only
 * burns frames while it is actually on screen (and never at all while its tab is
 * hidden, since x-show leaves the panel display:none).
 *
 * The palette is LIGHT on purpose. The section around it is the dark island, so a
 * white field reads as a real screenshot of the product instead of more dark
 * decor. Tokens are namespaced --qla-*, NOT --qyx-*: theme.css already owns
 * --qyx-ink on :root, and re-declaring that name here would shadow it for every
 * descendant.
 *
 * Source of the originals: docs/inbox/qyx-*-animation.html.
 */

/* Declared on the figure as well as the graphic: the figure paints the white
   field from --qla-card, and a custom property only cascades DOWN, so reading it
   from .qyx-anim alone would leave the field transparent. */
.qyx-loop__figure,
.qyx-anim {
	--qla-card: #ffffff;
	--qla-card-edge: rgba(15, 23, 42, 0.12);
	--qla-line: rgba(15, 23, 42, 0.14);

	--qla-ink-strong: #0f172a;
	--qla-ink-mid: rgba(15, 23, 42, 0.45);
	--qla-ink: rgba(15, 23, 42, 0.17);
	--qla-ink-raw: rgba(15, 23, 42, 0.24);
	--qla-stage: rgba(15, 23, 42, 0.07);
	--qla-cell: rgba(15, 23, 42, 0.05);
	--qla-panel: rgba(15, 23, 42, 0.04);
	--qla-row: rgba(15, 23, 42, 0.04);
	--qla-bubble-you: rgba(15, 23, 42, 0.09);
	--qla-divider: rgba(15, 23, 42, 0.09);

	--qla-g1: #3b82f6;
	--qla-g2: #a855f7;
	--qla-g3: #ec4899;
	--qla-g4: #f97316;
}

/* Master timeline. Think earns the extra 2s - it has two more beats than the
   others (merge, then the canvas opening). */
.qyx-think                                          { --qla-dur: 18s; }
.qyx-create, .qyx-publish, .qyx-convert, .qyx-engage { --qla-dur: 16s; }

/* The white field. One fixed 4/3 box for all five: the graphics have different
   intrinsic ratios (Think is nearly square, Create is wide), and without a shared
   box, switching tabs would jump the panel height and shove the copy beside it up
   and down. 4/3 is what the skeleton mockup this replaced used. */
.qyx-loop__figure {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: clamp(0.75rem, 2.5vw, 1.5rem);
	border-radius: 1.25rem;
	background: var(--qla-card);
	box-shadow: 0 24px 48px -24px rgba(8, 5, 7, 0.6);
}

/* Explicit width/height attributes on each <svg> give it an intrinsic size, so
   max-width/max-height scale it down to fit exactly like an <img> would - no
   letterboxing, no overflow past the rounded corners. */
.qyx-anim { display: grid; place-items: center; width: 100%; height: 100%; }
.qyx-anim svg {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	overflow: visible;
}

/* Lifts the layered surfaces off the white field. */
.qla-card  { filter: drop-shadow(0 6px 20px rgba(15, 23, 42, 0.10)); }
.qla-float { filter: drop-shadow(0 12px 32px rgba(15, 23, 42, 0.20)); }

/* ---------- think ---------- */
.qyx-think [class^="qa-"],
.qyx-think [class*=" qa-"] { animation-play-state: paused; }
.qyx-think.is-playing [class^="qa-"],
.qyx-think.is-playing [class*=" qa-"] { animation-play-state: running; }

/* ---- 1. composer ---- */
@keyframes qaType { 0% { transform: scaleX(0); } 8% { transform: scaleX(1); } 94% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes qaCaret { 0%, 8% { opacity: 1; } 9%, 100% { opacity: 0; } }
@keyframes qaBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes qaSend { 0%, 8% { opacity: .5; transform: scale(1); } 10% { opacity: 1; transform: scale(1.12); } 13%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: .5; transform: scale(1); } }

/* ---- 2. connectors ---- */
@keyframes qaDash { to { stroke-dashoffset: -320; } }
@keyframes qaUp { 0%, 9% { opacity: 0; } 13%, 26% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes qaDown { 0%, 46% { opacity: 0; } 51%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes qaNode { 0%, 9% { opacity: .2; } 14%, 62% { opacity: 1; } 72%, 100% { opacity: .2; } }

/* ---- 3. model cards ---- */
@keyframes qaCard1 { 0%, 11% { opacity: 0; transform: translateY(8px); } 17%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qaCard2 { 0%, 13% { opacity: 0; transform: translateY(8px); } 19%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qaCard3 { 0%, 15% { opacity: 0; transform: translateY(8px); } 21%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
/* each model thinks, then answers */
@keyframes qaDots1 { 0%, 18% { opacity: 0; } 21%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes qaDots2 { 0%, 20% { opacity: 0; } 23%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes qaDots3 { 0%, 22% { opacity: 0; } 25%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes qaBounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3.5px); } 60% { transform: translateY(0); } }
@keyframes qaAns1 { 0%, 28% { opacity: 0; transform: scaleX(.2); } 34%, 94% { opacity: 1; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes qaAns2 { 0%, 31% { opacity: 0; transform: scaleX(.2); } 37%, 94% { opacity: 1; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes qaAns3 { 0%, 34% { opacity: 0; transform: scaleX(.2); } 40%, 94% { opacity: 1; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes qaDone1 { 0%, 36% { opacity: 0; transform: scale(.4); } 41%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qaDone2 { 0%, 38% { opacity: 0; transform: scale(.4); } 43%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qaDone3 { 0%, 40% { opacity: 0; transform: scale(.4); } 45%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
/* the strongest answer gets marked */
@keyframes qaBest { 0%, 43% { opacity: 0; transform: scale(.7); } 49%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }

/* ---- 4. merged result ---- */
@keyframes qaResult { 0%, 50% { opacity: 0; transform: translateY(8px); } 58%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qaBrand { 0%, 52% { opacity: 0; transform: scale(.6); } 59% { opacity: 1; transform: scale(1.14); } 63%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qaMarkA { 0%, 56% { opacity: 0; } 62%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes qaMarkB { 0%, 58% { opacity: 0; } 64%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes qaMarkC { 0%, 60% { opacity: 0; } 66%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes qaBarA { 0%, 56% { opacity: 0; transform: translateX(-6px) scaleX(1); } 62%, 74% { opacity: 1; transform: translateX(0) scaleX(1); } 80%, 94% { opacity: 1; transform: translateX(0) scaleX(.52); } 98%, 100% { opacity: 0; transform: translateX(0) scaleX(.52); } }
@keyframes qaBarB { 0%, 58% { opacity: 0; transform: translateX(-6px) scaleX(1); } 64%, 74% { opacity: 1; transform: translateX(0) scaleX(1); } 80%, 94% { opacity: 1; transform: translateX(0) scaleX(.52); } 98%, 100% { opacity: 0; transform: translateX(0) scaleX(.52); } }
@keyframes qaBarC { 0%, 60% { opacity: 0; transform: translateX(-6px) scaleX(1); } 66%, 74% { opacity: 1; transform: translateX(0) scaleX(1); } 80%, 94% { opacity: 1; transform: translateX(0) scaleX(.52); } 98%, 100% { opacity: 0; transform: translateX(0) scaleX(.52); } }

/* ---- 5. sources ---- */
@keyframes qaCount { 0%, 66% { opacity: 0; transform: scale(.5); } 72%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qaSrcA { 0%, 68% { opacity: 0; transform: translateY(6px); } 74%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qaSrcB { 0%, 70% { opacity: 0; transform: translateY(6px); } 76%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qaSrcC { 0%, 72% { opacity: 0; transform: translateY(6px); } 78%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }

/* ---- 6. canvas ---- */
@keyframes qaCanvas { 0%, 77% { opacity: 0; transform: translateX(16px); } 84%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes qaDocA { 0%, 81% { opacity: 0; transform: scaleX(0); } 86%, 94% { opacity: 1; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes qaDocB { 0%, 83% { opacity: 0; transform: scaleX(0); } 88%, 94% { opacity: 1; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes qaDocC { 0%, 85% { opacity: 0; transform: scaleX(0); } 90%, 94% { opacity: 1; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes qaDocD { 0%, 87% { opacity: 0; transform: scaleX(0); } 92%, 94% { opacity: 1; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes qaSelect { 0%, 88% { opacity: 0; } 91%, 94% { opacity: .3; } 98%, 100% { opacity: 0; } }
@keyframes qaCaretShow { 0%, 88% { opacity: 0; } 89%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ---- bindings ---- */
.qa-type { animation: qaType var(--qla-dur) ease-out infinite; transform-origin: left center; }
.qa-caret { animation: qaCaret 1s steps(2) infinite; }
.qa-send { animation: qaSend var(--qla-dur) ease-out infinite; transform-origin: 554px 67px; }

.qa-up { stroke-dasharray: 7 11; animation: qaDash 2.6s linear infinite, qaUp var(--qla-dur) ease-in-out infinite; }
.qa-down { stroke-dasharray: 7 11; animation: qaDash 2.6s linear infinite, qaDown var(--qla-dur) ease-in-out infinite; }
.qa-node { animation: qaNode var(--qla-dur) ease-in-out infinite; }

.qa-c1 { animation: qaCard1 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qa-c2 { animation: qaCard2 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qa-c3 { animation: qaCard3 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qa-d1 { animation: qaDots1 var(--qla-dur) step-end infinite; }
.qa-d2 { animation: qaDots2 var(--qla-dur) step-end infinite; }
.qa-d3 { animation: qaDots3 var(--qla-dur) step-end infinite; }
.qa-bo1 { animation: qaBounce 1s ease-in-out infinite; }
.qa-bo2 { animation: qaBounce 1s ease-in-out infinite; animation-delay: .15s; }
.qa-bo3 { animation: qaBounce 1s ease-in-out infinite; animation-delay: .3s; }
.qa-an1 { animation: qaAns1 var(--qla-dur) ease-out infinite; transform-origin: left center; }
.qa-an2 { animation: qaAns2 var(--qla-dur) ease-out infinite; transform-origin: left center; }
.qa-an3 { animation: qaAns3 var(--qla-dur) ease-out infinite; transform-origin: left center; }
.qa-ok1 { animation: qaDone1 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qa-ok2 { animation: qaDone2 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qa-ok3 { animation: qaDone3 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qa-best { animation: qaBest var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }

.qa-res { animation: qaResult var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qa-brand { animation: qaBrand var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; transform-origin: 101px 407px; }
.qa-ka { animation: qaMarkA var(--qla-dur) ease-out infinite; }
.qa-kb { animation: qaMarkB var(--qla-dur) ease-out infinite; }
.qa-kc { animation: qaMarkC var(--qla-dur) ease-out infinite; }
.qa-ba { animation: qaBarA var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; transform-origin: left center; }
.qa-bb { animation: qaBarB var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; transform-origin: left center; }
.qa-bc { animation: qaBarC var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; transform-origin: left center; }

.qa-count { animation: qaCount var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; transform-origin: 556px 407px; }
.qa-sa { animation: qaSrcA var(--qla-dur) ease-out infinite; }
.qa-sb { animation: qaSrcB var(--qla-dur) ease-out infinite; }
.qa-sc { animation: qaSrcC var(--qla-dur) ease-out infinite; }

.qa-canvas { animation: qaCanvas var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qa-da { animation: qaDocA var(--qla-dur) ease-out infinite; transform-origin: left center; }
.qa-db { animation: qaDocB var(--qla-dur) ease-out infinite; transform-origin: left center; }
.qa-dc { animation: qaDocC var(--qla-dur) ease-out infinite; transform-origin: left center; }
.qa-dd { animation: qaDocD var(--qla-dur) ease-out infinite; transform-origin: left center; }
.qa-sel { animation: qaSelect var(--qla-dur) ease-out infinite; }
.qa-caretwrap { animation: qaCaretShow var(--qla-dur) step-end infinite; }
.qa-blink { animation: qaBlink 1.1s steps(2) infinite; }

@media (prefers-reduced-motion: reduce) {
  .qyx-think [class^="qa-"],
  .qyx-think [class*=" qa-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .qyx-think .qa-caret, .qyx-think .qa-d1, .qyx-think .qa-d2, .qyx-think .qa-d3 { opacity: 0 !important; }
  .qyx-think .qa-ba, .qyx-think .qa-bb, .qyx-think .qa-bc { transform: scaleX(.52) !important; }
  .qyx-think .qa-sel { opacity: .3 !important; }
}

/* ---------- create ---------- */
block into your stylesheet (or keep it inline).
  2. Paste the <div class="qyx-anim qyx-create"> ... </div> in place of
     the Create placeholder.
  3. Keep the <script> at the bottom. If Think is already on the same
     page, you can delete this one and use a single observer that
     targets all .qyx-anim elements (see note in the script).

  BRAND MARK
  The badge sits on the transformation node, where one input becomes
  five outputs. Swap the <path> for the real Qyx logo mark — keep the
  28x28 box at x=326 y=164 and it drops straight in.

  TIMING
  One master timeline, 16s. Stagger is baked into keyframe percentages.
  Never use animation-delay for stagger on an infinite loop: it offsets
  that element's whole cycle, so it lingers after everything else has
  faded and restarted, which shows as a hitch every pass.

  WHAT IT SHOWS (one 16s loop)
  1. A raw phone snapshot: crooked, flat, unstyled on purpose
  2. A gradient scan sweeps it — the moment of transformation
  3. The brand mark pulses on the node
  4. It fans out into five finished assets: studio photo, video ad,
     UGC video, article, voiceover
  5. The video progress bar runs and the waveform plays
  6. Everything fades and the loop restarts
-->

<style>


.qyx-create [class^="qc-"],
.qyx-create [class*=" qc-"] { animation-play-state: paused; }
.qyx-create.is-playing [class^="qc-"],
.qyx-create.is-playing [class*=" qc-"] { animation-play-state: running; }

/* ---- 1. raw input ---- */
@keyframes qcIn {
  0% { opacity: 0; transform: translateY(10px); }
  7%, 94% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(0); }
}
/* the scan that turns raw into finished */
@keyframes qcScan {
  0%, 9% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  20% { opacity: 1; transform: translateY(120px); }
  23%, 100% { opacity: 0; transform: translateY(120px); }
}
@keyframes qcBrand {
  0%, 17% { opacity: 0; transform: scale(.6); }
  24% { opacity: 1; transform: scale(1.16); }
  28%, 94% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(1); }
}

/* ---- 2. fan out ---- */
@keyframes qcDash { to { stroke-dashoffset: -320; } }
@keyframes qcFlow { 0%, 22% { opacity: 0; } 27%, 44% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes qcNode { 0%, 20% { opacity: .2; } 26%, 62% { opacity: 1; } 72%, 100% { opacity: .2; } }

/* ---- 3. five outputs, stagger baked in ---- */
@keyframes qcCard1 { 0%, 30% { opacity: 0; transform: translateY(10px); } 37%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qcCard2 { 0%, 33% { opacity: 0; transform: translateY(10px); } 40%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qcCard3 { 0%, 36% { opacity: 0; transform: translateY(10px); } 43%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qcCard4 { 0%, 39% { opacity: 0; transform: translateY(10px); } 46%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qcCard5 { 0%, 42% { opacity: 0; transform: translateY(10px); } 49%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }

/* ---- 4. life inside the outputs ---- */
@keyframes qcProgress { 0%, 44% { transform: scaleX(0); } 76%, 100% { transform: scaleX(1); } }
@keyframes qcWaveA { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@keyframes qcWaveB { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.35); } }
@keyframes qcWaveC { 0%, 100% { transform: scaleY(.7); } 40% { transform: scaleY(1); } 80% { transform: scaleY(.45); } }

/* ---- bindings ---- */
.qc-in { animation: qcIn var(--qla-dur) ease-out infinite; }
.qc-scan { animation: qcScan var(--qla-dur) ease-in-out infinite; }
.qc-brand { animation: qcBrand var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; transform-origin: 340px 178px; }

.qc-flow { stroke-dasharray: 7 11; animation: qcDash 2.6s linear infinite, qcFlow var(--qla-dur) ease-in-out infinite; }
.qc-node { animation: qcNode var(--qla-dur) ease-in-out infinite; }

.qc-c1 { animation: qcCard1 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qc-c2 { animation: qcCard2 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qc-c3 { animation: qcCard3 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qc-c4 { animation: qcCard4 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qc-c5 { animation: qcCard5 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }

.qc-prog { animation: qcProgress var(--qla-dur) linear infinite; transform-origin: left center; }
.qc-wa { animation: qcWaveA 1.1s ease-in-out infinite; }
.qc-wb { animation: qcWaveB 1.3s ease-in-out infinite; }
.qc-wc { animation: qcWaveC 900ms ease-in-out infinite; }


@media (prefers-reduced-motion: reduce) {
  .qyx-create [class^="qc-"],
  .qyx-create [class*=" qc-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .qyx-create .qc-scan { opacity: 0 !important; }
  .qyx-create .qc-prog { transform: scaleX(.62) !important; }
}

/* ---------- publish ---------- */
.qyx-publish [class^="qp-"],
.qyx-publish [class*=" qp-"] { animation-play-state: paused; }
.qyx-publish.is-playing [class^="qp-"],
.qyx-publish.is-playing [class*=" qp-"] { animation-play-state: running; }

/* ---- 1. assets arriving from Create ---- */
@keyframes qpAsset1 { 0%, 2% { opacity: 0; transform: translateY(-10px); } 9%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qpAsset2 { 0%, 5% { opacity: 0; transform: translateY(-10px); } 12%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qpAsset3 { 0%, 8% { opacity: 0; transform: translateY(-10px); } 15%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }

/* ---- 2. flow into the calendar ---- */
@keyframes qpDash { to { stroke-dashoffset: -320; } }
@keyframes qpFlowIn { 0%, 14% { opacity: 0; } 19%, 34% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes qpFlowOut { 0%, 52% { opacity: 0; } 57%, 72% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes qpNode { 0%, 12% { opacity: .2; } 18%, 74% { opacity: 1; } 84%, 100% { opacity: .2; } }

/* ---- 3. the calendar ---- */
@keyframes qpCal {
  0%, 12% { opacity: 0; transform: translateY(10px); }
  20%, 94% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(0); }
}
/* posts filling themselves in, stagger baked in */
@keyframes qpPostA { 0%, 24% { opacity: 0; transform: scale(.5); } 30%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpPostB { 0%, 28% { opacity: 0; transform: scale(.5); } 34%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpPostC { 0%, 32% { opacity: 0; transform: scale(.5); } 38%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpPostD { 0%, 36% { opacity: 0; transform: scale(.5); } 42%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpPostE { 0%, 40% { opacity: 0; transform: scale(.5); } 46%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpPostF { 0%, 44% { opacity: 0; transform: scale(.5); } 50%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }

/* ---- 4. platforms + ticks landing ---- */
@keyframes qpChips { 0%, 18% { opacity: 0; transform: translateY(8px); } 26%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qpT1 { 0%, 60% { opacity: 0; transform: scale(.4); } 66%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpT2 { 0%, 63% { opacity: 0; transform: scale(.4); } 69%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpT3 { 0%, 66% { opacity: 0; transform: scale(.4); } 72%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpT4 { 0%, 69% { opacity: 0; transform: scale(.4); } 75%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpT5 { 0%, 72% { opacity: 0; transform: scale(.4); } 78%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qpT6 { 0%, 75% { opacity: 0; transform: scale(.4); } 81%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }

/* ---- bindings ---- */
.qp-a1 { animation: qpAsset1 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qp-a2 { animation: qpAsset2 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qp-a3 { animation: qpAsset3 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }

.qp-fin { stroke-dasharray: 7 11; animation: qpDash 2.6s linear infinite, qpFlowIn var(--qla-dur) ease-in-out infinite; }
.qp-fout { stroke-dasharray: 7 11; animation: qpDash 2.6s linear infinite, qpFlowOut var(--qla-dur) ease-in-out infinite; }
.qp-node { animation: qpNode var(--qla-dur) ease-in-out infinite; }

.qp-cal { animation: qpCal var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qp-pa { animation: qpPostA var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-pb { animation: qpPostB var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-pc { animation: qpPostC var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-pd { animation: qpPostD var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-pe { animation: qpPostE var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-pf { animation: qpPostF var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }

.qp-chips { animation: qpChips var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qp-t1 { animation: qpT1 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-t2 { animation: qpT2 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-t3 { animation: qpT3 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-t4 { animation: qpT4 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-t5 { animation: qpT5 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qp-t6 { animation: qpT6 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .qyx-publish [class^="qp-"],
  .qyx-publish [class*=" qp-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- convert ---------- */
.qla-float { filter: drop-shadow(0 12px 32px rgba(8, 5, 7, 0.22)); }

.qyx-convert [class^="qv-"],
.qyx-convert [class*=" qv-"] { animation-play-state: paused; }
.qyx-convert.is-playing [class^="qv-"],
.qyx-convert.is-playing [class*=" qv-"] { animation-play-state: running; }

@keyframes qvSite { 0% { opacity: 0; } 5%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes qvChat {
  0%, 2% { opacity: 0; transform: translateY(24px); }
  11%, 94% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(0); }
}
/* always-on indicator */
@keyframes qvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

/* typing, then the answer replaces it */
@keyframes qvTyping { 0%, 12% { opacity: 0; } 15%, 19% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes qvBounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3.5px); } 60% { transform: translateY(0); } }

@keyframes qvM1 { 0%, 20% { opacity: 0; transform: translateY(6px); } 25%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qvM2 { 0%, 29% { opacity: 0; transform: translateY(6px); } 34%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qvProd { 0%, 39% { opacity: 0; transform: translateY(8px); } 46%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
/* the press */
@keyframes qvPress { 0%, 51% { transform: scale(1); } 53% { transform: scale(.93); } 56%, 100% { transform: scale(1); } }
/* cart badge landing in the site header */
@keyframes qvCart { 0%, 54% { opacity: 0; transform: scale(.3); } 60%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }

@keyframes qvSlots { 0%, 62% { opacity: 0; transform: translateY(6px); } 68%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qvPick { 0%, 71% { opacity: 0; } 76%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes qvConf { 0%, 79% { opacity: 0; transform: translateY(6px); } 85%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }

.qv-site { animation: qvSite var(--qla-dur) ease-out infinite; }
.qv-chat { animation: qvChat var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qv-dot { animation: qvPulse 2s ease-in-out infinite; transform-origin: 450px 143px; }
.qv-typing { animation: qvTyping var(--qla-dur) step-end infinite; }
.qv-b1 { animation: qvBounce 1s ease-in-out infinite; }
.qv-b2 { animation: qvBounce 1s ease-in-out infinite; animation-delay: .15s; }
.qv-b3 { animation: qvBounce 1s ease-in-out infinite; animation-delay: .3s; }
.qv-m1 { animation: qvM1 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qv-m2 { animation: qvM2 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qv-prod { animation: qvProd var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qv-press { animation: qvPress var(--qla-dur) ease-out infinite; transform-origin: 532px 302px; }
.qv-cart { animation: qvCart var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; transform-origin: 374px 74px; }
.qv-slots { animation: qvSlots var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qv-pick { animation: qvPick var(--qla-dur) ease-out infinite; }
.qv-conf { animation: qvConf var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .qyx-convert [class^="qv-"],
  .qyx-convert [class*=" qv-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .qyx-convert .qv-typing { opacity: 0 !important; }
}

/* ---------- engage ---------- */
.qyx-engage [class^="qe-"],
.qyx-engage [class*=" qe-"] { animation-play-state: paused; }
.qyx-engage.is-playing [class^="qe-"],
.qyx-engage.is-playing [class*=" qe-"] { animation-play-state: running; }

/* ---- 1. the pile-up ---- */
@keyframes qeTiles { 0% { opacity: 0; transform: translateY(-8px); } 7%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qeBub1 { 0%, 3% { opacity: 0; transform: scale(.5); } 9%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qeBub2 { 0%, 6% { opacity: 0; transform: scale(.5); } 12%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qeBub3 { 0%, 9% { opacity: 0; transform: scale(.5); } 15%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qeFloatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes qeFloatB { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }

/* ---- 2. into one inbox ---- */
@keyframes qeDash { to { stroke-dashoffset: -320; } }
@keyframes qeFlow { 0%, 14% { opacity: 0; } 19%, 60% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes qeInbox { 0%, 12% { opacity: 0; transform: translateY(10px); } 20%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }

/* ---- 3. conversations landing ---- */
@keyframes qeRow1 { 0%, 22% { opacity: 0; transform: translateX(-12px); } 29%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes qeRow2 { 0%, 30% { opacity: 0; transform: translateX(-12px); } 37%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes qeRow3 { 0%, 38% { opacity: 0; transform: translateX(-12px); } 45%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes qeRow4 { 0%, 46% { opacity: 0; transform: translateX(-12px); } 53%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } }

/* unread counter climbing */
@keyframes qeN1 { 0%, 27% { opacity: 0; } 30%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes qeN2 { 0%, 35% { opacity: 0; } 38%, 43% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes qeN3 { 0%, 43% { opacity: 0; } 46%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes qeN4 { 0%, 51% { opacity: 0; } 54%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ---- 4. auto-replies ---- */
@keyframes qeTick1 { 0%, 58% { opacity: 0; transform: scale(.4); } 63%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qeTick2 { 0%, 61% { opacity: 0; transform: scale(.4); } 66%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qeTick3 { 0%, 64% { opacity: 0; transform: scale(.4); } 69%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes qeTick4 { 0%, 67% { opacity: 0; transform: scale(.4); } 72%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }

/* ---- 5. tags and the captured lead ---- */
@keyframes qeTag1 { 0%, 72% { opacity: 0; transform: translateY(5px); } 77%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qeTag2 { 0%, 75% { opacity: 0; transform: translateY(5px); } 80%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qeTag3 { 0%, 78% { opacity: 0; transform: translateY(5px); } 83%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes qeLead { 0%, 81% { opacity: 0; transform: scale(.6); } 87%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }

/* ---- bindings ---- */
.qe-tiles { animation: qeTiles var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qe-b1 { animation: qeBub1 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qe-b2 { animation: qeBub2 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qe-b3 { animation: qeBub3 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qe-fa { animation: qeFloatA 3.2s ease-in-out infinite; }
.qe-fb { animation: qeFloatB 3.8s ease-in-out infinite; }

.qe-flow { stroke-dasharray: 7 11; animation: qeDash 2.6s linear infinite, qeFlow var(--qla-dur) ease-in-out infinite; }
.qe-inbox { animation: qeInbox var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }

.qe-r1 { animation: qeRow1 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qe-r2 { animation: qeRow2 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qe-r3 { animation: qeRow3 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qe-r4 { animation: qeRow4 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }

.qe-n1 { animation: qeN1 var(--qla-dur) step-end infinite; }
.qe-n2 { animation: qeN2 var(--qla-dur) step-end infinite; }
.qe-n3 { animation: qeN3 var(--qla-dur) step-end infinite; }
.qe-n4 { animation: qeN4 var(--qla-dur) step-end infinite; }

.qe-k1 { animation: qeTick1 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qe-k2 { animation: qeTick2 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qe-k3 { animation: qeTick3 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }
.qe-k4 { animation: qeTick4 var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }

.qe-t1 { animation: qeTag1 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qe-t2 { animation: qeTag2 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qe-t3 { animation: qeTag3 var(--qla-dur) cubic-bezier(.22,1,.36,1) infinite; }
.qe-lead { animation: qeLead var(--qla-dur) cubic-bezier(.34,1.56,.64,1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .qyx-engage [class^="qe-"],
  .qyx-engage [class*=" qe-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .qyx-engage .qe-n1, .qyx-engage .qe-n2, .qyx-engage .qe-n3 { opacity: 0 !important; }
}