/* Act 1, the hero. The same sample payment drawn twice, as two lanes on one
   ground line: customer, terminal, bank, pending on the dark ground;
   customer, VanPay converter, wallet on the light ground. Owner: builder H.

   Planes, back to front (data-sc-parallax rate, px per act):
     haze    1.6   soft hatch and dust (drifts sideways with --hp)
     back    1.2   drafting grid, centre line, registration marks
     route   0.55  the lane, ticks that slide with --hp, stop bar
     subject 0.4   customer, terminal / converter, bank / wallet, ground
     parts   0.5   tokens (load intro), pending mark, pips, check
     copy    0     type rides the page
     fore   -0.5   callout leaders, reference numerals
     mote   -1     near specks, drift with --hp                       */

#act-hero {
  /* hero progress: 0 at load, 1 as the hero leaves (flow p runs 0.5 to 1) */
  --hp: clamp(0, calc((var(--sc-p, 0.5) - 0.5) * 2), 1);
  --hero-type: clamp(2.6rem, min(4.5vw, 7.4vh), 4.6rem);
  --hero-drop: clamp(2.25rem, 6vh, 3.5rem);
  --hero-eyebrow: calc(var(--sc-t-xs) * 1.3 + var(--sc-4));
}

#act-hero .hero__side {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-block: 0;
  overflow: clip;
}

/* ----------------------------------------------------------- the art -- */
.hero-art {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100svh;
  /* Clip at the divider, but let the lagging planes run past the fold. */
  clip-path: inset(0 0 -16vh 0);
  pointer-events: none;
}
.hero-plane,
.hero-plane__depth {
  position: absolute;
  inset: 0;
}
.hero-plane { will-change: transform; }
.hero-plane--haze    { z-index: 0; }
.hero-plane--back    { z-index: 0; }
.hero-plane--route   { z-index: 1; }
.hero-plane--subject { z-index: 2; }
.hero-plane--parts   { z-index: 3; }
.hero-plane--fore    { z-index: 4; }
.hero-plane--mote    { z-index: 5; }
.hero-plane__depth { will-change: transform; }

.hero-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

/* Fade the back plate at the sheet edges and keep the divider cap clear. */
.hero-plane--back {
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 72%, transparent 97%);
}
.hero-grid-mark {
  fill: none;
  stroke: var(--sc-ink-soft);
  stroke-width: 1;
  opacity: 0.38;
}
.hero__side--vp .hero-grid-mark { opacity: 0.42; }
/* The past side is ruled like a ledger page, inside an engraver's plate. */
.hero-rule { opacity: 0.2; }
.hero-margin { opacity: 0.45; }
.hero-plate { stroke-width: 1px; opacity: 0.5; }
.hero-centerline { stroke-dasharray: 18 5 2 5; opacity: 0.55; }
.hero-plane--back .ln--soft { opacity: 0.7; }

.hero-solid { fill: var(--sc-canvas); }
.hero-solid--lift { fill: var(--sc-surface); }
.hero-dimline { opacity: 0.85; }
.hero-route { stroke-width: 1.75px; }
.hero-port { stroke-width: 2.5px; }
.hero-num { font-size: 11px; }
.hero__side--card .hero-num { font-style: italic; font-size: 12px; }

/* Atmosphere: hatch haze behind, a few specks in front. The past is
   cross-hatched like an engraving, the future keeps the drafting hatch. */
.hero-haze { fill: url(#vp-hatch); opacity: 0.22; }
.hero__side--card .hero-haze { fill: url(#vp-hatch-engrave); opacity: 0.3; }
.hero__side--vp .hero-haze { opacity: 0.3; }
.hero-dust circle, .hero-mote { fill: var(--sc-ink-soft); }
.hero-dust { opacity: 0.55; }
.hero-mote { opacity: 0.4; }
.hero-drift--back { transform: translate3d(calc(var(--hp) * -26px), 0, 0); }
.hero-drift--front { transform: translate3d(calc(var(--hp) * 34px), calc(var(--hp) * -12px), 0); }

/* Small moving parts, scroll driven. */
.hero-ticks { transform: translate3d(calc(var(--hp) * 30px), 0, 0); }
.hero-streaks { transform: translate3d(calc(var(--hp) * 72px), 0, 0); opacity: 0.9; }
.hero-gear, .hero-seal, .hero-ok, .hero-tok__crypto {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.hero-gear { transform: rotate(calc(var(--hp) * 120deg)); }
.hero-gear__ring { stroke-dasharray: 3 4; }
/* The coin scale weighs as you scroll; the quill lifts from the pot. */
.hero-beam, .hero-quill { transform-box: view-box; }
.hero-beam { transform-origin: 232px 332px; transform: rotate(calc(var(--hp) * -7deg)); }
.hero-quill { transform-origin: 572px 388px; transform: rotate(calc(var(--hp) * -9deg)); }
/* The orbit ring around the converter carries one satellite round with scroll:
   squash, turn, stretch, so the dot stays on the ellipse. */
.hero-orbit__sat {
  fill: var(--sc-accent);
  transform-box: view-box;
  transform-origin: 290px 316px;
  transform: scale(1, 0.245) rotate(calc(var(--hp) * -160deg)) scale(1, 4.08);
}
/* The wax seal: a blob of wax in the surface tone, cross-hatched, die ring. */
.hero-seal__wax { fill: var(--sc-surface); }
.hero-seal__edge { stroke-width: 1.5px; }
.hero-seal__die { stroke-width: 1px; stroke-dasharray: 2 2.5; opacity: 0.9; }
.hero-seal__label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; fill: var(--sc-ink); }
.hero-pip { fill: var(--sc-accent); }
.hero-pip--1 { opacity: calc(0.22 + 0.78 * clamp(0, calc(var(--hp) * 4), 1)); }
.hero-pip--2 { opacity: calc(0.22 + 0.78 * clamp(0, calc(var(--hp) * 4 - 1), 1)); }
.hero-pip--3 { opacity: calc(0.22 + 0.78 * clamp(0, calc(var(--hp) * 4 - 2), 1)); }
.hero-gem, .hero-id__gem { fill: var(--sc-accent); }
.hero-ok__tick { stroke-width: 1.75px; stroke-dasharray: 16; stroke-dashoffset: 0; }

/* Tokens rest at their end state: landed in the ledger, landed in the wallet. */
.hero-tok--card { transform: translate(400px, 388px); }
.hero-tok--vp { transform: translate(568px, 404px); }
.hero-tok__fiat { opacity: 0; }

/* -------------------------------------------------------- identity -- */
/* Each side names itself at the top of its column: icon and two words. */
.hero-id {
  position: absolute;
  z-index: 6;
  top: clamp(4.25rem, 10.5vh, 6.25rem);
  left: clamp(1.5rem, 4vw, 5rem);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(1.1rem, 0.85rem + 0.6vw, 1.45rem);
  font-weight: 620;
  font-stretch: 108%;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--sc-ink);
}
.hero-id__icon { height: 2.3em; width: auto; flex: none; overflow: visible; }

/* The mark is the only place --vp-mark appears. */
.hero-mark {
  fill: none;
  stroke: var(--vp-mark);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hero-mark--body { fill: var(--sc-surface); }
.hero-mark-facet { fill: url(#hero-hatch-mark); stroke: none; }
.hero-mark-hatch { stroke: var(--vp-mark); stroke-width: 1; opacity: 0.7; }

/* ---------------------------------------------------------- the copy -- */
.hero-copy {
  position: relative;
  z-index: 4;
  margin-top: calc(50svh + var(--hero-drop));
  padding-bottom: clamp(3.5rem, 9vh, 5.5rem);
}
.hero-copy .display {
  font-size: var(--hero-type);
  line-height: 0.98;
  letter-spacing: -0.034em;
  max-width: 8.6em;
}
.hero-copy--card .display { letter-spacing: -0.028em; line-height: 1.01; }
.hero-card__head { margin-top: var(--hero-eyebrow); }
.hero-card__body { margin-top: var(--sc-5); max-width: 40ch; }

.hero-eyebrow { margin: 0 0 var(--sc-4); line-height: 1.3; }
.hero-lede { margin-top: var(--sc-5); max-width: 40ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-3) var(--sc-6);
  margin-top: var(--sc-6);
}
.hero-actions__link { font-size: var(--sc-t-sm); font-weight: 520; }

/* ------------------------------------------------------- account row -- */
.hero-top {
  position: absolute;
  z-index: 5;
  top: clamp(0.75rem, 2.2vh, 1.25rem);
  left: clamp(1.5rem, 4vw, 5rem);
  right: clamp(1.5rem, 4vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sc-4);
}
.hero-account {
  display: flex;
  align-items: center;
  gap: var(--sc-2);
}
.hero-account__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--sc-3);
  border-radius: 6px;
  color: var(--sc-ink);
  font-size: var(--sc-t-sm);
  font-weight: 520;
  text-decoration: none;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero-account__link:hover { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
}

/* The divider cap carries the brand on desktop; the hero carries it on phones. */
.hero-brand { display: none; }
.hero-brand {
  align-items: center;
  gap: 0.45rem;
  margin-right: auto;
  min-height: 2.75rem;
  color: var(--sc-ink);
  font-family: var(--sc-font-display);
  font-weight: 640;
  font-stretch: 108%;
  font-size: 1rem;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.hero-brand__mark { width: 1.35rem; height: 1.35rem; fill: var(--vp-mark); flex: none; }
.hero-brand__facet { opacity: 0.45; }

/* Short desktop screens: keep the CTA clear of the divider labels. */
@media (min-width: 760px) and (max-height: 820px) {
  #act-hero {
    --hero-type: clamp(2.4rem, min(4.5vw, 6.8vh), 4.6rem);
    --hero-drop: 1.6rem;
  }
  .hero-lede { margin-top: var(--sc-4); }
  .hero-card__body { margin-top: var(--sc-4); }
  .hero-actions { margin-top: var(--sc-5); }
}

/* ------------------------------------------------------------ phones -- */
@media (max-width: 759.98px) {
  #act-hero {
    --hero-type: clamp(2.2rem, 10.2vw, 3rem);
  }
  #act-hero .hero__side {
    min-height: 0;
    overflow: hidden;
  }
  /* The identity row IS the divider band here: icon, name, hairlines. */
  #act-hero .hero__side[data-label]::before { display: none; }
  #act-hero .hero__side[data-label] {
    padding-top: 0;
    padding-bottom: var(--sc-6);
  }
  .hero-id {
    position: relative;
    top: auto; left: auto;
    order: -1;
    margin: 0 calc(-1 * clamp(1.5rem, 4vw, 5rem)) var(--sc-4);
    padding: 0.7rem clamp(1.5rem, 4vw, 5rem);
    border-top: 1px solid var(--sc-hairline-strong);
    border-bottom: 1px solid var(--sc-hairline);
    font-size: 1.15rem;
  }
  .hero__side--vp .hero-id { border-top: 2px solid var(--vp-mark); }
  .hero-id__icon { height: 2em; }

  .hero__side--card, .hero__side--vp { display: flex; flex-direction: column; }
  .hero-copy { margin-top: 0; padding-bottom: 0; }
  .hero-copy .display { max-width: none; }

  /* Each lane becomes a full-width strip: viewBox rows 170 to 470. */
  .hero-art {
    position: relative;
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 300;
    clip-path: none;
    overflow: hidden;
    margin-bottom: var(--sc-4);
  }
  .hero-svg {
    inset: auto;
    left: 0;
    top: -56.666%;
    width: 100%;
    height: 300%;
  }
  /* At crop scale even small parallax tears the drawing apart; on phones the
     planes hold still and the depth comes from overlap alone. */
  .hero-plane { transform: none !important; }
  .hero-copy { order: 2; }
  .hero-top { order: 0; }
  .hero-copy .hero-card__head { margin-top: 0; font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .hero-card__body { margin-top: var(--sc-3); max-width: none; }
  .hero-seal__label { font-size: 20px; }
  .hero__side--card .hero-num { font-size: 20px; }

  .hero-top {
    position: relative;
    top: auto; left: auto; right: auto;
    margin: calc(var(--sc-2) * -1) 0 var(--sc-3);
    gap: var(--sc-2);
  }
  .hero-brand { display: inline-flex; }
  .hero-account { gap: 0; }
  .hero-account__link { padding-inline: var(--sc-2); }
  .hero-eyebrow { margin-bottom: var(--sc-3); }
  .hero-lede { margin-top: var(--sc-4); }
  .hero-actions { margin-top: var(--sc-5); gap: var(--sc-2) var(--sc-5); }
  .hero-num, .hero-callouts, .hero-plane--mote { display: none; }
  .hero-plane--back { mask-image: none; opacity: 0.7; }
}
@media (max-width: 759.98px) and (max-height: 700px) {
  .hero-lede { font-size: 1.05rem; }
  .hero-card__body { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  #act-hero { --hp: 0; }
  .hero-plane__depth { transform: none !important; }
  .hero-account__link { transition: none; }
}

/* Load intro, once: the same sample payment leaves both customers at once.
   Counting house: along the counter, weighed on the scale, into the ledger,
   sealed "paid". VanPay: to the converter, fiat becomes crypto, into the
   wallet. The resting styles above are the end state, so reduced motion and
   any later visit to the hero show the outcome. */
@media (prefers-reduced-motion: no-preference) {
  .hero-tok--card { animation: hero-tok-card 1400ms cubic-bezier(0.45, 0, 0.25, 1) 100ms backwards; }
  .hero-tok--vp { animation: hero-tok-vp 1400ms cubic-bezier(0.45, 0, 0.25, 1) 100ms backwards; }
  .hero-tok__fiat { animation: hero-fiat 1400ms linear 100ms backwards; }
  .hero-tok__crypto { animation: hero-crypto 1400ms linear 100ms backwards; }
  .hero-gear__ring { animation: hero-spin 1400ms cubic-bezier(0.45, 0, 0.25, 1) 100ms backwards; transform-box: fill-box; transform-origin: 50% 50%; }
  .hero-beam { animation: hero-weigh 1400ms cubic-bezier(0.45, 0, 0.25, 1) 100ms backwards; }
  .hero-seal { animation: hero-stamp 300ms cubic-bezier(0.2, 0.7, 0.2, 1) 1240ms backwards; }
  .hero-ok { animation: hero-stamp 260ms cubic-bezier(0.2, 0.7, 0.2, 1) 1340ms backwards; }
  .hero-ok__tick { animation: hero-tick 260ms cubic-bezier(0.2, 0.7, 0.2, 1) 1400ms backwards; }

  #act-hero h1 .sc-split__i {
    animation: hero-line-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms backwards;
  }
  #act-hero h1 .sc-split--line + .sc-split--line .sc-split__i { animation-delay: 220ms; }
}
@keyframes hero-tok-card {
  0%   { transform: translate(112px, 391px); opacity: 0; }
  8%   { transform: translate(112px, 391px); opacity: 1; }
  32%  { transform: translate(232px, 391px); opacity: 1; }
  50%  { transform: translate(232px, 391px); opacity: 1; }
  84%  { transform: translate(394px, 391px); opacity: 1; }
  100% { transform: translate(400px, 388px); opacity: 1; }
}
@keyframes hero-weigh {
  0%, 30% { transform: rotate(0deg); }
  42%  { transform: rotate(-8deg); }
  54%  { transform: rotate(4deg); }
  66%, 100% { transform: rotate(0deg); }
}
@keyframes hero-tok-vp {
  0%   { transform: translate(112px, 404px); opacity: 0; }
  8%   { transform: translate(112px, 404px); opacity: 1; }
  32%  { transform: translate(290px, 404px); }
  48%  { transform: translate(290px, 404px); }
  84%  { transform: translate(522px, 404px); }
  100% { transform: translate(568px, 404px); }
}
@keyframes hero-fiat {
  0%, 35% { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes hero-crypto {
  0%, 37% { opacity: 0; transform: scale(0.6); }
  48%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes hero-spin {
  0%, 28% { transform: rotate(0deg); }
  52%, 100% { transform: rotate(180deg); }
}
@keyframes hero-stamp {
  from { opacity: 0; transform: scale(1.18); }
}
@keyframes hero-tick {
  from { stroke-dashoffset: 16; }
}
@keyframes hero-line-in {
  from { transform: translateY(104%); opacity: 0; }
}
@media (max-width: 379.98px) {
  .hero-id { font-size: 1rem; gap: 0.6rem; }
  .hero-id__icon { height: 1.9em; }
}