/* Home hero — three open documents → thin scan → extracted values + flags ——
   Layouts traced from real documents (user's E Sign Test Docs): an ACORD 125
   (italic wordmark, centered caps title, corner-labelled boxed cells, X'd
   lines of business, form footer), a carrier quote (logo row, "quote only"
   disclaimer, ruled sections, right-aligned total), and expiring declarations
   (policy №/date header, chunky logotype, underlined title, bordered coverage
   table, EXPIRING stamp). Every string is fictional — the layout is the
   realism. The three documents stay OPEN side by side the whole loop; one
   thin line of orange hue scans the spread (clipped to it); the panel below
   reveals Extracted values top-to-bottom, then the rotating flags, Disclose
   last in red. Markup in index.html · sequencer in hero-demos.js.
   Paper palette is fixed on purpose (physical objects); all else tokens. */

.hx-stage {
  position: relative; width: 100%; min-height: 560px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 22px;
  font-family: var(--mono); color: var(--fg);
  transition: opacity 500ms ease;
}
#hx-scan.out { opacity: 0; }

/* ————— the open spread ————— */
.hx-docs {
  --paper: #fdfcf8;
  --paper-ink: #26221b;
  --paper-dim: #8a8375;
  --paper-faint: #a29b8d;
  --paper-line: rgba(23, 21, 15, 0.22);
  --doc-blue: #2f4f95;
  --doc-blue-ink: #1c2f56;
  --doc-orange: #e8762d;
  --doc-red: #a04848;
  position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  gap: 12px;
}
.hx-doc {
  position: relative; flex: 1 1 0; max-width: 178px;
  /* locked: true A4 proportion (210×297); content is dense on purpose —
     it reads as a cluttered real form, not meant to be legible */
  aspect-ratio: 210 / 297;
  overflow: hidden;
  padding: 9px;
  background: var(--paper); color: var(--paper-ink);
  font-family: var(--sans);
  border-radius: 4px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
  display: flex; flex-direction: column; gap: 4px;
  /* entrance: the packet arrives as one centered pile (--px pulls the outer
     cards to the middle), opens into the spread on .fan */
  --px: 0px; --py: 16px; --sc: 0.97;
  opacity: 0;
  transform: translate(var(--px), var(--py)) scale(var(--sc));
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1), rotate 700ms cubic-bezier(0.4, 0, 0.2, 1), opacity 420ms ease;
}
/* order (user 2026-07-06): expiring → application → quote = the broker's workflow */
.hx-doc-policy { --px: 174px;  rotate: 2.2deg;  z-index: 1; }
.hx-doc-acord  { --px: 0px;    rotate: -1.6deg; z-index: 2; margin: 0 -16px; transition-delay: 90ms; }
.hx-doc-quote  { --px: -174px; rotate: 0.8deg;  z-index: 3; transition-delay: 180ms; }
/* pile: rise in place, stacked and slightly askew */
#hx-scan.pile .hx-doc { opacity: 1; --py: 0px; --sc: 1; }
/* fan: the packet opens — cards travel together (no stagger), outer ones sit
   a touch higher than the center: papers laid on a desk, not a UI grid */
#hx-scan.fan .hx-doc { opacity: 1; --py: 0px; --sc: 1; transition-delay: 0ms; }
#hx-scan.fan .hx-doc-policy { --px: 0px; --py: -4px; rotate: -1.4deg; }
#hx-scan.fan .hx-doc-acord  { --px: 0px; --py: 5px;  rotate: 0deg; }
#hx-scan.fan .hx-doc-quote  { --px: 0px; --py: -4px; rotate: 1.4deg; }
/* loop restart: reset happens with transitions off, so the next pass starts
   clean from the pile entrance instead of half-animating back (was buggy) */
#hx-scan.snap, #hx-scan.snap .hx-doc, #hx-scan.snap .hx-scanline,
#hx-scan.snap .hx-val, #hx-scan.snap .hx-find {
  transition: none !important;
}

/* —— ACORD 125 —— */
.hxa-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.hxa-logo { font-style: italic; font-weight: 800; font-size: 11px; letter-spacing: 0.01em; }
.hxa-date {
  border: 0.5px solid var(--paper-line); padding: 2px 4px;
  font-family: var(--mono); font-size: 5px; text-align: left;
}
.hxa-date span {
  display: block; font-size: 3.9px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--paper-dim);
}
.hxa-title {
  text-align: center; font-weight: 700; font-size: 7px;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.3;
}
.hxa-title span { font-size: 5.2px; font-weight: 600; }
.hxa-grid { display: flex; border: 0.5px solid var(--paper-line); }
.hxa-cell {
  padding: 3px 4px; font-size: 5.2px; line-height: 1.4; min-width: 0;
}
.hxa-cell + .hxa-cell { border-left: 0.5px solid var(--paper-line); }
.hxa-cell.w58 { flex: 0 0 58%; }
.hxa-cell.w42 { flex: 0 0 42%; }
.hxa-cell.w33 { flex: 0 0 33%; }
.hxa-cell.w34 { flex: 0 0 34%; }
.hxa-cell.w67 { flex: 0 0 67%; }
.hxa-cell.w100 { flex: 0 0 100%; }
.hxa-cell { overflow: hidden; }
.hxa-cell > span {
  display: block; margin-bottom: 1px;
  font-family: var(--mono); font-size: 3.9px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper-dim);
}
.hxa-sub { display: block; font-style: normal; margin-top: 2px; }
.hxa-sub span {
  display: block; font-family: var(--mono); font-size: 3.9px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper-dim);
}
.hxa-status { display: block; font-size: 4.8px; }
.hxa-status em, .hxa-lob em {
  position: relative; display: inline-block; vertical-align: -0.5px;
  width: 5.5px; height: 5.5px; margin-right: 2px;
  border: 0.5px solid var(--paper-ink); font-style: normal;
}
.hxa-status em { margin-left: 4px; }
.hxa-status em:first-of-type { margin-left: 0; }
.hxa-status em.on::after, .hxa-lob em.on::after {
  content: "✕"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 4.5px; line-height: 1;
}
/* round boxes (billing plan radios) — filled dot when on */
.hxa-status em.rd { border-radius: 50%; }
.hxa-status em.rd.on::after {
  content: ""; inset: 1px; border-radius: 50%;
  background: var(--paper-ink);
}
.hxa-sec {
  margin-top: 2px; padding-bottom: 1.5px;
  font-weight: 700; font-size: 5.4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 0.5px solid var(--paper-ink);
}
.hxa-lob {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 0; border-bottom: 0.5px solid var(--paper-line);
  font-size: 5.2px;
}
.hxa-lob b {
  margin-left: auto; flex: 0 0 34px;
  border-left: 0.5px solid var(--paper-line); padding-left: 4px;
  font-weight: 400; font-size: 5px; color: var(--paper-dim);
}
.hxa-foot {
  margin-top: auto; display: flex; justify-content: space-between;
  padding-top: 3px; border-top: 0.5px solid var(--paper-line);
  font-family: var(--mono); font-size: 4.2px;
  letter-spacing: 0.04em; color: var(--paper-dim);
}

/* —— carrier quote —— */
.hxq-top { display: flex; align-items: center; gap: 5px; }
.hxq-mark {
  flex: none; width: 12px; height: 12px; border-radius: 3px;
  background: linear-gradient(135deg, var(--doc-blue) 0 58%, var(--doc-orange) 58%);
}
.hxq-name { font-size: 7.5px; font-weight: 600; color: var(--doc-blue-ink); }
.hxq-kind {
  margin-left: auto; font-family: var(--mono); font-size: 4.6px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim);
}
.hxq-note { font-size: 4.9px; line-height: 1.5; font-style: italic; color: var(--paper-faint); }
.hxq-sec {
  margin-top: 3px; padding-bottom: 2px;
  font-size: 5.8px; font-weight: 600;
  border-bottom: 1px solid var(--paper-ink);
}
.hxq-row { display: flex; justify-content: space-between; gap: 8px; padding: 1.5px 0; font-size: 5.2px; }
.hxq-row span { color: var(--paper-dim); }
.hxq-row b { font-weight: 500; }
.hxq-total { margin-top: 1px; padding-top: 3px; border-top: 0.5px solid var(--paper-line); }
.hxq-total b { font-weight: 700; font-size: 6.2px; }
.hxq-foot {
  margin-top: auto; display: flex; justify-content: space-between;
  padding-top: 3px; border-top: 0.5px solid var(--paper-line);
  font-family: var(--mono); font-size: 4.2px;
  letter-spacing: 0.04em; color: var(--paper-dim);
}

/* —— expiring declarations —— */
.hxp-top {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 4.6px; color: var(--paper-dim);
}
.hxp-logo { font-weight: 800; font-size: 9.5px; letter-spacing: -0.01em; }
.hxp-title {
  text-align: center; font-weight: 700; font-size: 6.2px;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding-bottom: 2px; border-bottom: 1px solid var(--paper-ink);
}
.hxp-sec {
  margin-top: 2px; padding-bottom: 1.5px;
  font-weight: 700; font-size: 5.4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 0.5px solid var(--paper-ink);
}
.hxp-tbl { width: 100%; border-collapse: collapse; font-size: 4.9px; }
.hxp-tbl th, .hxp-tbl td {
  border: 0.5px solid var(--paper-line); padding: 2.5px 3px; text-align: left;
}
.hxp-tbl th {
  font-weight: 600; font-size: 4.4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(23, 21, 15, 0.04);
}
.hxp-prem { padding-top: 2.5px; }
.hxp-prem b { font-weight: 700; font-size: 5.8px; }
.hxp-fine { font-size: 4.7px; line-height: 1.5; color: var(--paper-faint); }
.hxp-stamp {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--doc-red); border: 1.5px solid var(--doc-red);
  padding: 4px 10px 4px 13px; border-radius: 2px;
  background: rgba(253, 252, 248, 0.72);
}

/* —— the scan: one thin line of hue, clipped to the open spread —— */
.hx-scanbox {
  position: absolute; inset: -4px 0;
  border-radius: 6px; overflow: hidden;
  z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity 250ms ease;
}
#hx-scan.play .hx-scanbox { opacity: 1; }
#hx-scan.reveal.play .hx-scanbox { opacity: 1; }
#hx-scan.done .hx-scanbox { opacity: 0; }
.hx-scanline {
  position: absolute; left: 0; right: 0; top: -12%;
  height: 26px;
  background: linear-gradient(to bottom, transparent, rgba(232, 118, 45, 0.16));
  border-bottom: 1px solid #e8762d;
}
#hx-scan.play .hx-scanline { top: 104%; transition: top 1600ms linear; }

/* ————— below: Extracted values, then the flags ————— */
.hx-col { display: flex; flex-direction: column; min-width: 0; }

.hx-vals {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding: 12px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.hx-val {
  min-width: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.hx-val.in { opacity: 1; transform: none; }
.hx-val span {
  display: block; margin-bottom: 4px;
  font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted);
}
.hx-val b {
  font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--fg);
  white-space: nowrap;
}
.hx-find {
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  opacity: 0; transform: translateX(-10px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.hx-find.in { opacity: 1; transform: none; }
.hx-find span {
  display: inline-block; margin-right: 10px; vertical-align: middle;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bad); border: 1px solid var(--bad-border);
  padding: 2px 6px; border-radius: 3px;
}
.hx-find b { font-weight: 400; font-size: 14px; color: var(--fg); }
/* Disclose: set slightly apart, always yellow */
.hx-find.disclose { margin-top: 6px; border-bottom-color: transparent; }
.hx-find.disclose span { color: var(--warn); border-color: var(--warn-border); }
.hx-find.disclose b { color: var(--warn); }

/* —— responsive —— */
@media (max-width: 960px) {
  .hx-stage { min-height: 0; gap: 20px; padding: 8px 0; }
  .hx-docs { max-width: 480px; width: 100%; margin: 0 auto; }
  /* narrower cards → shorter pile travel */
  .hx-doc-policy { --px: 140px; }
  .hx-doc-quote { --px: -140px; }
  
  .hx-col { max-width: 480px; width: 100%; margin: 0 auto; }
  .hx-vals { flex-wrap: wrap; gap: 10px 18px; }
  .hx-val b { font-size: 11px; }
}

/* —— reduced motion: full final frame, no sweep, no loop (JS also skips) —— */
@media (prefers-reduced-motion: reduce) {
  .hx-doc, .hx-val, .hx-find { transition: none; }
  .hx-val, .hx-find { opacity: 1; transform: none; }
  .hx-scanbox, .hx-scanline { display: none; }
  .hx-stage { transition: none; }
}