/* VanPay shared layout: body, the two grounds, the divider chrome, the split
   grid, type helpers and the technical-drawing line vocabulary. Every act
   builds against these names. Owner: builder A. */

/* ------------------------------------------------------------- body -- */
html { overflow-x: clip; }
body {
  background: var(--card-canvas);
  font-family: var(--sc-font-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { display: block; }

/* Focus: the per-ground accent clears 3:1 on its own ground (light #2859D7,
   dark #7FA6FF). Chrome outside the sides sits on a light surface. */
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--sc-surface);
  color: var(--sc-ink);
  font-weight: 560;
  text-decoration: none;
  box-shadow: var(--sc-e2);
  transform: translateY(-160%);
}
.skip-link:focus-visible,
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (pointer: coarse) {
  a, button, summary { min-height: 44px; min-width: 44px; }
  :where(p, li) > a { min-height: 0; min-width: 0; padding-block: 0.6rem; }
}

/* Shared SVG defs holder: takes no space. */
.vp-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------------------------------------------------------- grounds -- */
/* Fixed two-ground layer. The light ground is the layer itself; the dark
   ground is one SVG path filled from the left edge to the trail, so the
   boundary IS the trail. split.js rewrites the path; nothing animates width. */
.grounds {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: clip;
  background: var(--vp-canvas);
  pointer-events: none;
}
.grounds__svg,
.divider__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.grounds__card { fill: var(--card-canvas); stroke: none; }

.act { position: relative; z-index: 1; }

/* ---------------------------------------------------------- divider -- */
/* The divider is a winding trail: a hairline, milestone ticks, a progress
   stroke traced along the same curve and a "you are here" ring at its tip.
   split.js computes the curve from --split, the phase and scroll. */
.divider {
  position: fixed;
  inset: 0;
  z-index: var(--sc-z-chrome);
  pointer-events: none;
}
.divider__trail,
.divider__fill,
.divider__pulse {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.divider__trail {
  stroke: color-mix(in oklab, var(--card-soft) 62%, var(--vp-canvas));
  stroke-width: 1px;
}
.divider__fill {
  stroke: var(--vp-mark);
  stroke-width: 2px;
  stroke-linecap: round;
}
/* Arrival: the trail has straightened (split.js takes the amplitude to zero)
   and the progress stroke lights the whole road. */
html[data-era="history"] .divider__fill { stroke-width: calc(2px + 1.5px * var(--close)); }
html[data-era="history"] .divider__trail { opacity: calc(1 - var(--close)); }

/* The era pulse: a short bright dash that split.js sends along the trail at
   each jump (dasharray / dashoffset, about 400ms, then gone). */
.divider__pulse {
  stroke: var(--vp-mark);
  stroke-width: 2.5px;
  stroke-linecap: round;
  opacity: 0;
}

/* Mile-markers: one tick per era on the trail, labelled on the side of time
   it belongs to. The past reads in aged ink, the future in the accent. */
.divider__mark { opacity: calc(1 - var(--close) * 2); }
.divider__mark.is-past { opacity: calc(0.55 - var(--close) * 2); }
.divider__mark-tick {
  fill: none;
  stroke: color-mix(in oklab, var(--card-soft) 85%, var(--vp-canvas));
  stroke-width: 1.5px;
  stroke-linecap: square;
}
.divider__mark--future .divider__mark-tick {
  stroke: var(--vp-mark);
  stroke-width: 1px;
  stroke-linecap: round;
}
/* Labels light up as the capsule approaches: the neighbouring eras read,
   the far ones are ticks until you get there (reduced motion shows all). */
.divider__mark-label { fill: var(--card-soft); opacity: 0; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
.divider__mark.is-near .divider__mark-label { opacity: 0.7; }
.divider__mark.is-here .divider__mark-label { fill: var(--card-ink); opacity: 1; }
.divider__mark--future .divider__mark-label,
.divider__mark--future.is-here .divider__mark-label { fill: var(--sc-accent); }

/* The time capsule: a drawn pod with two fins and an orbit ring, riding the
   trail at the page's progress. Twin light trails stretch behind it with
   scroll speed (split.js) and relax to rest. */
.divider__capsule { opacity: calc(1 - var(--close) * 2); }
.divider__pod-body {
  fill: var(--vp-canvas);
  stroke: var(--vp-mark);
  stroke-width: 1.25px;
  stroke-linejoin: round;
}
.divider__pod-fin { fill: var(--vp-canvas); stroke: var(--vp-mark); stroke-width: 1.1px; stroke-linejoin: round; }
.divider__pod-band { fill: none; stroke: var(--vp-mark); stroke-width: 1px; opacity: 0.7; }
.divider__pod-port { fill: var(--vp-mark); }
.divider__pod-orbit { fill: none; stroke: var(--vp-mark); stroke-width: 0.9px; opacity: 0.85; }
.divider__wake { opacity: 0; }
.divider__wake-line { fill: none; stroke: url(#vp-wake); stroke-width: 1.6px; stroke-linecap: round; }
.vp-wake-a { stop-color: var(--vp-mark); stop-opacity: 0.95; }
.vp-wake-b { stop-color: var(--vp-mark); stop-opacity: 0; }
/* The jump: a quick wipe of light across the pod, once per crossing. */
.divider__flash { opacity: 0; clip-path: inset(0 0 100% 0); }
.divider__flash-body { fill: var(--vp-mark); }
.divider__capsule.is-jump .divider__flash { animation: vp-capsule-wipe 360ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.divider__capsule.is-jump .divider__pod { animation: vp-capsule-pop 360ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes vp-capsule-wipe {
  0%   { opacity: 1; clip-path: inset(0 0 100% 0); }
  45%  { opacity: 1; clip-path: inset(0); }
  100% { opacity: 1; clip-path: inset(100% 0 0 0); }
}
@keyframes vp-capsule-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.divider__pod { transform-box: fill-box; transform-origin: 50% 50%; }

.divider__cap {
  position: absolute;
  top: 0.5rem;
  left: 0;
  /* Centred on the trail at its height; split.js keeps it clear of the edge. */
  translate: calc(var(--cap-x, 50vw) - 50%) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  border-radius: 8px;
  background: var(--sc-surface);
  color: var(--sc-ink);
  box-shadow: var(--sc-e1);
  font-family: var(--sc-font-display);
  font-weight: 640;
  font-stretch: 108%;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  pointer-events: auto;
  transition: box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.divider__cap svg { width: 1.3rem; height: 1.3rem; fill: var(--vp-mark); flex: none; }
.divider__cap-text { display: flex; flex-direction: column; line-height: 1.05; }
/* The era readout: a tiny split-flap under the mark. Two stacked lines; at a
   jump the current one flips up and out while the next flips in from below
   (transform and clip-path only). Reduced motion just swaps the text. */
.divider__era {
  position: relative;
  width: 10.4em;
  height: 0.95rem;
  margin-top: 0.2rem;
  overflow: clip;
  font-family: var(--sc-font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.divider__era-line {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  line-height: 0.95rem;
  transform: translateY(100%);
}
.divider__era-line.is-cur { transform: none; }
.divider__era-line.is-in { animation: vp-flap-in 300ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.divider__era-line.is-out { animation: vp-flap-out 300ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes vp-flap-in {
  from { transform: translateY(100%); clip-path: inset(100% 0 0 0); }
  55%  { clip-path: inset(0); }
  to   { transform: none; clip-path: inset(0); }
}
@keyframes vp-flap-out {
  from { transform: none; clip-path: inset(0); }
  to   { transform: translateY(-100%); clip-path: inset(0 0 100% 0); }
}
.divider__cap:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .divider__cap:hover { box-shadow: var(--sc-e2); }
}
.divider__labels {
  position: absolute;
  bottom: 1.1rem;
  left: 0;
  width: 0;
  translate: var(--lab-x, 50vw) 0;
  opacity: calc(1 - var(--close) * 3);
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.divider__labels.is-swapping { opacity: 0; }
.divider__label {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
/* A short leader from each label to the line. */
.divider__label::after {
  content: "";
  width: 0.9rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.divider__label--card { right: 0.15rem; color: var(--card-soft); }
.divider__label--vp { left: 0.15rem; flex-direction: row-reverse; color: var(--sc-ink-soft); }

/* In the hero the two labels name the two sides: larger, inked, tabbed. */
.divider__labels[data-key="hero"] .divider__label {
  padding: 0.5rem 0.7rem;
  border: 1px solid;
  border-radius: 6px;
  font-size: var(--sc-t-sm);
  font-weight: 560;
  letter-spacing: 0.09em;
}
.divider__labels[data-key="hero"] .divider__label--card {
  right: 0.6rem;
  color: var(--card-ink);
  background: var(--card-canvas);
  border-color: color-mix(in oklab, var(--card-ink) 30%, transparent);
}
.divider__labels[data-key="hero"] .divider__label--vp {
  left: 0.6rem;
  color: var(--sc-ink);
  background: var(--vp-canvas);
  border-color: var(--vp-mark);
}
.divider__labels[data-key="hero"] .divider__label::after { display: none; }

/* ------------------------------------------------------------ split -- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); }
.side {
  position: relative;
  min-width: 0;
  padding-inline: clamp(1.5rem, 4vw, 5rem);
}
.act:not([data-sc-act="pin"]) .side { padding-block: var(--sc-section); }

@media (min-width: 760px) {
  .split {
    grid-template-columns: 50vw 50vw;
    width: 100vw;
  }
  .side { background: transparent; }
  [data-sc-stage] > .split { height: 100%; }
  [data-sc-stage] > .split > .side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(4.25rem, 10vh, 7rem);
  }
}

/* Mobile: one column, each side paints its ground and carries its label as
   a divider band on its top edge. */
@media (max-width: 759.98px) {
  .grounds, .divider { display: none; }
  .side {
    background: var(--sc-canvas);
    color: var(--sc-ink);
    --band: 2.25rem;
  }
  .side[data-label] { padding-top: calc(var(--band) + 1.25rem); }
  .act:not([data-sc-act="pin"]) .side[data-label] {
    padding-top: calc(var(--band) + var(--sc-section) * 0.7);
    padding-bottom: calc(var(--sc-section) * 0.7);
  }
  .side[data-label]::before {
    content: attr(data-label);
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--band);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-inline: clamp(1.5rem, 4vw, 5rem);
    border-top: 1px solid var(--sc-hairline-strong);
    border-bottom: 1px solid var(--sc-hairline);
    font-family: var(--sc-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
  }
  .side--vp[data-label]::before { border-top-color: var(--vp-mark); }
  [data-sc-stage] > .split {
    height: 100%;
    grid-template-rows: auto auto;
    align-content: stretch;
  }
  [data-sc-stage] > .split > .side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 1rem;
  }
}

/* ------------------------------------------------------------- type -- */
.display {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  font-weight: 620;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display--xl { font-size: var(--sc-t-4xl); line-height: 0.96; letter-spacing: -0.04em; }
.display--lg { font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.035em; }
.display--sm { font-size: var(--sc-t-xl); line-height: 1.04; letter-spacing: -0.02em; }

.lede {
  margin: 0;
  max-width: 46ch;
  font-size: var(--sc-t-lg);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--sc-ink);
  text-wrap: pretty;
}
.body {
  margin: 0;
  max-width: 62ch;
  line-height: var(--sc-leading-body);
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* Light type on the dark ground: one step more weight, a touch more air. */
.side--card .display { font-weight: 600; letter-spacing: -0.024em; line-height: 1.03; }
.side--card .lede { letter-spacing: -0.006em; line-height: 1.46; }
.side--card .body { line-height: 1.68; letter-spacing: 0.004em; font-weight: 430; }
.side--card .label { letter-spacing: 0.09em; }

/* Visible sample-data tag. */
.sample {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.55em;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 4px;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  white-space: nowrap;
}

/* ---------------------------------------------------------- actions -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-sm);
  font-weight: 580;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              transform 120ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--primary {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.24),
              0 6px 14px -6px hsl(var(--sc-shadow-color) / 0.38);
}
.btn--quiet {
  background: transparent;
  color: var(--sc-ink);
  border-color: var(--sc-hairline-strong);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in oklab, var(--sc-accent) 88%, var(--sc-ink)); }
  .btn--quiet:hover { border-color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
}

.link {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; }
}

/* -------------------------------------------- technical drawing kit -- */
.ln {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ln--soft { color: var(--sc-ink-soft); }
.ln--accent { color: var(--sc-accent); }
.ln--dash { stroke-dasharray: 4 4; }
.hatch { fill: url(#vp-hatch); stroke: none; }
.dim {
  font-family: var(--sc-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  fill: var(--sc-ink-soft);
  color: var(--sc-ink-soft);
}
/* Pattern and marker colours are resolved where they are defined, so they
   use a mid tone that reads on both grounds. */
.vp-hatch-line { stroke: color-mix(in oklab, var(--card-soft) 55%, var(--sc-ink-soft)); stroke-width: 1; }
.vp-arrow-head { fill: color-mix(in oklab, var(--card-soft) 55%, var(--sc-ink-soft)); fill: context-stroke; }

/* ------------------------------------------------------------ era kit -- */
/* Shared by every act. The past is engraved: heavier, square-capped ink,
   warmed a little towards sepia (derived from the side's own ink token, so
   the aged ground re-themes it). The future is a hairline in the accent.
   The patterns live in chrome.html; their colour comes from the card
   tokens because the hatching belongs to the past side. */
:root { --vp-sepia: oklch(58% 0.08 68); }
.ln--ink {
  stroke-width: 1.75px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: color-mix(in oklab, var(--sc-ink) 86%, var(--vp-sepia));
}
.ln--ink.ln--soft { color: color-mix(in oklab, var(--sc-ink-soft) 86%, var(--vp-sepia)); }
.ln--future {
  stroke-width: 0.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--sc-accent);
}
.era-label {
  font-family: var(--sc-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: currentColor;
  color: var(--sc-ink-soft);
}
.hatch--engrave { fill: url(#vp-hatch-engrave); stroke: none; }
.hatch--wood    { fill: url(#vp-hatch-wood); stroke: none; }
.hatch--grain   { fill: url(#vp-grain); stroke: none; }
.vp-engrave-line { stroke: color-mix(in oklab, var(--card-soft) 70%, var(--card-canvas)); stroke-width: 0.75; }
.vp-engrave-line--cross { opacity: 0.7; }
.vp-wood-line { stroke: color-mix(in oklab, var(--card-soft) 62%, var(--card-canvas)); stroke-width: 1; }
.vp-grain-dot { fill: color-mix(in oklab, var(--card-soft) 70%, var(--card-canvas)); }

@media (prefers-reduced-motion: reduce) {
  .divider__labels { transition: none; }
  .divider__era-line.is-in, .divider__era-line.is-out,
  .divider__capsule.is-jump .divider__flash, .divider__capsule.is-jump .divider__pod { animation: none; }
  .divider__era-line.is-in { transform: none; }
  .divider__era-line.is-out { visibility: hidden; }
  .divider__wake { display: none; }
  .divider__mark-label { transition: none; }
}

/* Keyboard users can outrun a scroll reveal; focus always shows its content. */
[data-sc-in]:focus-within, [data-sc-stagger] > :focus-within { opacity: 1; transform: none; }

/* In the flowing text acts the bottom labels would sit on running copy; the
   act headings carry the comparison there, so the labels step aside. */
html[data-phase="tension"] .divider__labels,
html[data-phase="build"] .divider__labels { opacity: 0; }