/* ============================================================
   AlphaBack — home page
   ------------------------------------------------------------
   Loaded after tokens.css and shell.css by index.html only.
   Everything here is specific to the landing page; anything a
   second page would want belongs in shell.css instead.

   Responsive @media blocks live at the END of this file.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */

.hero { padding-bottom: var(--section-y); }
.hero-head { max-width: 820px; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero-note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-2); color: var(--t3);
}

/* ════════════════════════════════════════════════════════════
   THE DEMO

   A glass slab that plays the product back. It is deliberately
   the widest element on the page — it is the argument.
   ════════════════════════════════════════════════════════════ */

.demo {
  margin-top: var(--sp-8);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.demo-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bdr);
  background: rgba(255,255,255,0.02);
}
.demo-dot {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.14);
}
.demo-dot:nth-child(2) { background: rgba(255,255,255,0.10); }
.demo-dot:nth-child(3) { background: rgba(255,255,255,0.07); }
.demo-bar-title {
  margin-left: var(--sp-3);
  font-size: var(--fs-1); color: var(--t3); letter-spacing: 0.02em;
}

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.demo-left  { padding: var(--sp-6); border-right: 1px solid var(--bdr); }
.demo-right { padding: var(--sp-6); display: flex; flex-direction: column; }

.demo-label {
  font-size: var(--fs-1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-3);
}
.demo-label + * { margin-top: 0; }
.demo-steps + .demo-label,
.demo-prompt + .demo-label { margin-top: var(--sp-6); }

.demo-prompt {
  margin: 0;
  font-size: var(--fs-4); line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--text);
  min-height: 3.2em;                 /* holds its box while typing */
}
.demo-caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--accent);
  animation: demoBlink 1.05s steps(1) infinite;
}
.demo.is-done .demo-caret { animation: none; opacity: 0; }
@keyframes demoBlink { 50% { opacity: 0; } }

/* Steps tick over one at a time; JS adds .on. */
.demo-steps { list-style: none; margin: 0; padding: 0; }
.demo-steps li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-2); color: var(--t3);
  opacity: 0.34;
  transition: opacity var(--dur) ease, color var(--dur) ease;
}
.demo-steps li.on { opacity: 1; color: var(--t2); }
.demo-tick {
  position: relative; flex-shrink: 0;
  width: 15px; height: 15px; border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px var(--bdr2);
  transition: background var(--dur) ease, box-shadow var(--dur) ease;
}
.demo-steps li.on .demo-tick {
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Checkmark drawn in CSS — one fewer inline SVG per row. */
.demo-steps li.on .demo-tick::after {
  content: '';
  position: absolute; left: 4px; top: 3px;
  width: 5px; height: 8px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(40deg);
}

.demo-code {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.34);
  box-shadow: inset 0 0 0 1px var(--bdr);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--fs-2); line-height: 1.62;
  color: var(--t2);
  white-space: pre; overflow: hidden;
  min-height: 7.5em;
}
.demo-code .k  { color: var(--accent); }
.demo-code .s  { color: #9fd6b6; }
.demo-code .c  { color: var(--t4); }
.demo-code .n  { color: #d8c79a; }

/* The result half resolves rather than appearing. Holding it at opacity 0
   until the run finishes leaves half the slab visibly empty for the first
   few seconds, which reads as a broken layout; a blurred, dim version keeps
   the composition whole and makes the payoff feel like focus pulling in. */
.demo-right {
  opacity: 0.14; filter: blur(7px);
  transition: opacity 0.55s var(--ease-out), filter 0.55s var(--ease-out);
}
.demo.is-run .demo-right { opacity: 1; filter: none; }
html.lite .demo-right,
:root[data-motion="off"] .demo-right { opacity: 1; filter: none; }

.demo-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  background: var(--bdr);
  border-radius: var(--r-md);
  overflow: hidden;
}
.demo-metric {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  background: rgba(10,10,12,0.55);
}
.demo-metric-lbl {
  font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t3);
}
.demo-metric-val {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-5); font-weight: 800; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* Grows to match the code block opposite it. preserveAspectRatio="none" on
   the SVG means the curve simply stretches rather than letterboxing, so the
   two halves of the slab stay the same height whatever the code length. */
.demo-chart { width: 100%; flex: 1 1 auto; min-height: 150px; margin-top: var(--sp-5); }
.demo-grid-line { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.demo-line {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  /* Set by home.js from the real path length, then animated to 0. */
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
}
.demo.is-run .demo-line {
  transition: stroke-dashoffset 1.5s var(--ease-out);
  stroke-dashoffset: 0;
}
.demo-area { opacity: 0; transition: opacity 0.8s var(--ease-out) 0.7s; }
.demo.is-run .demo-area { opacity: 1; }
html.lite .demo-line, :root[data-motion="off"] .demo-line { stroke-dashoffset: 0; }
html.lite .demo-area, :root[data-motion="off"] .demo-area { opacity: 1; }

.demo-foot {
  margin-top: auto; padding-top: var(--sp-5);
  font-size: var(--fs-1); color: var(--t3);
}

/* ════════════════════════════════════════════════════════════
   FACTS STRIP
   ════════════════════════════════════════════════════════════ */

.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--bdr);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fact {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6);
  background: rgba(255,255,255,0.022);
  -webkit-backdrop-filter: var(--glass-2);
  backdrop-filter: var(--glass-2);
}
.fact-num {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-6); font-weight: 800; letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fact-unit { font-size: var(--fs-4); color: var(--t3); margin-left: 3px; letter-spacing: -0.02em; }
.fact-lbl {
  font-size: var(--fs-1); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--t3); line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   STEPS
   ════════════════════════════════════════════════════════════ */

.steps {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--sp-7) var(--sp-6);
}
.step { position: relative; padding-top: var(--sp-5); }
/* Hairline above each step, fading right — reads as a spec sheet rather
   than a card grid, which the features section already covers. */
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--bdr2), transparent);
}
.step-num {
  display: block;
  font-size: var(--fs-1); letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.step .h4 { margin-bottom: var(--sp-3); }
.step .card-body { margin: 0; }

.mono-inline {
  font-family: 'DM Mono', monospace;
  font-size: 0.92em;
  padding: 1px 5px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px var(--bdr);
  color: var(--text);
}

.section-more { margin: var(--sp-8) 0 0; font-size: var(--fs-2); }
.is-center + .grid + .section-more { text-align: center; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — must stay last
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .demo-grid { grid-template-columns: minmax(0,1fr); }
  .demo-left { border-right: 0; border-bottom: 1px solid var(--bdr); }
  .steps { grid-template-columns: minmax(0,1fr); gap: var(--sp-6); }
  .facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .demo { margin-top: var(--sp-7); }
  .demo-left, .demo-right { padding: var(--sp-5); }
  .demo-prompt { font-size: var(--fs-3); }
  .demo-metrics { grid-template-columns: minmax(0,1fr); }
  .demo-metric-val { font-size: var(--fs-4); }
  .hero-actions .btn { width: 100%; }
  .fact { padding: var(--sp-5); }
}