/* Hero A ★ "O banco confere" (Gate 2, src/components/heroes/HeroA.astro) — phone first. Desktop layer: a.desktop.css (≥1024px).
   Every class is .ha* so it can share the home with the other directions and the ported sections.
   Reading path: kicker -> H1 -> premise -> CTA (+ the free-month note) -> the statement slab rising from the bottom edge
   -> the proof strip at the foot of the first screen. Only transform/opacity animate; the first frame is complete. */

.ha, .ha-proof {   /* the proof strip is 2 x 2 everywhere; the fold falls in the gap between its rows (D-36: "dois acima da dobra e dois abaixo") */
  --proof-pad: 26px;     /* strip padding top/bottom */
  --proof-row: 82px;     /* one row (phones: icon tile over up to 2 lines) */
  --proof-gap: 56px;     /* the space between the two rows; the fold sits in its middle */
  --proof-peek: calc(var(--proof-pad) + var(--proof-row) + var(--proof-gap) / 2);   /* the strip's part on the first screen */
}
.ha {
  --row-h: 62px;
  --row-gap: 6px;
  --slab-head: 64px;
  --slab-cols: 0px;
  --t0: 1000ms;                    /* the demo starts after load settles */
  --step: 520ms;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(100svh - var(--proof-peek), 1000px);   /* first row of the strip on screen, second below the fold */
  overflow: clip;
  background: var(--bg);
}
.ha.has-grain::after { opacity: calc(var(--grain-opacity) * 1.25); z-index: 3; }
/* the slab rises from the bottom edge: the last px dissolve into the canvas, so the cut rows never read as a glitch */
.ha::before { content: ""; position: absolute; inset: auto 0 0; height: 40px; z-index: 2; background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 0%, transparent), var(--bg)); pointer-events: none; }

/* ---------- copy ---------- */
.ha__copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: calc(var(--topbar-h) + clamp(20px, 4svh, 36px)) var(--gutter) 0;
}
.ha__copy::before {
  content: "";
  position: absolute;
  inset: 8% -4% -6%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--bg) 72%, transparent) 40%, transparent);
  pointer-events: none;
}
.ha__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px 0 8px;
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--bg-raised) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--hair), var(--highlight-top);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: var(--w-ui);
  letter-spacing: -.005em;
}
.ha__mark { display: grid; place-items: center; width: 24px; height: 24px; color: var(--fg); }
.ha__mark svg { width: 20px; height: auto; }
.ha__title {
  margin-top: clamp(14px, 2.4svh, 22px);
  max-width: 14ch;
  font-size: clamp(2.25rem, min(1.25rem + 5.2vw, 9.4svh), 5.25rem);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  overflow-wrap: anywhere;
  min-width: 0;
}
.ha__title em.acc { letter-spacing: -.02em; white-space: nowrap; }
.ha__lead {
  margin-top: clamp(10px, 1.8svh, 16px);
  max-width: 34ch;
  color: var(--fg-muted);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
}
.ha__cta { display: grid; justify-items: center; gap: 10px; margin-top: clamp(16px, 2.8svh, 24px); }
.ha__note { color: var(--fg-subtle); font-size: var(--text-sm); }

/* ---------- stage: the slab + the stripes anchored to it ---------- */
.ha__stage {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: clamp(110px, 100svh - 540px, 190px);   /* short phones (iPhone SE) still get the 2+2 split */
  margin-top: clamp(20px, 3.4svh, 36px);
}
/* the 1600x1000 stripes field (white shapes): straight bands from y=768 (centre 780) with a 48px pitch, so the first one lines up
   with the first statement row; above it the wave rises back to the full calçadão. */
.ha__stripes {
  position: absolute;
  left: 50%;
  top: calc(var(--slab-head) + var(--slab-cols) + 8px + var(--row-h) / 2 - 780px);
  width: 1600px;
  height: 1000px;
  margin-left: -800px;
  pointer-events: none;
}
.ha__stripes svg { width: 100%; height: 100%; opacity: .15; }
/* the light: a static grey glow inside the stripes (TMC blinds light), falling off to the canvas at every edge */
.ha__stripes::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 44% at 50% 80%, transparent 0%, color-mix(in oklab, var(--bg) 30%, transparent) 50%, var(--bg) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 34%);
}

/* ---------- the slab (light coded UI, no device chrome) ---------- */
.ha-slab {
  --s-ink: oklch(17% 0.006 85);
  --s-ink-2: oklch(32% 0.006 85);
  --s-muted: oklch(46% 0.006 85);
  --s-line: oklch(88% 0.005 85);
  --s-soft: oklch(96% 0.004 85);
  --s-card: oklch(99.3% 0.002 85);
  position: relative;
  width: min(100% - 2 * var(--gutter), 1000px);
  margin-inline: auto;
  padding: 0 12px 12px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--s-card);
  color: var(--s-ink);
  box-shadow: inset 0 1px 0 oklch(100% 0 0), 0 -1px 0 oklch(100% 0 0 / .2), var(--shadow-device);
  font-size: 13px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.ha-slab__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title count" "tag tag";
  align-items: center;
  gap: 2px 10px;
  height: var(--slab-head);
  padding: 10px 4px 6px;
}
.ha-slab__title { grid-area: title; display: grid; min-width: 0; }
.ha-slab__title b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.ha-slab__title span { color: var(--s-muted); font-size: 12px; }
.ha-slab__tag {
  grid-area: tag;
  justify-self: start;
  display: none;
}
.ha-slab__count { grid-area: count; display: grid; justify-items: end; font-size: 12px; font-weight: 600; }
.ha-slab__count > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-full); white-space: nowrap; }
.ha-slab__count-a { border: 1px dashed var(--s-muted); color: var(--s-ink-2); opacity: 0; }
.ha-slab__count-b { background: var(--s-ink); color: var(--s-card); }
.ha-slab__count svg { width: 12px; height: 12px; }
.ha-slab__cols { display: none; }

.ha-slab__rows { display: grid; gap: var(--row-gap); margin-top: 8px; }
.ha-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: var(--row-h);
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--s-soft);
  box-shadow: inset 0 0 0 1px var(--s-line);
  align-content: center;
  gap: 4px;
}
.ha-row__bank { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px; min-width: 0; }
.ha-row__d { color: var(--s-muted); font-size: 12px; }
.ha-row__memo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; letter-spacing: .02em; color: var(--s-ink-2); }
.ha-row__v { font-weight: 600; font-size: 13px; }
.ha-row__acc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.ha-row__acc-t { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ha-row__acc-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.ha-row__acc-t span { display: none; color: var(--s-muted); font-size: 12px; white-space: nowrap; }
.ha-row__acc-t::before { content: "↳"; color: var(--s-muted); font-size: 12px; }
.ha-row__link { display: none; }

.ha-row__st { display: grid; justify-items: end; }
.ha-row__st > * { grid-area: 1 / 1; }
.ha-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 500; white-space: nowrap; }
.ha-pill--wait { border: 1px dashed var(--s-muted); color: var(--s-ink-2); }
.ha-pill--done { background: var(--s-ink); color: var(--s-card); }
.ha-pill--done::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ha-row__st-a { opacity: 0; }   /* final state = matched; the keyframes start from "aguardando" */

.ha-row--rest .ha-row__acc-t b { font-weight: 500; color: var(--s-ink-2); }

/* ---------- the match, once (transform/opacity only; fill both = the pending first frame during the delay) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ha-row { --d: calc(var(--t0) + var(--i, 0) * var(--step)); }
  .ha-row__st-a { animation: ha-out 200ms var(--e-out) calc(var(--d) + 560ms) both; }
  .ha-row__st-b { animation: ha-in 360ms var(--e-spring) calc(var(--d) + 600ms) both; }
  .ha-row__line { animation: ha-line 520ms var(--e-out) calc(var(--d) + 80ms) both; }
  .ha-row__dot { animation: ha-in 360ms var(--e-spring) calc(var(--d) + 520ms) both; }
  .ha-row__ghost { animation: ha-ghost 760ms var(--e-in-out) var(--d) both; }
  .ha-slab__count-a { animation: ha-out 200ms var(--e-out) calc(var(--t0) + 2 * var(--step) + 700ms) both; }
  .ha-slab__count-b { animation: ha-in 360ms var(--e-spring) calc(var(--t0) + 2 * var(--step) + 740ms) both; }
}
@keyframes ha-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ha-in { from { opacity: 0; transform: scale(.9); } }
@keyframes ha-line { from { transform: scaleX(0); } }
@keyframes ha-ghost {
  0% { opacity: 0; transform: translateX(-56px); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(48px); }
}

/* ---------- proof strip (#2): static facts, hairlines, the foot of the first screen ---------- */
/* Arthur 17/10: "tá parecendo apertado" -> each point gets an icon tile and air around it (phones: tile over the text) */
.ha-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--proof-row), auto);
  align-items: start;
  gap: var(--proof-gap) 24px;
  padding: var(--proof-pad) var(--gutter);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  color: var(--fg-muted);
  font-size: .875rem;
  line-height: 1.35;
  text-wrap: balance;
}
.ha-proof li { display: grid; justify-items: start; align-content: start; gap: 10px; }
.ha-proof__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--hair), var(--highlight-top);
  color: var(--fg);
}
.ha-proof svg { width: 16px; height: 16px; }


@media (min-width: 560px) {
  .ha, .ha-proof { --proof-row: 40px; --proof-gap: 64px; --proof-pad: 28px; }
  .ha { --row-h: 42px; --slab-cols: 28px; --slab-head: 54px; }
  .ha-row { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; padding: 0 6px; gap: 0; background: transparent; box-shadow: none; }
  .ha-row__bank, .ha-row__acc { height: 36px; padding: 0 10px; border-radius: 8px; align-items: center; }
  .ha-row__bank { background: var(--s-soft); box-shadow: inset 0 0 0 1px var(--s-line); }
  .ha-row__acc { background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line); }
  .ha-row--rest .ha-row__acc { box-shadow: none; border: 1px dashed oklch(78% 0.006 85); background: transparent; }
  .ha-row__acc-t::before { content: none; }
  .ha-row__link { position: relative; display: grid; place-items: center; height: 100%; }
  .ha-row__line { position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--s-ink); transform-origin: left; }
  .ha-row__line--dash { border-top-style: dashed; border-top-color: oklch(70% 0.006 85); }
  .ha-row__dot { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--s-ink); color: var(--s-card); }
  .ha-row__dot svg { width: 11px; height: 11px; }
  .ha-row__ghost { position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -38px; width: 76px; height: 22px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--s-ink); color: var(--s-card); font-size: 11.5px; font-weight: 600; opacity: 0; z-index: 2; }
  .ha-slab__cols { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; height: var(--slab-cols); padding: 0 16px; border-radius: 8px; background: var(--s-soft); color: var(--s-muted); font-size: 11.5px; }
  .ha-slab__head { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title tag count"; gap: 12px; padding: 0 4px; }
  .ha-slab__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-full); background: var(--s-soft); color: var(--s-muted); font-size: 11.5px; }
  .ha-proof { grid-template-columns: repeat(2, minmax(0, 290px)); justify-content: center; align-items: center; gap: var(--proof-gap) clamp(40px, 8vw, 140px); color: var(--fg); font-size: var(--text-body); }
  .ha-proof li { grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
  .ha-proof__icon { width: 40px; height: 40px; border-radius: 12px; color: var(--fg); }
  .ha-proof svg { width: 18px; height: 18px; }
}
/* phones: the tag rides on the title's second line */
@media (max-width: 559.98px) {
  .ha-slab__title span::after { content: " · dados de exemplo"; }
}
@media (min-width: 900px) {
  .ha-row__acc-t span { display: inline; }
}
@media (min-width: 560px) and (max-width: 1179.98px) {
  .ha-proof { padding-inline: calc(var(--gutter) + 24px); }
}