/* ════════════════════════════════════════════════════════════════════════
   ANIMATED BUILDER DEMO WIDGET (hero)
   Adapted from the portable Demo Widget: site fonts + brand colors, local
   copyright-free images in /images/. All classes prefixed .dw-.
   ════════════════════════════════════════════════════════════════════════ */
.dw-demo {
  --dw-bg: #fbfaf8;
  --dw-surface: #ffffff;
  --dw-ink: #0e0f13;
  --dw-ink-soft: #2b2d34;
  --dw-muted: #6b6e76;
  --dw-faint: #9a9ca3;
  --dw-line: #eceae4;
  --dw-line-strong: #dedcd4;
  --dw-accent: var(--brand, #0e7a6c);
  --dw-go: #18c964;
  --dw-font: var(--font, system-ui, sans-serif);
  --dw-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  width: min(560px, 100%);
  background: var(--dw-surface);
  border: 1px solid var(--dw-line);
  border-radius: 24px;
  box-shadow: 0 12px 40px -8px rgba(14, 15, 19, 0.18), 0 32px 80px -20px rgba(14, 122, 108, 0.22);
  overflow: hidden;
  font-family: var(--dw-font);
}
.dw-demo *, .dw-demo *::before, .dw-demo *::after { box-sizing: border-box; }

/* ── browser bar ── */
.dw-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--dw-line); background: #fff; }
.dw-dots { display: flex; gap: 7px; }
.dw-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--dw-line-strong); }
.dw-dots span:nth-child(1) { background: #ff6058; }
.dw-dots span:nth-child(2) { background: #ffbd2e; }
.dw-dots span:nth-child(3) { background: #28ca42; }
.dw-url { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--dw-bg); border: 1px solid var(--dw-line); border-radius: 100px; padding: 8px 16px; font-family: var(--dw-font-mono); font-size: 12.5px; color: var(--dw-ink-soft); min-width: 0; }
.dw-url .dw-lock { color: var(--dw-faint); flex-shrink: 0; }
.dw-url .dw-urltext { white-space: nowrap; overflow: hidden; }
.dw-caret { display: inline-block; width: 2px; height: 15px; background: var(--dw-accent); animation: dw-blink 1s step-end infinite; flex-shrink: 0; }
@keyframes dw-blink { 50% { opacity: 0; } }

.dw-stage { position: relative; height: 440px; overflow: hidden; background: var(--dw-bg); }
.dw-phase { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.dw-phase.dw-active { opacity: 1; pointer-events: auto; }

/* ── phase 1: scanning ── */
.dw-scan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px; }
.dw-gcard { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--dw-line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(14, 15, 19, 0.04), 0 2px 8px rgba(14, 15, 19, 0.04); }
.dw-gphoto { height: 120px; position: relative; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)), url("/images/cafe-storefront.jpg") center/cover no-repeat; }
.dw-gpin { position: absolute; left: 50%; top: 46%; width: 30px; height: 30px; background: var(--dw-accent); border-radius: 50% 50% 50% 2px; transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 6px 16px rgba(14, 122, 108, 0.4); }
.dw-gbody { padding: 16px 18px; }
.dw-gbody .dw-nm { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.dw-gbody .dw-meta { font-size: 13px; color: var(--dw-muted); margin-top: 3px; }
.dw-stars { color: #ffb300; font-size: 13px; letter-spacing: 1px; }
.dw-status { display: flex; align-items: center; gap: 12px; font-family: var(--dw-font-mono); font-size: 13px; color: var(--dw-accent); font-weight: 500; }
.dw-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #e0efec; border-top-color: var(--dw-accent); animation: dw-spin 0.7s linear infinite; }
@keyframes dw-spin { to { transform: rotate(360deg); } }
.dw-checks { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 380px; }
.dw-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dw-muted); opacity: 0.3; transition: opacity 0.3s, color 0.3s; }
.dw-check.dw-done { opacity: 1; color: var(--dw-ink-soft); }
.dw-check .dw-tick { width: 18px; height: 18px; border-radius: 50%; background: var(--dw-line); color: transparent; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; transition: background 0.3s, color 0.3s; }
.dw-check.dw-done .dw-tick { background: var(--dw-go); color: #fff; }

/* ── phase 2: generated page ── */
.dw-gen { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.dw-genhero { height: 188px; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(14, 15, 19, 0.05) 30%, rgba(14, 15, 19, 0.68) 100%), url("/images/cafe-hero.jpg") center/cover no-repeat; display: flex; align-items: flex-end; padding: 20px 22px; color: #fff; }
.dw-badge { position: absolute; top: 16px; right: 18px; font-family: var(--dw-font-mono); font-size: 10px; letter-spacing: 0.1em; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 100px; text-transform: uppercase; }
.dw-genhero .dw-htext { position: relative; z-index: 2; }
.dw-genhero .dw-nm { font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.dw-genhero .dw-sub { font-size: 13px; opacity: 0.9; margin-top: 2px; }
.dw-geninfo { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--dw-line); }
.dw-geninfo > div { padding: 14px 16px; border-right: 1px solid var(--dw-line); }
.dw-geninfo > div:last-child { border-right: none; }
.dw-geninfo .dw-k { font-family: var(--dw-font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--dw-faint); text-transform: uppercase; }
.dw-geninfo .dw-v { font-size: 13px; font-weight: 600; margin-top: 4px; color: var(--dw-ink); }
.dw-genbody { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.dw-line { height: 9px; border-radius: 5px; background: var(--dw-line); }
.dw-line.dw-w1 { width: 80%; }
.dw-line.dw-w2 { width: 95%; }
.dw-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.dw-gallery .dw-g { height: 52px; border-radius: 8px; background-size: cover; background-position: center; }
.dw-gallery .dw-g1 { background-image: url("/images/cafe-g1.jpg"); }
.dw-gallery .dw-g2 { background-image: url("/images/cafe-g2.jpg"); }
.dw-gallery .dw-g3 { background-image: url("/images/cafe-g3.jpg"); }
.dw-ctarow { display: flex; gap: 10px; margin-top: 6px; }
.dw-gbtn { font-size: 12px; font-weight: 600; padding: 9px 16px; border-radius: 100px; }
.dw-gbtn.dw-p { background: var(--dw-accent); color: #fff; }
.dw-gbtn.dw-s { background: var(--dw-bg); color: var(--dw-ink); border: 1px solid var(--dw-line); }

.dw-flag { position: absolute; top: 14px; left: 18px; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--dw-go); color: #fff; font-family: var(--dw-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; padding: 7px 13px; border-radius: 100px; box-shadow: 0 6px 16px rgba(24, 201, 100, 0.4); transform: translateY(-8px); opacity: 0; transition: all 0.4s ease; }
.dw-gen.dw-active .dw-flag { transform: translateY(0); opacity: 1; }
.dw-timer { position: absolute; bottom: 14px; right: 16px; z-index: 6; font-family: var(--dw-font-mono); font-size: 12px; font-weight: 500; background: var(--dw-ink); color: #fff; padding: 7px 13px; border-radius: 100px; display: flex; align-items: center; gap: 7px; }
.dw-timer .dw-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--dw-go); box-shadow: 0 0 8px var(--dw-go); }