/* Hallmark · shape: brochure leaves, one page per brochure spread · genre: editorial · theme: custom · job: hire · idea: "the TrioLex brochure, opened on the web: every page a navy leaf edged in gold" · vibe: "navy and gold, quiet, formal, exact"
 * paper: oklch(21.7% 0.049 256) · accent: oklch(81.9% 0.089 78) · display: Forum · body: Cormorant Garamond · hero: the brochure cover, the ribbon and wordmark beside the promise · nav: wordmark left, six pages, a call action · footer: Connect With Us, as on the brochure's last page · imagery: the founder's portrait from the brochure, the brochure's own wordmark · signature: the cover ribbon with the gold wordmark
 * axes: dark/roman-serif/warm · posture: Drenched, the navy is the surface and gold is the signal, locked to the client's printed brochure · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the structure follows the brochure page for page by the client's instruction rather than a fresh plan */
/* Hallmark · waive 81 · the ribbon holds the client's gold wordmark at its centre · this is the TrioLex brochure cover ribbon, the brand's own device */
/* Hallmark · waive 23 · gold fills the primary buttons and the cover ribbon's edge · the TrioLex brochure is navy with gold rules on every page */
/* Hallmark · waive 49b · scope links are the brochure's full service titles · TrioLex India approved these service names in its brochure */
/* Client instruction, not a waiver: the brochure sets index titles and subtitles in tracked capitals (gate 67); kept because TrioLex India asked for the brochure's exact theme */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 84px;
  --bar: 64px;
  --edge-line: var(--color-edge-line);
  --shadow-leaf: 0 0 0 1px var(--color-edge-soft), 18px 0 40px var(--color-shade-leaf);
  /* the gold page edges and the content's side padding share one width, so text never runs under an edge */
  --edge: clamp(12px, 6vw, 104px);
}
@media (max-width: 40rem) { :root { --edge: 10px; } }

html { background: var(--color-paper-3); }
body {
  background:
    radial-gradient(120% 60% at 15% 0%, var(--color-paper-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-3) 100%);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
}

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 400; color: var(--color-accent); letter-spacing: var(--tracking-display); line-height: 1.12; }
.display { font-size: clamp(2.75rem, 4.4vw + 1rem, 4.75rem); }
.h-section { font-size: clamp(2.25rem, 2.6vw + 1rem, 3.5rem); }
.h-title { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.375rem, 0.6vw + 1.1rem, 1.625rem); color: var(--color-accent-pale); letter-spacing: 0; line-height: 1.25; }
.bar { display: block; width: var(--bar); height: 2px; margin-top: var(--space-md); background: var(--color-accent); border: 0; }
.lead { font-size: var(--text-lg); color: var(--color-ink); max-width: 36ch; }
.prose p { max-width: 62ch; }
.prose p + p { margin-top: var(--space-md); }
.prose ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; max-width: 62ch; }
.prose li { position: relative; padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-xs); }
.prose li::before { content: ""; position: absolute; left: 0.2em; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.caps { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--color-ink); }
.label { font-family: var(--font-outlier); font-weight: 300; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.32em; color: var(--color-ink-2); }
.kicker { display: flex; align-items: center; gap: var(--space-lg); font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.42em; color: var(--color-accent); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: 2px; background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); letter-spacing: 0.04em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-accent); }
.btn--quiet:hover { background: var(--color-wash); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.link { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-rule); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .btn, .link { transition: none; } }

/* ---------- skip link ---------- */
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-nav); border-bottom: 1px solid var(--color-rule-quiet); backdrop-filter: blur(10px); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; flex: none; }
.wordmark img { width: 172px; height: auto; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__links a { font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; padding: var(--space-xs) 0; border-bottom: 1px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); white-space: nowrap; }
.nav__links a:hover { color: var(--color-accent); }
.nav__links a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav .btn { min-height: 44px; font-size: var(--text-sm); }
.menu { display: none; }
@media (max-width: 68rem) {
  .nav__links, .nav__call { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: 2px; color: var(--color-accent); font-weight: 700; cursor: pointer; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .menu[open] summary { background: var(--color-wash); }
  .menu__panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(84vw, 320px); padding: var(--space-md) var(--space-lg) var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); box-shadow: 0 24px 48px var(--color-shade); }
  .menu__panel ul { margin: 0; padding: 0; list-style: none; }
  .menu__panel li a { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-quiet); color: var(--color-ink); font-weight: 700; text-decoration: none; }
  .menu__panel li a[aria-current="page"] { color: var(--color-accent); }
  .menu__panel li a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .menu__panel .btn { width: 100%; margin-top: var(--space-lg); }
  .wordmark img { width: 148px; }
}

/* ---------- the leaf: a brochure page, edged in gold ---------- */
.leaf { position: relative; isolation: isolate; padding-block: var(--section-gap-s); }
.leaf + .leaf { border-top: 1px solid var(--color-rule-quiet); }
.leaf--tight { padding-block: var(--space-3xl); }
.edges { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.edges::before, .edges::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: var(--edge); background: linear-gradient(180deg, var(--color-paper-2), var(--color-paper-3)); box-shadow: var(--shadow-leaf); }
.edges::before { left: 0; border-right: 1px solid var(--edge-line); border-radius: 0 0 999px 0; }
.edges::after { right: 0; border-left: 1px solid var(--edge-line); border-radius: 999px 0 0 0; }
.edges--alt::before { border-radius: 0 999px 0 0; }
.edges--alt::after { border-radius: 0 0 0 999px; }

.wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.container { padding-inline: calc(var(--edge) + clamp(16px, 3.5vw, 48px)); }

/* ---------- hero: the cover ---------- */
.hero { padding-block: var(--space-2xl); min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; }
.hero .wrap { align-items: center; }
.hero { padding-top: 0; align-items: stretch; }
.hero .wrap { align-items: stretch; }
.hero__text { padding-block: var(--space-2xl); }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.hero__text { display: grid; gap: var(--space-lg); align-content: center; }
.hero__text .lead { max-width: 34ch; }
.ribbon { position: relative; justify-self: center; align-self: start; width: min(100%, 340px); height: min(82svh, 640px); }
.ribbon__body { position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-paper-2), var(--color-paper-3) 70%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.ribbon__line { position: absolute; inset: 0 14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); background: linear-gradient(180deg, var(--color-accent-2), var(--color-gold-deep) 55%, var(--color-accent-2)); }
.ribbon__line::after { content: ""; position: absolute; inset: 0 1.5px 1.8px; clip-path: inherit; background: linear-gradient(180deg, var(--color-paper-2), var(--color-paper-3) 70%); }
.ribbon__mark { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: var(--space-md); padding-inline: 7%; }
.ribbon__logo { position: relative; width: 100%; }
.ribbon__logo img { width: 100%; height: auto; }
.ribbon__mark .bar { width: 48px; margin: 0; height: 1.5px; }
@media (max-width: 60rem) { .hero { min-height: 0; } .ribbon { order: -1; width: min(64%, 240px); height: 300px; } .hero__text { padding-top: var(--space-lg); } }

/* ---------- the preface index ---------- */
.index { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.index li { border-bottom: 1px solid var(--color-rule); }
.index a { display: grid; grid-template-columns: 64px 1px minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xs); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.index a:hover { background: var(--color-wash-faint); }
.index a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.index__n { font-family: var(--font-body); font-weight: 500; font-size: var(--text-lg); color: var(--color-accent); }
.index__rule { align-self: stretch; background: var(--color-rule); }
.index__t { display: grid; gap: var(--space-2xs); }
.index__t .caps { font-size: clamp(1.25rem, 1vw + 0.9rem, 1.625rem); }
.index__go { color: var(--color-accent); font-size: var(--text-lg); transition: transform var(--dur-short) var(--ease-out); }
.index a:hover .index__go { transform: translateX(4px); }
@media (max-width: 40rem) { .index a { grid-template-columns: 40px 1px minmax(0, 1fr); gap: var(--space-md); } .index__go { display: none; } }

/* ---------- two-column statement ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); } }
.stack { display: grid; gap: var(--space-2xl); }
.block { display: grid; gap: var(--space-lg); align-content: start; }

/* ---------- numbered timeline (gold rings on a gold line) ---------- */
.steps { margin: var(--space-xl) 0 0; padding: 0; list-style: none; position: relative; display: grid; gap: var(--space-xl); }
.steps::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 1.5px; background: var(--color-accent); }
.steps > li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.ring { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--color-accent); border-radius: 50%; background: var(--color-paper); color: var(--color-accent); font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); }
.ring svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.steps .h-title { margin-top: var(--space-sm); }
.steps p { margin-top: var(--space-xs); max-width: 60ch; }
.steps p + p { margin-top: var(--space-sm); }
.steps--icons { gap: var(--space-lg); }
.steps--icons .h-title { font-size: var(--text-lg); color: var(--color-accent); font-weight: 700; margin-top: var(--space-sm); }

/* ---------- scope grid ---------- */
.scope { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
@media (min-width: 52rem) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }
.scope li { list-style: none; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.scope { padding: 0; }
.scope a { color: var(--color-ink); text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); transition: color var(--dur-short) var(--ease-out); }
.scope a:hover { color: var(--color-accent); }
.scope a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- arch portrait (brochure founder frame) ---------- */
.arch { position: relative; width: min(100%, 360px); aspect-ratio: 4 / 5; margin: 0; padding: var(--space-xs); border: 1.5px solid var(--color-accent); border-radius: 999px 999px 0 0; }
.arch [data-slot] { width: 100%; height: 100%; border-radius: 999px 999px 0 0; }
.arch img { object-position: 50% 20%; }
.person { display: grid; gap: var(--space-2xs); margin-top: var(--space-lg); }
.person .h-title { color: var(--color-accent); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1vw + 1.3rem, 2.25rem); }
.founder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
@media (min-width: 52rem) { .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); } }

/* ---------- connect (brochure last page) ---------- */
.connect { margin: var(--space-xl) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-lg); max-width: 640px; }
.connect li { display: grid; grid-template-columns: 52px 1px minmax(0, 1fr); gap: var(--space-lg); align-items: center; }
.connect .rule { align-self: stretch; background: var(--color-rule); }
.connect a, .connect span.v { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur-short) var(--ease-out); }
.connect a:hover { color: var(--color-accent); }
.connect a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.connect .k { display: block; margin-bottom: var(--space-3xs); }

/* ---------- form ---------- */
.form { display: grid; gap: var(--space-lg); max-width: 560px; }
.field { display: grid; gap: var(--space-xs); }
.field label { font-weight: 700; color: var(--color-ink); }
.field input, .field textarea { width: 100%; min-height: 52px; padding: var(--space-xs) var(--space-md); line-height: 1.4; border: 1px solid var(--color-rule); border-radius: 2px; background: var(--color-field); color: var(--color-ink); font-weight: 500; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-accent); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent); }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--color-error); }
.field .hint { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__status { min-height: 1.6em; color: var(--color-accent-pale); }
.note { padding: var(--space-lg); border: 1px solid var(--color-rule-quiet); border-left: 2px solid var(--color-accent); color: var(--color-ink-2); font-size: var(--text-sm); }
.note h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); color: var(--color-accent); margin-bottom: var(--space-xs); }

/* ---------- page head ---------- */
.pagehead { padding-block: var(--space-3xl) var(--space-xl); }
.pagehead + .leaf { border-top: 0; padding-top: var(--space-xl); }
.pagehead .lead { margin-top: var(--space-lg); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- close band ---------- */
.close { text-align: left; display: grid; gap: var(--space-lg); justify-items: start; }

/* ---------- footer ---------- */
.foot { padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-rule); background: var(--color-paper-3); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 52rem) { .foot__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); } }
.foot .wordmark img { width: 190px; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.foot a { color: var(--color-ink-2); text-decoration: none; font-weight: 700; transition: color var(--dur-short) var(--ease-out); }
.foot a:hover { color: var(--color-accent); }
.foot a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.foot__small { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-quiet); font-size: var(--text-sm); color: var(--color-muted); }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- motion: the brochure opening, quiet and exact ----------
   Everything here is transform and opacity only, gated on .js and on
   prefers-reduced-motion, so the page reads complete with neither. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
.nav { view-transition-name: nav; }
::view-transition-old(nav), ::view-transition-new(nav) { animation: none; }

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, var(--color-sheen) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease-out); }
.btn:hover::after { transform: translateX(120%); }
.ring { transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.scope li:hover .ring, .connect li:hover .ring, .steps li:hover .ring { transform: scale(1.06); box-shadow: 0 0 0 6px var(--color-wash-faint), 0 0 24px var(--color-wash); }
.index li { position: relative; }
.index li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); }
.index li:hover::after { transform: scaleX(1); }
.index__n, .index__t { transition: transform var(--dur-long) var(--ease-out); }
.index a:hover .index__t { transform: translateX(6px); }
.nav { transition: box-shadow var(--dur-long) var(--ease-out), background-color var(--dur-long) var(--ease-out); }
.nav.is-scrolled { box-shadow: 0 10px 30px var(--color-shade-leaf); }
.arch { transition: box-shadow 900ms var(--ease-out); }
.arch:hover { box-shadow: 0 0 0 6px var(--color-wash-faint), 0 30px 60px var(--color-shade-leaf); }
.arch img { transition: transform 1600ms var(--ease-out); }
.arch:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: no-preference) {
  /* the cover: the ribbon unrolls, its gold edge draws, the wordmark catches the light */
  .js .ribbon__body, .js .ribbon__line { transform-origin: top; animation: unroll 1400ms var(--ease-out) 150ms both; }
  .js .ribbon__mark { animation: rise 1100ms var(--ease-out) 1000ms both; }
  .ribbon__mark .bar { transform-origin: center; }
  .js .ribbon__mark .bar { animation: draw 900ms var(--ease-out) 1500ms both; }
  .ribbon__shine { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url("img/triolex-wordmark.png") center / contain no-repeat; mask: url("img/triolex-wordmark.png") center / contain no-repeat; pointer-events: none; }
  .ribbon__shine::before { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(100deg, transparent 40%, var(--color-shine) 50%, transparent 60%); transform: translateX(-70%); animation: shine 5.5s var(--ease-in-out) 2.2s infinite; }
  .js .hero__text > * { animation: rise 1000ms var(--ease-out) both; }
  .js .hero__text > :nth-child(1) { animation-delay: 300ms; }
  .js .hero__text > :nth-child(2) { animation-delay: 650ms; }
  .js .hero__text > :nth-child(3) { animation-delay: 800ms; }
  .js .hero__text > :nth-child(4) { animation-delay: 950ms; }
  .js .pagehead .container > * { animation: rise 1000ms var(--ease-out) both; }
  .js .pagehead .container > :nth-child(2) { animation-delay: 150ms; }
  .js .pagehead .container > :nth-child(3) { animation-delay: 300ms; }
  .js .pagehead .container > :nth-child(4) { animation-delay: 420ms; }
  .js .edges::before { animation: edge-l 1400ms var(--ease-out) both; }
  .js .edges::after { animation: edge-r 1400ms var(--ease-out) both; }

  /* sections settle in, children one after another */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal .bar { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out) 350ms; }
  .js .reveal.in .bar { transform: scaleX(1); }
  .js .reveal :is(.index li, .scope li, .steps > li, .connect li) { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
  .js .reveal.in :is(.index li, .scope li, .steps > li, .connect li) { opacity: 1; transform: none; }
  .js .reveal .steps::before { transform: scaleY(0); transform-origin: top; transition: transform 1800ms var(--ease-out) 300ms; }
  .js .reveal.in .steps::before { transform: scaleY(1); }
  .js .reveal .arch { opacity: 0; transform: translateY(30px) scale(0.98); transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out); }
  .js .reveal.in .arch { opacity: 1; transform: none; }
  .js .reveal .kicker::after { transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--ease-out) 200ms; }
  .js .reveal.in .kicker::after { transform: scaleX(1); }

  /* the side panels drift a little slower than the page, where the browser can do it off the main thread */
  @supports (animation-timeline: view()) {
    .js .edges::before { animation: edge-l 1400ms var(--ease-out) both, drift linear both; animation-timeline: auto, view(); animation-composition: replace, add; }
    .js .edges::after { animation: edge-r 1400ms var(--ease-out) both, drift linear both; animation-timeline: auto, view(); animation-composition: replace, add; }
  }
}
@keyframes unroll { from { transform: scaleY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes shine { 0% { transform: translateX(-70%); } 35%, 100% { transform: translateX(70%); } }
@keyframes edge-l { from { transform: translateX(-100%); } }
@keyframes edge-r { from { transform: translateX(100%); } }
@keyframes drift { from { transform: translateY(-24px); } to { transform: translateY(24px); } }