/* Prototype page around the hero shader. Values follow the Paper hero (desktop 1440×900). */
:root {
  --ink: #111312;
  --paper: #ffffff;
  --ground: #f9f9f9; /* paper with 2.5% ink: the page ground the canvas sits on */
  --muted: color-mix(in srgb, var(--ink) 60%, transparent);
  --body: color-mix(in srgb, var(--ink) 75%, transparent); /* main body copy, between muted and ink (Paper, 2026-10-14) */
  --font-display: "Sentient", Georgia, serif;
  --font-ui: -apple-system, system-ui, "SF Pro Text", sans-serif;
  --m: 32px;
  --nav-h: 80px;
  --r-btn: 8px;   /* every button (Paper, 2026-10-14) */
  --r-chip: 6px;  /* the arrow chip inside a button */
  --r-card: 12px; /* route cards */
  --e-ui: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 400 14px/20px var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* Nav: 80 tall (56 on phones), wordmark left, buttons right. Anchored at the top (Jerry, 2026-10-14), over a
   progressive blur that shows once the page has scrolled (nav.js). */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 30;
  height: var(--nav-h); padding-inline: var(--m);
  display: flex; align-items: center; justify-content: space-between;
}
/* The blur grows with the first 96px of scroll (--nav-p, nav.js): each layer's radius and the tint scale
   with it. Fading a backdrop filter's parent would drop the blur for the whole fade, so the radius moves instead. */
.nav-blur { display: block; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; visibility: hidden; }
.nav[data-scrolled] .nav-blur { visibility: visible; }
.nav-blur > i {
  position: absolute; inset: 0;
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
  -webkit-backdrop-filter: blur(calc(var(--b) * var(--nav-p, 0))); backdrop-filter: blur(calc(var(--b) * var(--nav-p, 0)));
}
/* Three layers (each a blur pass every frame), strongest at the top. */
.nav-blur > i:nth-child(1) { --b: 2px;  --mask: linear-gradient(#000 0%, #000 50%, transparent 100%); }
.nav-blur > i:nth-child(2) { --b: 6px;  --mask: linear-gradient(#000 0%, #000 30%, transparent 70%); }
.nav-blur > i:nth-child(3) { --b: 14px; --mask: linear-gradient(#000 0%, transparent 45%); }
/* The tint keeps the wordmark legible over any content; it fades out with the blur. */
.nav-blur::after {
  content: ""; position: absolute; inset: 0;
  opacity: var(--nav-p, 0); transition: background 200ms var(--e-ui);
  background: linear-gradient(color-mix(in srgb, var(--ground) 82%, transparent) 0%, color-mix(in srgb, var(--ground) 60%, transparent) 50%, transparent 100%);
}

/* Over the ink footer, the bar turns dark: an ink tint, a paper wordmark and button. */
.nav[data-dark] .nav-blur::after {
  background: linear-gradient(color-mix(in srgb, var(--ink) 82%, transparent) 0%, color-mix(in srgb, var(--ink) 60%, transparent) 50%, transparent 100%);
}
.nav .wordmark, .nav .pill--ink, .nav .pill--ink .pill-arrow { transition: color 200ms var(--e-ui), background-color 200ms var(--e-ui); }
.nav[data-dark] .wordmark { color: var(--paper); }
.nav[data-dark] .pill--ink { background: var(--paper); color: var(--ink); }
.nav[data-dark] .pill--ink .pill-arrow { background: var(--ink); color: var(--paper); }
.nav[data-dark] .pill--soft { background: color-mix(in srgb, var(--paper) 14%, transparent); color: var(--paper); }


.wordmark { position: relative; display: flex; align-items: center; gap: 8px; font: 400 24px/1 var(--font-display); letter-spacing: -0.02em; }
/* Logomark (Paper lockup, 2026-10-15): 25px beside the 22px phone wordmark, so it scales with the type. */
.logomark { width: 1.416em; height: 0.95em; flex-shrink: 0; }
.nav-actions, .hero-actions { position: relative; display: flex; gap: 8px; }

/* Buttons: 40 tall, radius 8. The ink one carries a 32px paper chip with radius 6. */
.pill {
  height: 40px; display: inline-flex; align-items: center; gap: 12px;
  padding-inline: 20px; border-radius: var(--r-btn);
  font: 500 14px/1 var(--font-ui);
  transition: background-color 120ms var(--e-ui);
}
.pill--soft { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.pill--soft:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.pill--ink { background: var(--ink); color: var(--paper); padding-right: 4px; }
.pill-arrow {
  width: 32px; height: 32px; border-radius: var(--r-chip); display: grid; place-items: center;
  background: var(--paper); color: var(--ink); font-size: 15px;
}

/* Hero: the canvas covers it; type and cards sit on clean ground at the bottom. */
.hero {
  position: relative; min-height: 100svh; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--nav-h) var(--m) var(--m); /* the top padding keeps the headline clear of the nav on short screens */
}
.hero-shader {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ground);
  opacity: 0; transition: opacity 900ms var(--e-ui);
}
.hero-shader.is-live { opacity: 1; }
.hero-shader canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; } /* one px per dot (main.js) */

.hero-copy { margin-bottom: 64px; }
.hero-room { display: none; }
h1 {
  width: 566px; max-width: 100%;
  font: 300 40px/125% var(--font-display); letter-spacing: -0.04em;
}
.hero-actions { margin-top: 28px; }

/* Route cards (Paper "Router"): 246 tall, radius 12, 8 apart. Title, then 16 down the line and the link. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card {
  height: 246px; border-radius: var(--r-card); padding: 24px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.card {
  position: relative; overflow: hidden;
  transition: background-color 160ms var(--e-ui), box-shadow 200ms var(--e-ui);
}
.card h2 { font: 400 20px/125% var(--font-display); letter-spacing: -0.02em; }
.card p { margin-top: 16px; font: 400 14px/150% var(--font-ui); color: var(--muted); }
.card a { margin-top: 4px; font: 500 14px/24px var(--font-ui); align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .hero-shader { transition: none; }
}

/* Tablet (768–1023): the cards keep their height, so they drop the description and the desktop-only words,
   keeping the titles clear of the shapes. */
@media (min-width: 768px) and (max-width: 1023px) {
  .card p, .d-only { display: none; }
  .card a { margin-top: 12px; }
}

/* Phone (Paper "Home · Hero · phone · A", Jerry's revision): one screen with every job on it, the content
   anchored to the bottom of the small viewport and the bridge in the space above (main.js fits the camera).
   The nav is fixed: the wordmark, and Get data once the hero's own buttons have scrolled away. Behind it a
   progressive blur, strongest at the top, fades out below the bar. */
@media (max-width: 767px) {
  :root { --m: 20px; --nav-h: 56px; }
  .wordmark { font-size: 22px; line-height: 28px; }
  .nav-actions .pill--soft { display: none; }
  .nav-actions {
    transition: opacity 200ms var(--e-ui), translate 200ms var(--e-ui), visibility 0s linear 200ms;
  }
  .nav[data-cta="off"] .nav-actions { opacity: 0; translate: 0 -6px; visibility: hidden; }
  .nav[data-cta="on"] .nav-actions { transition-delay: 0s; }

  /* 40px buttons reach 44px targets with an invisible margin above and below. */
  .nav .pill::before, .hero-actions .pill::before { content: ""; position: absolute; inset: -2px 0; }
  .nav .pill, .hero-actions .pill { position: relative; }

  .hero { min-height: 100svh; padding: var(--nav-h) var(--m) var(--m); }
  .hero-copy { margin-bottom: 40px; }
  h1 { width: auto; font: 400 24px/125% var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
  .hero-actions { margin-top: 24px; }

  /* Routes (Jerry, 2026-10-14): single-line buttons at rest, so the bridge has the screen. As the page scrolls,
     hero-phone.js grows each one (--x: 0 → 1, with a spring) into a card that shows what it does:
     the description and link rise in (--rev) and the shape, drawn by the hero's renderer at the full card
     size and centred (cards.js), is uncovered. --full is the grown height (the three fill ~62% of the screen). */
  .cards { display: flex; flex-direction: column; gap: 8px; }
  .card {
    --x: 0; --rev: 0; --go: 1;
    height: calc(48px + var(--x) * (var(--full, 148px) - 48px));
    padding: 13px 20px; justify-content: flex-start;
    border-radius: calc(8px + 4px * clamp(0, var(--x), 1)); /* a button's radius at rest, a card's when grown */
  }
  .cards .card .card-text { position: static; gap: 0; } /* the link line sits at the card's foot, not the text's */
  .card h2 { font: 500 15px/22px var(--font-ui); letter-spacing: 0; }
  .card h2::after { content: "\00a0" attr(data-go); color: var(--muted); opacity: var(--go); }
  .card p {
    display: block; max-width: 62%; margin-top: 6px;
    font: 400 13px/19px var(--font-ui); color: var(--muted); text-wrap: pretty;
    opacity: var(--rev); translate: 0 calc((1 - var(--rev)) * 6px);
  }
  .cards .card .card-text > a { /* beats motion.css */
    position: absolute !important; left: 20px; top: calc(var(--full, 148px) - 31px); margin: 0; gap: 4px; /* at the grown card's foot: uncovered as it grows */
    font: 500 13px/18px var(--font-ui); color: var(--ink);
    opacity: var(--rev); translate: 0 calc((1 - var(--rev)) * 6px);
  }
  .cards .card a .chip { width: 14px; height: 14px; margin-block: 0; border-radius: 4px; }
  .card:focus-within { outline: 2px solid var(--accent, #e5532a); outline-offset: 2px; }
  .card a:focus-visible { outline: none; }

  /* The scene (hero-phone.js): the hero is a screen plus the routes' total growth; that extra room sits below the
     routes and shrinks as they grow down into it, so the headline and routes move with your finger and nothing
     below them moves. */
  html.hero-scene .hero { min-height: calc(100svh + 3 * (var(--full, 148px) - 48px)); }
  html.hero-scene .hero-room { display: block; flex-shrink: 0; height: max(0px, calc((var(--full, 148px) - 48px) * (3 - var(--sumx, 0)))); }
  .d-only { display: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .nav-actions, .nav-blur { transition: none; }
}