/* KAZUVA · preview.css · builder controls + the phone preview. */

/* ── Builder controls ─────────────────────────────────────────────────── */
.kzb-field { display: grid; gap: 0.45rem; }
.kzb-field label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.kzb-input {
  width: 100%; min-height: 56px; padding: 0.85rem 1.15rem;
  border: 0; border-radius: 16px;
  background: var(--raised); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--edge-strong);
  font: 500 1.0625rem/1.2 var(--body);
}
.kzb-input::placeholder { color: var(--ink-mute); font-weight: 400; }
.kzb-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent), var(--glow); }
.kzb-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.kzb-chip {
  min-height: 44px; padding: 0 1rem; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-dim); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--edge-strong);
  font: 500 0.9375rem/1 var(--body);
}
.kzb-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--pop); }
.kzb-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.kzb-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kzb-swatch {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px; padding: 0 1rem 0 0.4rem; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-dim); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--edge-strong); font: 500 0.875rem/1 var(--body);
}
.kzb-swatch::before {
  content: ""; width: 32px; height: 32px; border-radius: 999px; flex: none;
  background: linear-gradient(135deg, var(--a) 0 55%, var(--b) 55% 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.kzb-swatch[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.kzb-note { font-size: var(--fs-xs); color: var(--ink-mute); }

/* ── The phone ────────────────────────────────────────────────────────── */
.pv-phone {
  position: relative;
  width: clamp(236px, 66vw, 300px);
  aspect-ratio: 9 / 18.6;
  margin-inline: auto;
  padding: 9px;
  border-radius: 40px;
  background: #0b0418;
  box-shadow:
    inset 0 0 0 1px rgb(247 247 248 / 0.14),
    0 30px 60px -24px rgb(18 7 39 / 0.55),
    0 0 0 1px rgb(18 7 39 / 0.08);
}
.pv-phone::before { /* the speaker notch */
  content: ""; position: absolute; z-index: 3; top: 15px; left: 50%;
  width: 64px; height: 16px; margin-left: -32px;
  border-radius: 999px; background: #0b0418;
}
.pv {
  --pv-bg: #fefdff; --pv-ink: #120727; --pv-accent: #7747f7;
  container-type: inline-size;
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; gap: 5cqw;
  padding: 13cqw 5cqw 5cqw;
  border-radius: 32px;
  background: var(--pv-bg); color: var(--pv-ink);
  font-family: var(--body);
  transition: background-color 0.35s var(--ease-fade), color 0.35s var(--ease-fade);
}
.pv-bar { display: flex; align-items: center; gap: 2.6cqw; }
.pv-logo {
  display: grid; place-items: center; flex: none;
  width: 8.5cqw; height: 8.5cqw; border-radius: 2.4cqw;
  background: var(--pv-accent); color: var(--pv-bg);
  font: 400 5cqw/1 var(--display);
  transition: background-color 0.35s var(--ease-fade);
}
.pv-name { font: 600 4.6cqw/1.1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv-menu { margin-left: auto; display: grid; gap: 1.2cqw; width: 6cqw; }
.pv-menu i { height: 0.9cqw; border-radius: 1cqw; background: currentColor; opacity: 0.7; }
.pv-hero { position: relative; display: grid; gap: 2.8cqw; }
.pv-art {
  height: 46cqw; border-radius: 4.5cqw;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
  transition: background 0.35s var(--ease-fade);
}
.pv-kick { font: 500 3.3cqw/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.pv-h { font: 400 8.4cqw/1.04 var(--display); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.pv-cta {
  justify-self: start; padding: 2.8cqw 5cqw; border-radius: 999px;
  background: var(--pv-accent); color: var(--pv-bg);
  font: 600 3.9cqw/1 var(--body);
  transition: background-color 0.35s var(--ease-fade);
}
.pv-svc { display: grid; gap: 2cqw; }
.pv-svc li {
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 2.8cqw 3.2cqw; border-radius: 3.6cqw;
  background: color-mix(in srgb, var(--pv-ink) 6%, transparent);
  font-size: 3.9cqw;
}
.pv-svc b { font-weight: 600; }
.pv-ico { width: 4.4cqw; height: 4.4cqw; border-radius: 1.4cqw; background: var(--pv-accent); opacity: 0.85; flex: none; }
.pv-trust { font-size: 3.6cqw; opacity: 0.75; }
.pv-trust::before { content: "\2605"; margin-right: 1.6cqw; color: var(--pv-accent); }
.pv-more { display: grid; gap: 2cqw; }
.pv-more i { height: 2.4cqw; border-radius: 2cqw; background: currentColor; opacity: 0.1; }
.pv-more i:nth-child(2) { width: 80%; }
.pv-more i:nth-child(3) { width: 60%; }
.pv-wa {
  position: absolute; right: 4.5cqw; bottom: 4.5cqw;
  width: 11cqw; height: 11cqw; border-radius: 999px;
  background: #1f9e55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Z'/%3E%3C/svg%3E") center / 55% no-repeat;
  box-shadow: 0 2cqw 5cqw rgb(0 0 0 / 0.25);
}

/* Full tier: the mini site assembles block by block. Calm: shown at once. */
html[data-motion="full"] .pv .pv-block,
html[data-motion="full"] .pv .pv-wa {
  opacity: 0; translate: 0 5cqw; scale: 0.97;
  transition:
    opacity 0.45s var(--ease-fade),
    translate 0.75s var(--spring),
    scale 0.75s var(--spring);
  transition-delay: calc(var(--i, 0) * 85ms);
}
html[data-motion="full"] .pv.is-built .pv-block,
html[data-motion="full"] .pv.is-built .pv-wa { opacity: 1; translate: 0 0; scale: 1; }

/* Full tier: the phone tilts toward the pointer (set by home.js). */
html[data-motion="full"] .pv-phone { transition: rotate 0.6s var(--glide), transform 0.6s var(--glide); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* Soft lock (used on /start/): everything below the hero fades under a veil. */
.pv-locked .pv-svc, .pv-locked .pv-trust, .pv-locked .pv-more { filter: blur(3px); opacity: 0.55; }