/* ─── project preview page ────────────────────────────────────────── */
/* nav anchors glide instead of teleporting — this stylesheet is loaded only
   on preview.html, so the demo pages keep their instant programmatic scrolls */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.preview {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 32px 40px;
}

/* everything except the demo card fades in after the card has landed */
.pv-fade { opacity: 0; transition: opacity 0.65s ease-out 0.35s; }
body.arrived .pv-fade { opacity: 1; }

/* ─── hero ────────────────────────────────────────────────────────── */
.pv-hero {
  display: grid;
  grid-template-columns: 1fr 384px;
  gap: 56px;
  align-items: center;
  padding: 36px 0 30px;
}
.pv-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 18px;
}
.pv-headline {
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.pv-headline .dim { color: var(--ink-dim); }
.pv-green { color: var(--green); }
.pv-sub {
  margin-top: 20px;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.6;
  max-width: 54ch;
}
.pv-facts {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-dim);
}
.pv-facts span {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ─── demo card: the shrunken demo, looping like a gif ────────────── */
.demo-card {
  width: 384px;
  background: var(--glass);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: var(--r);
  padding: 10px;
  box-shadow: 0 0 60px rgba(52, 211, 153, 0.12), 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  will-change: transform;
}
.demo-frame {
  width: 364px; height: 364px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg);
}
/* a full 1280px viewport scaled down: the pages inside play themselves in
   embed mode and loop forever; pointer-events off — it is a gif, not a UI */
.demo-frame iframe {
  width: 1280px; height: 1280px;
  transform: scale(0.284375);   /* 364 / 1280 */
  transform-origin: 0 0;
  border: 0;
  pointer-events: none;
}
.demo-card figcaption {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 6px 4px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-dim);
}
.demo-link {
  margin-left: auto;
  color: var(--green); text-decoration: none;
}
.demo-link:hover { text-decoration: underline; }

/* ─── sections ────────────────────────────────────────────────────── */
.pv-section { margin-top: 64px; }
.pv-h2 {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.step {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.35);
}
.step-num {
  font-family: var(--mono); font-size: 12px;
  color: var(--green);
}
.step h3 {
  margin-top: 10px;
  font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em;
}
.step p {
  margin-top: 8px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-dim);
}
.step em { color: var(--ink); font-style: normal; font-weight: 600; }
.mono-chip {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--green); background: rgba(52, 211, 153, 0.12);
  border-radius: 5px; padding: 1px 5px;
}

.hood {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.hood-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.35);
}
.hood-title {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}
.hood-code {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
}
.c-dim { color: var(--ink-faint); }
.c-green { color: var(--green); }
.hood-note {
  margin-top: 14px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-dim);
}

/* lead paragraph under a section title */
.pv-lead {
  margin: -8px 0 22px;
  max-width: 64ch;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ─── two kinds of AI ─────────────────────────────────────────────── */
.duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}
.duel-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 24px 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.35);
}
.duel-omni {
  border-color: rgba(52, 211, 153, 0.32);
  box-shadow: 0 0 48px rgba(52, 211, 153, 0.1),
              0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.35);
}
.duel-title {
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em;
}
.duel-store .duel-title { color: var(--ink-dim); }
.duel-omni .duel-title { color: var(--green); }
.duel-tag {
  margin-top: 4px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-faint);
}
.duel-list { margin-top: 16px; list-style: none; display: grid; gap: 10px; padding: 0; }
.duel-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-dim);
}
.duel-list li::before {
  content: "\2013";               /* – */
  position: absolute; left: 0;
  color: var(--ink-faint);
}
.duel-omni .duel-list li { color: var(--ink); }
.duel-omni .duel-list li::before { content: "+"; color: var(--green); }
.duel-vs {
  align-self: center;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-faint);
}
.duel-caption {
  margin-top: 20px;
  text-align: center;
  font-size: 15.5px; font-weight: 600;
  letter-spacing: -0.01em;
}

/* ─── memory ──────────────────────────────────────────────────────── */
.mem { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mem-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.35);
}
.mem-note {
  margin-top: 10px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-dim);
}
.mem-rows { margin-top: 16px; display: grid; gap: 8px; }
.mem-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  font-size: 13px;
}
.mem-k {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--green);
  padding-top: 1px;
}
.mem-v { color: var(--ink); line-height: 1.45; }
.wt { margin-top: 18px; display: grid; gap: 11px; }
.wt-row {
  display: grid;
  grid-template-columns: 148px 1fr 40px;
  align-items: center;
  gap: 12px;
  font-family: var(--mono); font-size: 12px;
}
.wt-k { color: var(--ink-dim); }
.wt-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.wt-bar i {
  display: block; height: 100%;
  width: 0;
  max-width: 100%;              /* the tuning overshoot must never spill out */
  background: var(--green);
  border-radius: 999px;
}
/* chaotic tuning: each bar hunts around its target asynchronously (own
   rhythm, duration and delay), then settles on var(--w) */
.wt.lit .wt-bar i { width: var(--w); animation: wt-tune-a 2.5s ease-in-out both; }
.wt.lit .wt-row:nth-child(2) .wt-bar i { animation: wt-tune-b 2.9s ease-in-out 0.15s both; }
.wt.lit .wt-row:nth-child(3) .wt-bar i { animation: wt-tune-b 2.2s ease-in-out 0.35s both; }
.wt.lit .wt-row:nth-child(4) .wt-bar i { animation: wt-tune-a 2.7s ease-in-out 0.5s both; }
.wt.lit .wt-row:nth-child(5) .wt-bar i { animation: wt-tune-b 2.4s ease-in-out 0.25s both; }
.wt.lit .wt-row:nth-child(6) .wt-bar i { animation: wt-tune-a 3s ease-in-out 0.6s both; }
@keyframes wt-tune-a {
  0%   { width: 0; }
  16%  { width: calc(var(--w) * 1.35); }
  34%  { width: calc(var(--w) * 0.5); }
  52%  { width: calc(var(--w) * 1.12); }
  70%  { width: calc(var(--w) * 0.78); }
  86%  { width: calc(var(--w) * 1.05); }
  100% { width: var(--w); }
}
@keyframes wt-tune-b {
  0%   { width: 0; }
  14%  { width: calc(var(--w) * 0.55); }
  30%  { width: calc(var(--w) * 1.45); }
  48%  { width: calc(var(--w) * 0.7); }
  66%  { width: calc(var(--w) * 1.18); }
  84%  { width: calc(var(--w) * 0.92); }
  100% { width: var(--w); }
}
@media (prefers-reduced-motion: reduce) {
  /* :nth-child(n) matches every row at the same specificity as the
     per-row rules above — one selector switches the whole family off */
  .wt.lit .wt-bar i,
  .wt.lit .wt-row:nth-child(n) .wt-bar i { animation: none; }
}
.wt-v { color: var(--ink); text-align: right; }
.wt-cats {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.6;
  color: var(--ink-dim);
}
.mem-hard {
  margin-top: 14px;
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.5px; color: var(--ink-dim);
}
.hard-chip {
  flex: none;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ─── taste vector ────────────────────────────────────────────────── */
.taste { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.taste-new {
  border-color: rgba(52, 211, 153, 0.32);
  box-shadow: 0 0 48px rgba(52, 211, 153, 0.1),
              0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.35);
}
.taste .hood-code { margin-top: 14px; font-size: 11.5px; }
.ancestry { margin-top: 14px; }
.ancestry .wt { max-width: 560px; }
.taste-slogan {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink);
}

/* ─── stack ───────────────────────────────────────────────────────── */
.stack-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stack-chip {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-dim);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── contact ─────────────────────────────────────────────────────── */
.contact { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-chip {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 13px;
  color: var(--ink); text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.contact-k {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
a.contact-chip:hover {
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--green);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.15);
}
/* plain, selectable text under the chip — a tap target is not always a
   copy target, so the address is repeated as ordinary text */
.contact-plain {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  user-select: all;
}

/* ─── pipeline ────────────────────────────────────────────────────── */
.pipe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pipe-step {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
}
.pipe-num {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--green);
}
.pipe-step h3 {
  margin-top: 10px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em;
}
.pipe-step p {
  margin-top: 8px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--ink-dim);
}
.pipe-step p { margin-bottom: 14px; }
.pipe-step .hood-code {
  margin-top: auto;          /* pin to card bottom so the row lines up */
  font-size: 11px;
  line-height: 1.7;
  padding: 12px 13px;
}
.pipe-note {
  margin-top: 18px;
  max-width: 72ch;
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-dim);
}

/* ─── scroll reveal ───────────────────────────────────────────────── */
/* translate only — never scale (same rule as .anim in style.css: scaling
   re-rasterises text and pops). Big blocks drop in from above; the HOW IT
   WORKS steps fly in from the top-left, staggered left to right. */
/* the base state carries a short exit transition: when the observer re-arms
   an element (scrolled almost out), its last visible sliver slides up and
   fades at the screen edge — that's the leave animation */
.pv-anim {
  opacity: 0;
  transform: translateY(-34px);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}
.pv-anim.pv-diag { transform: translate(-44px, -28px); }
.pv-anim.in {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.pv-anim.pv-d1.in { transition-delay: 0.12s; }
.pv-anim.pv-d2.in { transition-delay: 0.24s; }
.pv-anim.pv-d3.in { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .pv-anim, .pv-anim.pv-diag { opacity: 1; transform: none; transition: none; }
}

/* ─── responsive ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .pv-hero { grid-template-columns: 1fr; }
  .demo-card { margin: 0 auto; }
  .steps { grid-template-columns: 1fr 1fr; }
  .hood { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: 1fr 1fr; }
  .mem { grid-template-columns: 1fr; }
  .taste { grid-template-columns: 1fr; }
  .duel { grid-template-columns: 1fr; }
  .duel-vs { justify-self: center; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: 1fr; }
  .demo-card { width: 100%; max-width: 384px; }
  .wt-row { grid-template-columns: 124px 1fr 40px; }
  .mem-hard { flex-direction: column; gap: 8px; }
}