/* ═══════════════════════════════════════════════════════════════════════
   Lumnar Flow — animated ad engine (shared across all sizes)
   Light / lavender theme, faithful to the live flow editor.
   Layout coords + which beats play come from window.AD_CONFIG (per size).
   ═══════════════════════════════════════════════════════════════════════ */

.ad,
.ad * { margin: 0; padding: 0; box-sizing: border-box; }

.ad {
  /* ── brand / editor-faithful tokens ── */
  --accent:      #7c3aed;   /* editor light accent, shade 600 */
  --accent-700:  #6d28d9;
  --accent-200:  #ddd6fe;
  --accent-soft: #eeeafc;   /* branch-module fill */
  --accent-ink:  #3b2874;   /* branch-module text */
  --start:       #16a34a;   /* btn-start green */
  --flow:        #33ccff;   /* signature flow connector */
  --branchline:  #9f9fcb;
  --ink:    #1a1e2a;
  --ink-2:  #5a6275;
  --mute:   #8e95a5;
  --g1:     #3762ff;        /* brand gradient (logo) */
  --g2:     #ff2973;
  --tile:   #ffffff;
  --tile-bd:rgba(0,0,0,.08);
  --tile-bd2:rgba(0,0,0,.14);
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  position: relative;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  font-family: var(--sans);
  color: var(--ink);
  /* dotted editor canvas: white base + grey dots on a 16px grid */
  background-color: #ffffff;
  background-image: radial-gradient(#d9d9d9 1.1px, transparent 1.1px);
  background-size: 16px 16px;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* soft brand glows in the corners for depth (very subtle) */
.ad::before,
.ad::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 130%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .10;
  pointer-events: none;
  z-index: 0;
}
.ad::before { left: -16%;  top: -40%; background: var(--g1); }
.ad::after  { right: -16%; bottom: -40%; background: var(--g2); }

/* ── scenes: full-bleed layers that cross-fade ── */
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
  z-index: 1;
}
.scene.is-on { opacity: 1; visibility: visible; }

/* ═══════════════════════════════════════════════════════════════════════
   SCENE: BUILD  (flow canvas + headline + ai prompt)
   ═══════════════════════════════════════════════════════════════════════ */

.stage {
  position: absolute;
  inset: 0;
  transform-origin: var(--stage-ox, 62%) center;
  transform: scale(1);
  transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .6s ease;
}

.wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.wire {
  fill: none;
  stroke: var(--flow);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0;
}
.wire.is-draw { opacity: 1; }
/* once drawn, switch to the editor's morse-dash flow (dasharray set inline by JS) */
.wire.is-flow { animation: flowdash 1s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset: -26; } }

.node {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.node.is-on { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* module tile — .normal-module from the editor */
.node--mod {
  width: var(--node-size, 50px); height: var(--node-size, 50px);
  border-radius: 8px;
  background: var(--tile);
  border: 1px solid var(--tile-bd);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
}
.node--mod img { width: 62%; height: 62%; object-fit: contain; display: block; }

/* abstract / unnamed module glyph */
.node--mod .glyph {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--accent);
  position: relative;
  opacity: .7;
}
.node--mod .glyph::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* start node — .btn-start */
.node--start {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px 0 13px;
  border-radius: 8px;
  background: var(--start); color: #fff;
  font-family: var(--mono); font-weight: 600; font-size: 15px;
  letter-spacing: -.3px;
  box-shadow: 0 2px 8px rgba(22,163,74,.28);
}
.node--start .tri {
  width: 0; height: 0;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  opacity: .95;
}

/* node label under mcp + telegram */
.node__label {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: -.3px;
  color: var(--ink-2);
  white-space: nowrap;
}
.node--telegram.is-pop { animation: pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0%{transform:translate(-50%,-50%) scale(1);} 40%{transform:translate(-50%,-50%) scale(1.22);} 100%{transform:translate(-50%,-50%) scale(1);} }

/* sparkle burst on the telegram add */
.sparkle {
  position: absolute; z-index: 3;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}
.sparkle.is-on { animation: sparkle .7s ease-out forwards; }
.sparkle svg { width: 100%; height: 100%; }
@keyframes sparkle {
  0%   { transform: translate(-50%,-50%) scale(0)   rotate(0deg);   opacity: 0; }
  35%  { transform: translate(-50%,-50%) scale(1.1) rotate(35deg);  opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.6) rotate(70deg);  opacity: 0; }
}

/* headline (left block on wide formats) */
.hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.headline {
  position: absolute;
  left: var(--hl-x, 30px);
  top: var(--hl-y, 50%);
  width: var(--hl-w, 290px);
  transform: translateY(-50%);
}
.h1, .h2 {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.h1.is-on, .h2.is-on { opacity: 1; transform: translateY(0); }
.h1 {
  font-size: var(--h1-size, 25px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.6px;
  color: var(--ink);
}
.h2 {
  margin-top: 10px;
  font-size: var(--h2-size, 15px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-700);
}
.h1 .accent { color: var(--accent); }

/* AI prompt bar */
.promptbar {
  position: absolute; z-index: 4;
  left: 50%; bottom: var(--pb-bottom, 16px);
  transform: translateX(-50%) translateY(14px);
  width: var(--pb-w, 60%);
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  background: #fff;
  border: 1px solid var(--tile-bd);
  border-radius: 11px;
  box-shadow: 0 8px 24px rgba(24,28,42,.12);
  opacity: 0;
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.4,.64,1);
}
.promptbar.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.promptbar .ai-dot {
  flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.promptbar .ai-dot::after { content: "✦"; color: #fff; font-size: 11px; line-height: 1; }
.promptbar .ptext {
  font-family: var(--sans);
  font-size: var(--pb-size, 13.5px);
  color: var(--ink);
  white-space: nowrap; overflow: hidden;
}
.promptbar .caret {
  display: inline-block; width: 1.5px; height: 1.05em;
  background: var(--accent); margin-left: 1px;
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════════════
   SCENE: FORM  (front-end the flow powers + checkmark)
   ═══════════════════════════════════════════════════════════════════════ */
.scene--form { display: flex; align-items: center; justify-content: center; }
/* ghost of the built flow, receded behind the form */
.scene--form .flow-ghost {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--accent-200) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .5;
}
.form-card {
  position: relative; z-index: 2;
  width: var(--form-w, 320px);
  height: var(--form-h, 180px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tile-bd);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(24,28,42,.16);
  transform: translateY(14px) scale(.96);
  opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.4,.64,1);
}
.scene--form.is-on .form-card { opacity: 1; transform: translateY(0) scale(1); }
/* subtle "more below" fade at the card's bottom edge while it scrolls */
.form-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none; z-index: 1;
}
.fc-scroll { padding: 15px 18px; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.fc-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 11px; }
.fc-grouplabel { font-size: 11px; font-weight: 700; color: var(--ink-2); margin: 2px 0 9px; }
.fc-field {
  height: 32px; border-radius: 8px;
  border: 1px solid var(--tile-bd);
  background: #f7f7fb;
  margin-bottom: 10px;
  display: flex; align-items: center; padding: 0 10px;
  font-size: 11.5px; color: var(--mute);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fc-field--area { height: 46px; align-items: flex-start; padding-top: 9px; }
.fc-field.is-focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
  color: var(--ink);
}
.fc-check { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 12px; color: var(--ink); }
.fc-box {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--tile-bd2); background: #fff; position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.fc-check.is-checked .fc-box { background: var(--accent); border-color: var(--accent); }
.fc-check.is-checked .fc-box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fc-submit {
  height: 34px; border-radius: 8px;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 12.5px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s ease, transform .12s ease;
}
.fc-submit.is-press { filter: brightness(1.08); transform: scale(.98); }

/* fake cursor */
.cursor {
  position: absolute; z-index: 5;
  width: 18px; height: 18px;
  opacity: 0;
  transition: opacity .3s ease, left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1);
}
.cursor.is-on { opacity: 1; }
.cursor.is-click { animation: clickpulse .3s ease; }
@keyframes clickpulse { 50% { transform: scale(.8); } }
.cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }

/* success checkmark overlay */
.check {
  position: absolute; z-index: 6;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
}
.check.is-on { animation: checkpop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes checkpop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.check .ring {
  width: var(--check-sz, 64px); height: var(--check-sz, 64px);
  border-radius: 50%;
  background: var(--start);
  box-shadow: 0 10px 30px rgba(22,163,74,.35);
  display: flex; align-items: center; justify-content: center;
}
.check svg { width: 58%; height: 58%; }
.check .tick { stroke: #fff; stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; }
.check.is-on .tick { animation: draw .4s .12s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.form-caption {
  position: absolute; z-index: 4;
  left: 50%; bottom: var(--cap-bottom, 18px);
  transform: translateX(-50%);
  font-size: var(--cap-size, 14px); font-weight: 700;
  color: var(--ink);
  opacity: 0; transition: opacity .5s ease;
  white-space: nowrap;
}
.form-caption.is-on { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   SCENE: FEATURES
   ═══════════════════════════════════════════════════════════════════════ */
.scene--features { display: flex; align-items: center; justify-content: center; }
.features {
  display: flex; flex-wrap: wrap;
  gap: var(--feat-gap, 10px);
  align-items: stretch; justify-content: center;
  width: 92%;
}
.chip {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  background: #fff;
  border: 1px solid var(--tile-bd);
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(24,28,42,.07);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.5,.64,1);
}
.chip.is-on { opacity: 1; transform: translateY(0) scale(1); }
.chip img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.chip .clabel { font-size: var(--chip-size, 13px); font-weight: 600; color: var(--ink); white-space: nowrap; }
.chip--cherry {
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg, var(--g1), var(--g2)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 6px 20px rgba(124,58,237,.18);
}
.chip--cherry .clabel {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.chip--cherry .star {
  font-size: 16px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCENE: END CARD  (logo + line + infinite modcore strip + cta)
   ═══════════════════════════════════════════════════════════════════════ */
.scene--end { z-index: 3; }
.endcard { position: absolute; inset: 0; }
.brandblock {
  position: absolute; left: 50%; top: var(--brand-y, 30px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 11px;
  width: max-content; max-width: 96%; white-space: nowrap;
  opacity: 0;
  transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.4,.64,1);
}
.scene--end.is-on .brandblock { opacity: 1; }
.brandblock .logo { width: var(--logo-sz, 54px); height: var(--logo-sz, 54px); display: block; }
.brandblock .wordmark {
  font-weight: 800; font-size: var(--wm-size, 25px);
  letter-spacing: -.6px; color: var(--ink);
}
.brandblock .wordmark b {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kicker {
  position: absolute; left: 50%; top: var(--kick-y, 84px);
  transform: translateX(-50%);
  width: max-content; max-width: 90%;
  font-size: var(--kick-size, 12.5px); color: var(--ink-2); font-weight: 600;
  white-space: normal; line-height: 1.35; text-align: center;
  opacity: 0; transition: opacity .5s .15s ease;
}
.scene--end.is-on .kicker { opacity: 1; }
.cta-row {
  position: absolute; left: 50%; top: var(--cta-y, 110px);
  transform: translateX(-50%) translateY(8px);
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: 96%;
  opacity: 0;
  transition: opacity .5s .25s ease, transform .5s .25s cubic-bezier(.34, 1.5, .64, 1);
}
.scene--end.is-on .cta-row { opacity: 1; transform: translateX(-50%) translateY(0); }
.cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: var(--cta-size, 14px);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .32);
}
.cta .arrow { display: inline-block; transition: transform .25s ease; }
.price {
  font-size: var(--price-size, 12px); font-weight: 700;
  color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
/* stacked layout for tight banners — price sits as light text under the CTA */
.cta-row--stack { flex-direction: column; gap: 5px; }
.cta-row--stack .price { background: none; padding: 0; color: var(--ink-2); }
.endline {
  position: absolute; left: 6%; right: 6%;
  top: var(--line-y, 150px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--tile-bd2), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .6s .3s cubic-bezier(.4,0,.2,1);
}
.scene--end.is-on .endline { transform: scaleX(1); }

/* infinite modcore conveyor */
.strip {
  position: absolute; left: 0; right: 0;
  top: var(--strip-y, 166px);
  height: var(--strip-h, 70px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip__track {
  position: absolute; top: 50%; left: 0;
  display: flex; align-items: center;
  gap: var(--strip-gap, 14px);
  transform: translateY(-50%);
  will-change: transform;
}
.strip__item {
  flex: 0 0 auto;
  width: var(--strip-icon, 46px);
  height: var(--strip-icon, 46px);
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--tile-bd);
  box-shadow: 0 1px 4px rgba(24,28,42,.08);
  display: flex; align-items: center; justify-content: center;
}
.strip__item img {
  width: 60%; height: 60%; object-fit: contain; display: block;
}
/* elastic entrance applied by JS when an item is appended on the right */
.strip__item.enter { transform: translateX(40px) scale(.3); opacity: 0; }
.strip__item.settle {
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
  transform: translateX(0) scale(1); opacity: 1;
}
.strip__item.leave {
  transition: transform .45s ease, opacity .35s ease;
  transform: scale(.4); opacity: 0;
}