/* YunHai landing — Demo 01 rebuilt: profile builder → live signal
 * Faithful to the real Profile Wizard + activity card. Two cross-fading scenes.
 */

/* taller frame for this demo */
.demo--profile { position: relative; }
.pf {
  position: relative;
  height: 568px;
  overflow: hidden;
}
.pf__scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 460ms var(--ease-out);
}
.pf__scene.is-active { opacity: 1; visibility: visible; }

/* ============ SCENE 1 · PROFILE BUILDER ============ */
.pf__qs {
  flex: 1 1 auto;
  padding: 17px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 0;
  overflow: hidden;
}
.pfq {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.pfq.in { opacity: 1; transform: none; }
.pfq__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-900);
  letter-spacing: -0.01em;
  margin-bottom: 9px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pfq__n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex: none;
}
.pfq__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pfpill {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-500);
  background: var(--paper-0);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pfpill.picked {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-color: rgba(47,125,251,.4);
  transform: translateY(-1px);
}

.pfq__field {
  background: var(--paper-0);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 10px 13px;
  min-height: 40px;
  font-size: 13px;
  color: var(--text-900);
  line-height: 1.45;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.pfq.is-active .pfq__field { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,125,251,.12); }
.pfq__typed { white-space: pre-wrap; }
.pfq__typed:empty::before { content: ''; }
.pfq__caret {
  display: none;
  width: 1.5px;
  height: 15px;
  background: var(--accent);
  margin-left: 1px;
  vertical-align: middle;
  animation: pf-blink 1s steps(1) infinite;
}
.pfq.is-typing .pfq__caret { display: inline-block; }
@keyframes pf-blink { 50% { opacity: 0; } }

/* AI summary — navy "generated" panel (≈30%) */
.pf__summary {
  flex: none;
  height: 168px;
  background: var(--ink-900);
  color: var(--paper-0);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(244,241,236,.08);
}
.pf__summary-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7FB0FF;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.pf__summary-head .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(47,125,251,.8);
  animation: gm-pulse 1.4s infinite;
}
.pf__summary-head.done { color: #6EDB96; }
.pf__summary-head.done .dot { background: #6EDB96; box-shadow: 0 0 8px rgba(110,219,150,.7); animation: none; }
.pf__summary-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(244,241,236,.92);
  letter-spacing: -0.005em;
  margin: 0;
}
.pf__summary-body .scaret {
  display: none;
  width: 2px; height: 15px;
  background: #7FB0FF;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: pf-blink 1s steps(1) infinite;
}
.pf__summary.typing .scaret { display: inline-block; }
.pf__summary-body .serif { font-family: var(--font-display); font-style: italic; }

/* ============ SCENE 2 · ACTIVITY + SIGNAL ============ */
.pf__use {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 0;
  min-height: 0;
}
.pf__use > * { min-width: 0; min-height: 0; }

/* --- activity card (matches the real review card) --- */
.acard2 {
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-1);
}
.acard2__media {
  position: relative;
  height: 118px;
  flex: none;
  background:
    radial-gradient(120% 100% at 50% 0%, #20324C 0%, #16243B 55%, #0E1A2C 100%);
  overflow: hidden;
}
.acard2__media::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,241,236,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,236,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, #000 40%, transparent 100%);
}
.acard2__media .ph-label {
  position: absolute;
  left: 12px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,241,236,.6);
  white-space: nowrap;
  z-index: 1;
}
.acard2__approved {
  position: absolute;
  top: 10px; left: 10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(31,157,85,.4);
  z-index: 1;
}
.acard2__body {
  padding: 13px 15px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-height: 0;
}
.acard2__tags { display: flex; gap: 7px; }
.tagpill2 {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-500);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.acard2__title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-900);
  margin: 1px 0 0;
}
.acard2__city { font-size: 12px; color: var(--text-700); }
.acard2__city strong, .acard2__why strong, .acard2__book strong { color: var(--text-900); font-weight: 600; }
.acard2__why, .acard2__book {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-700);
  margin: 0;
}
.acard2__why [data-why] { transition: opacity var(--dur-med) var(--ease-out); }
.acard2__tip {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-700);
  background: var(--accent-soft);
  border: 1px solid rgba(47,125,251,.18);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.acard2__tip-key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--accent-deep); margin-right: 4px; }
.acard2__updated {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid rgba(47,125,251,.25);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.acard2__updated.in { opacity: 1; transform: none; }
.acard2__actions { display: flex; gap: 8px; margin-top: 10px; }
.acard2__actions .gm-btn { flex: 1; justify-content: center; }

/* --- signal panel --- */
.pf__signal {
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: var(--paper-0);
}
.pf__signal-head {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-900);
}
.pf__signal-head .serif { font-family: var(--font-display); font-style: italic; }
.pf__signal-sub { font-size: 12px; line-height: 1.5; color: var(--text-500); margin: 0; }

.pf__signal-input {
  position: relative;
  background: var(--paper-1);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  padding: 11px 42px 11px 13px;
  min-height: 64px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-900);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pf__signal-input.is-typing { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,125,251,.12); }
.pf__signal-typed { white-space: pre-wrap; }
.pf__signal-caret {
  display: none;
  width: 1.5px; height: 15px;
  background: var(--accent);
  margin-left: 1px;
  vertical-align: middle;
  animation: pf-blink 1s steps(1) infinite;
}
.pf__signal-input.is-typing .pf__signal-caret { display: inline-block; }
.pf__signal-send {
  position: absolute;
  right: 8px; bottom: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.pf__signal-send svg { width: 14px; height: 14px; }
.pf__signal-send.pulse { animation: pf-send 420ms var(--ease-out); }
@keyframes pf-send { 40% { transform: scale(.86); } 100% { transform: scale(1); } }

.pf__signal-status, .pf__signal-saved {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  display: none;
  align-items: center;
  gap: 8px;
}
.pf__signal-status.in, .pf__signal-saved.in { display: inline-flex; }
.pf__signal-status { color: var(--text-500); }
.pf__signal-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(47,125,251,.7); animation: gm-pulse 1.2s infinite; }
.pf__signal-saved { color: var(--ok); }
.pf__signal-saved .ck {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}

.pf__learned { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); }
.pf__learned-head {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-400);
  margin-bottom: 9px;
}
.pf__learned-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lchip {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-700);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
.lchip--new {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-color: rgba(47,125,251,.35);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.lchip--new.in { opacity: 1; transform: none; }
.lchip--new::before { content: '+ '; color: var(--accent); }

@media (max-width: 560px) {
  .pf { height: auto; }
  .pf__scene { position: relative; }
  .pf__scene:not(.is-active) { display: none; }
  .pf__use { grid-template-columns: 1fr; }
  .acard2 { border-right: 0; border-bottom: 1px solid var(--hair); }
}