/* Home page only (index.html), loaded after patterns.css. The scroll story is docs/research/home/sequence.md;
   anything here that should become site-wide is asked for in docs/research/home/requests.md. */

/* Page frame, questions, close and phone layout are site-wide now (patterns.css, end). */
main .p-tabs { max-width: none; }

/* ---------- Hero: one complete first screen ---------- */
/* The top space stays the page heads'; the band fills the first viewport, so nothing below shows above the fold. */
.hero { border-bottom: 0; padding-bottom: 0; }
.hero .lede { font-size: var(--t-lead); max-width: 42em; text-wrap: pretty; } /* fill the first line: never half the heading's width */
.hero-art { position: relative; margin: 44px auto 0; max-width: 1200px; height: 270px; }
.hero-art { pointer-events: none; } /* decoration: its glow spills over the buttons and must never take their clicks */
.hero-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-art .pulse { opacity: 0; }
/* Desktop art is fitted to its box with its ends inside; phones get a compacted copy (shorter beam, tighter fan). */
.hero-art .hero-phone { display: none; }
@media (max-width: 720px) { .hero-art .hero-wide { display: none; } .hero-art .hero-phone { display: block; } }
@media (max-width: 1100px) and (max-height: 800px) { .hero-art { margin-top: 32px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .bloom { animation: h-breathe 28s ease-in-out infinite; transform-origin: 600px 132px; }
  .hero-art .rays { animation: h-shimmer 36s ease-in-out infinite; }
  .hero-art .pulse { stroke-dasharray: 8 92; animation: h-travel 22s linear infinite; }
}
@keyframes h-breathe { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes h-shimmer { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes h-travel { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: .9; } 30% { stroke-dashoffset: 0; opacity: .9; } 31%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (max-width: 720px) {
  .display { font-size: var(--t-display-sm); }
  .hero { padding-bottom: 8px; }
  .hero-art { height: 220px; margin: 36px calc(-1 * var(--gutter)) 0; }
}

/* ---------- The deliberate gap, then the router ---------- */
/* A fixed pause of dark between the hero art and the first section, the same at any window height. */
.h-first { padding-top: 160px; }
.h-router .head { margin-bottom: var(--s-gap-content); }
.h-router .hero-stage { margin-top: 0; }
/* The router's light: a glow behind the stage over a dot field, like the lit grid's. */
.h-light { position: relative; isolation: isolate; }
.h-light::before { content: ""; position: absolute; inset: -140px -280px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(110,155,255,.3), rgba(91,140,255,.1) 40%, rgba(91,140,255,.03) 65%, transparent 85%); }
.h-light::after { content: ""; position: absolute; inset: -100px -220px; z-index: -2; pointer-events: none; background-image: radial-gradient(rgba(214,228,253,.14) 1.2px, transparent 1.5px); background-size: 28px 28px; background-position: center; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.h-light .hero-stage { background: rgba(10,13,19,.55); border-color: rgba(143,176,255,.14); }
/* Dots inside the stage, exactly as in every drawing frame (.p-frame::before). */
.h-light .hero-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: radial-gradient(rgba(214,228,253,.12) 1.2px, transparent 1.5px); background-size: 24px 24px; background-position: center; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 10%, transparent 80%); mask-image: radial-gradient(60% 60% at 50% 50%, #000 10%, transparent 80%); }
.h-more { text-align: center; margin-top: 28px; }
@media (max-width: 720px) { .h-first { padding-top: 96px; } }

/* ---------- Developers: the mid-page showcase ---------- */
.h-dev .head .actions { justify-content: center; margin-top: var(--s-gap-actions); }
.h-dev .head { margin-bottom: 72px; }
/* Light falls on the code window from above and behind. */
.h-dev .p-tabs { isolation: isolate; }
.h-dev .p-tabs::before { content: ""; position: absolute; left: 30%; right: -15%; top: 0; bottom: -25%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(110,155,255,.22), rgba(91,140,255,.06) 55%, transparent 85%); }
.h-dev .window { border-color: rgba(214,235,253,.19); background: radial-gradient(41% 10% at 50% 0%, rgba(255,255,255,.08), transparent), #0a0d13; }
.h-dev .p-tab.p-card { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.h-dev .p-tab { grid-template-columns: minmax(0, 1fr) 600px; gap: 80px; }
.h-dev .p-tab > .window { aspect-ratio: auto; height: 312px; }
.h-dev .p-tab > .window pre { justify-content: flex-start; }
.h-dev .p-seg { margin-bottom: 48px; }
@media (max-width: 1100px) { .h-dev .p-tab { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; } }
@media (max-width: 900px) {
  .h-dev .p-tab { grid-template-columns: 1fr; gap: 32px; }
  .h-dev .p-tab > .window { margin: 0; height: auto; min-height: 0; border: 1px solid var(--line-2); border-radius: var(--r-card); }
}

/* ---------- Proof pair: drawings drawn at true size, centred in a shorter frame ---------- */
main .p-duo .p-frame { height: 260px; padding: 32px 28px; -webkit-mask-image: none; mask-image: none; }

/* ---------- Close: the home page keeps its gold accent word ---------- */
.h-close .alt { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -.035em; margin-right: .06em; -webkit-text-fill-color: var(--gold); color: var(--gold); }

/* The router on phones: a smaller core and the outputs in two columns, each pill under its name (critique 34). */
@media (max-width: 520px) {
  .h-router .hero-stage { padding: 20px 14px; }
  .router .core { width: 112px; padding: 36px 0; }
  .router .core-box { border-radius: var(--r-feature); }
  .core-box strong { font-size: var(--t-sub); }
  .router .outs { grid-template-columns: 1fr 1fr; }
  .router .outs .node { display: grid; grid-template-columns: var(--tile-sm) minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px; }
  .router .outs .node .pill { grid-column: 1 / -1; justify-self: start; margin: 0; }
}
@media (max-width: 380px) { .h-dev .window pre { padding-left: 10px; padding-right: 10px; } }
/* The hero's light fades out below the art instead of stopping at the hero's edge. */
.hero.lit { overflow-x: clip; overflow-y: visible; }