/* ============================================================
   Homepage film (assets/film.js) and the page after it.
   Without film.js the chapters stack as full-height sections
   with the photo behind each; html.film-on turns them into
   layers on one fixed stage.
============================================================ */

/* ---------- header (sits on the first chapter, scrolls away with the page) ---------- */
.site-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 48px;
  color: var(--brand-snow);
  text-shadow: 0 1px 2px rgba(5, 24, 33, 0.85), 0 2px 12px rgba(5, 24, 33, 0.5);
}
.site-head .brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.site-head .brand img { display: block; }
.site-head .brand em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: var(--brand-glacier); font-size: 0.85em; margin-left: 0.15em; }
.site-head nav { display: flex; gap: 32px; font-size: 13px; font-weight: 500; }
.site-head nav a { color: color-mix(in oklab, var(--brand-snow) 82%, transparent); transition: color 200ms; }
.site-head nav a:hover { color: var(--brand-snow); }
.site-menu { display: none; position: relative; }
.site-menu summary {
  display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 500; color: var(--brand-snow);
  background: color-mix(in oklab, var(--brand-shadow) 40%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 35%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary span, .site-menu summary span::before, .site-menu summary span::after { display: block; width: 13px; height: 1.5px; border-radius: 1px; background: currentColor; }
.site-menu summary span { position: relative; }
.site-menu summary span::before, .site-menu summary span::after { content: ""; position: absolute; left: 0; }
.site-menu summary span::before { top: -4px; } .site-menu summary span::after { top: 4px; }
.site-menu[open] summary span { background: transparent; }
.site-menu[open] summary span::before { top: 0; transform: rotate(45deg); } .site-menu[open] summary span::after { top: 0; transform: rotate(-45deg); }
.site-menu nav {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 8px;
  display: flex; flex-direction: column; gap: 0; border-radius: 14px; text-shadow: none;
  background: color-mix(in oklab, var(--brand-shadow) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 18%, transparent), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
}
.site-menu nav a { padding: 11px 12px; border-radius: 8px; font-size: 15px; color: var(--brand-snow); }
.site-menu nav a:hover, .site-menu nav a:focus-visible { background: color-mix(in oklab, var(--brand-snow) 12%, transparent); }

/* ---------- chapters ---------- */
.chapter {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 96px 64px 84px;
  text-align: center;
  color: var(--brand-snow);
  background: var(--brand-deep-sea) var(--photo) center / cover no-repeat;
}
.chapter::before { /* keeps snow text readable: WCAG AA against the brightest 5% of each photo behind the text */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: color-mix(in oklab, var(--brand-shadow) 15%, transparent);
  background-image: radial-gradient(ellipse 70% 75% at 50% 56%,
    color-mix(in oklab, var(--brand-shadow) 65%, transparent) 0%,
    color-mix(in oklab, var(--brand-shadow) 45%, transparent) 55%,
    transparent 100%);
}
@media (max-width: 767px), (orientation: portrait) { /* narrow screens: the text block is taller than it is wide */
  .chapter::before {
    background-color: color-mix(in oklab, var(--brand-shadow) 25%, transparent);
    background-image: radial-gradient(ellipse 90% 60% at 50% 55%,
      color-mix(in oklab, var(--brand-shadow) 60%, transparent) 0%,
      color-mix(in oklab, var(--brand-shadow) 45%, transparent) 60%,
      color-mix(in oklab, var(--brand-shadow) 5%, transparent) 100%);
  }
}
.chapter > * { position: relative; z-index: 1; max-width: 960px; }
.ch-in { width: 100%; display: flex; flex-direction: column; align-items: center; } /* film.js may scale this down to fit a short window */
.chapter[data-chapter="1"] { --photo: url(/assets/film/1.webp); }
.chapter[data-chapter="2"] { --photo: url(/assets/film/2.webp); }
.chapter[data-chapter="3"] { --photo: url(/assets/film/3.webp); }
.chapter[data-chapter="4"] { --photo: url(/assets/film/4.webp); }
.chapter[data-chapter="5"] { --photo: url(/assets/film/5.webp); }
.chapter[data-chapter="6"] { --photo: url(/assets/film/6.webp); }
@media (max-width: 767px), (orientation: portrait) {
  .chapter[data-chapter="1"] { --photo: url(/assets/film/1-m.webp); }
  .chapter[data-chapter="2"] { --photo: url(/assets/film/2-m.webp); }
  .chapter[data-chapter="3"] { --photo: url(/assets/film/3-m.webp); }
  .chapter[data-chapter="4"] { --photo: url(/assets/film/4-m.webp); }
  .chapter[data-chapter="5"] { --photo: url(/assets/film/5-m.webp); }
  .chapter[data-chapter="6"] { --photo: url(/assets/film/6-m.webp); }
}
.chapter h1, .chapter h2 {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(40px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 0 18px;
  text-shadow: 0 2px 24px rgba(5, 24, 33, 0.5);
}
.chapter h1 em { font-family: var(--font-italic); font-style: italic; font-weight: 300; color: var(--brand-glacier); }
.chapter .lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; max-width: 660px; margin: 0 0 22px; text-shadow: 0 1px 12px rgba(5, 24, 33, 0.7); }
.chapter .meta { /* a full sentence of names, so sentence case: all caps at this length is fine print nobody reads */
  margin: -8px 0 0;
  font: 400 12.5px/1.5 var(--font-mono); letter-spacing: 0.02em;
  color: var(--brand-glacier); text-shadow: 0 1px 8px rgba(5, 24, 33, 0.8);
}
.chapter .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chapter .credit {
  margin: 22px 0 0; max-width: 560px;
  font-family: var(--font-italic); font-style: italic; font-size: 15px;
  color: color-mix(in oklab, var(--brand-snow) 88%, transparent); text-shadow: 0 1px 10px rgba(5, 24, 33, 0.8);
}

/* the chapter's animation sits in the photo, not on it: a soft pool of shade that fades to nothing on every side,
   so there is no card edge and no blurred rectangle cut out of the mountains (assets/illustrations.js fills it) */
.chapter .scene {
  width: min(780px, 100%); height: clamp(170px, 36svh, 360px); aspect-ratio: auto;
  margin: 4px 0 24px; border-radius: 0;
  background: radial-gradient(ellipse 54% 64% at 50% 50%,
    color-mix(in oklab, var(--brand-shadow) 46%, transparent) 0%,
    color-mix(in oklab, var(--brand-shadow) 30%, transparent) 52%,
    transparent 100%);
  color: var(--brand-snow); text-align: left;
  container-type: size;
}
.chapter .scene[data-illo="robert"] { height: clamp(116px, 19svh, 170px); }
.chapter .scene[data-illo="vortex"] { /* short copy on chapter 1: room for the ring and the terms around it */
  width: min(960px, 100%); height: clamp(240px, 46svh, 420px); overflow: visible;
  background: radial-gradient(closest-side, /* fades to nothing inside the box, so no straight edge across the sky */
    color-mix(in oklab, var(--brand-shadow) 44%, transparent) 0%,
    color-mix(in oklab, var(--brand-shadow) 26%, transparent) 55%,
    transparent 100%);
}
.chapter .scene:empty { display: none; } /* no JS: no animation */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.btn-film {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  background: var(--brand-snow); color: var(--brand-deep-sea);
  transition: transform 200ms var(--ease), background 200ms;
}
.btn-film:hover { transform: translateY(-1px); background: #fff; }
.btn-film.ghost { background: transparent; color: var(--brand-snow); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 78%, transparent); }
.btn-film.solid { background: var(--brand-deep-sea); color: var(--brand-snow); }
.btn-film:focus-visible, .film-dots button:focus-visible, .film-next:focus-visible, .film-skip:focus-visible {
  outline: 2px solid var(--brand-glacier); outline-offset: 3px;
}

/* controls exist only when film.js runs */
.film-media, .film-dots, .film-next { display: none; }

/* ---------- film mode ---------- */
html.film-locked, html.film-locked body { overflow: hidden; }
html.film-on .film { /* under everything: a 24 px copy of the first photo, so the sky is there before the photo itself */
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--brand-deep-sea) url("data:image/webp;base64,UklGRsYAAABXRUJQVlA4ILoAAABQBACdASoYAA4APsFOoEqnpCMhsAgA8BgJQBOiZAAHz/7r+4lpQvsTHesAAP61rdlKWt39yxf2d62J15ejzn8tgq3tcOXcbO5nB1LtFf8uVLeyXSW6B9MgKbpoDMP8bPZTDcAG3ERhRl+OQ3CxX9S+FkclXFDu5SO36lktW31xhyxbu7I6l11sxil+6fqk4Y8df+SWCGLqHcqNllN3plGgIycRHxXCnwPL/FX8p0zKo3h7tCiOfgQAAAA=") center / cover no-repeat;
}
@media (max-width: 767px), (orientation: portrait) {
  html.film-on .film { background-image: url("data:image/webp;base64,UklGRiIBAABXRUJQVlA4IBYBAADQBgCdASoYACoAPsFUo0ynpKMiMBVYAPAYCUAX595IgMnjdDZO4eyGAbyVkzxojozWqqjEf/Mn91ShoYPiAkAA/vtK+XKqfSAeM6/wxHUIzoKa/q0B53LOyQEw5gERuuVwTTx75nMJ5GV8SSv8fib1XHuvqjaBAFW5u2WSZBpJhucTcvpz5hgEPpHdD1a9ry0viSPIs6K23RTcDFd8aSvge3e29huVLFZtrBMm8aZL2x6Si+yHm3Jo5Rl6gWTO/f9BP0w8g00XKshFFtinmbzFSJLrOeaB0vaxSRqk3xt3GoyVWzLjHocov1Oy/ouIrWQqv4lCeDA/V0CNI1hoLS+nyThycCPQqqJIEnOipPj2KaKoZyVgAA=="); }
}
html.film-on .film-media { display: block; position: absolute; inset: 0; }
.film-media video, .film-media img, .film-veil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.film-video { opacity: 0; }
.film-video.is-on { opacity: 1; }
.film-photo img { transition: opacity 400ms var(--ease); }
.film-photo img.is-hidden { opacity: 0; transition-duration: 300ms; }
.film-veil { background: var(--brand-snow); opacity: 0; transition: opacity 300ms var(--ease); pointer-events: none; }
.film-veil.is-on { opacity: 1; }
.film-veil.is-dark { background: var(--brand-shadow); } /* reduced motion: no white flashes */

html.film-on .chapter {
  position: absolute; inset: 0; min-height: 0; background: none;
  visibility: hidden; transition: visibility 0s 250ms;
}
html.film-on .chapter.is-current { visibility: visible; transition-delay: 0s; }
html.film-on .chapter [data-line] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
html.film-on .chapter.is-in [data-line] {
  opacity: 1; transform: none;
  transition-duration: 700ms; transition-delay: calc(var(--i, 0) * 110ms);
}

html.film-on .film-dots {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 2;
  transition: opacity 300ms;
}
.film-dots button { /* 24 px target, 10 px dot */
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
}
.film-dots button::before {
  content: ""; position: absolute; left: 7px; top: 7px; width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in oklab, var(--brand-snow) 45%, transparent);
  transition: background 200ms, transform 200ms;
}
.film-dots button:hover::before { transform: scale(1.3); }
.film-dots button[aria-current="true"]::before { background: var(--brand-snow); transform: scale(1.3); }
.film-skip {
  margin-top: 10px; writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in oklab, var(--brand-snow) 80%, transparent);
}
html.film-on .film-next {
  display: inline-flex; align-items: center; gap: 8px;
  position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2;
  padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in oklab, var(--brand-shadow) 35%, transparent);
  color: var(--brand-snow);
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  transform: translateX(-50%);
  animation: film-nudge 2.4s var(--ease) infinite;
  transition: opacity 300ms;
}
.film-next b { font-weight: 400; }
@keyframes film-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
.film.is-released .film-dots, .film.is-released .film-next { opacity: 0; pointer-events: none; }
/* released: the chapter text fades so it doesn't peek out beside the page panels; scrolling back into the film restores it */
html.film-on .film.is-released .chapter [data-line] { opacity: 0; transition: opacity 300ms var(--ease); }
html.film-on .film.is-released .chapter.is-current { visibility: hidden; transition-delay: 300ms; }
html.film-on #page { position: relative; z-index: 1; margin-top: 100vh; margin-top: 100svh; }

/* ---------- the page after the film ---------- */
#page { padding: 12vh 24px 24px; }
.panel {
  max-width: 1120px; margin: 0 auto 28px; padding: 56px 56px 48px;
  background: color-mix(in oklab, var(--brand-paper) 95%, transparent);
  border-radius: 6px; color: var(--brand-ink);
  box-shadow: 0 30px 80px -40px rgba(5, 24, 33, 0.45);
}
.panel h2 {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 32px; color: var(--brand-deep-sea);
}
.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1023px) and (min-width: 768px) { /* three columns get cramped: one card per row, animation beside the words */
  .build-grid { grid-template-columns: 1fr; gap: 20px; }
  .build-card { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px; align-items: center; }
  .build-card .illo { grid-row: 1 / 3; }
  .build-card h3 { margin-top: 0; align-self: end; }
  .build-card p { align-self: start; }
}
.build-card h3 { font-size: 18px; font-weight: 600; margin: 18px 0 6px; color: var(--brand-deep-sea); }
.build-card p { margin: 0; color: var(--brand-ink-mut); font-size: 15px; }
.illo { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--brand-bg); overflow: hidden; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps li { border-top: 1px solid var(--brand-edge); padding-top: 18px; }
.steps .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--brand-current); }
.steps p { margin: 10px 0 0; font-size: 17px; }
.faq details { border-top: 1px solid var(--brand-edge); padding: 18px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--brand-edge); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--brand-current); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; max-width: 640px; color: var(--brand-ink-mut); }
.close { text-align: center; }
.close h2 { margin-bottom: 28px; }
.close .aside { margin: 26px 0 0; font-size: 15px; color: var(--brand-ink-mut); }
.close .aside a { color: var(--brand-current); text-decoration: underline; text-underline-offset: 3px; }
.site-foot {
  max-width: 1120px; margin: 0 auto; padding: 24px 32px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--brand-ink-mut);
  background: color-mix(in oklab, var(--brand-paper) 95%, transparent); border-radius: 6px;
}
.site-foot a:hover { color: var(--brand-deep-sea); }

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .site-head { padding: 20px; }
  .site-head { gap: 10px; }
  .site-head > nav { margin-left: auto; }
  .site-head > nav a:not(:last-child) { display: none; }
  .site-menu { display: block; }
  .chapter { padding: 84px 34px calc(76px + env(safe-area-inset-bottom)); }
  .chapter .scene { height: clamp(150px, 30svh, 250px); margin-bottom: 20px; }
  .chapter .scene[data-illo="robert"] { height: clamp(104px, 17svh, 140px); }
  .chapter .scene:is([data-illo="vortex"], [data-illo="dashboard"], [data-illo="onion"]) { height: clamp(210px, 35svh, 300px); }
  html.film-on .film-dots { right: 6px; }
  .film-skip { display: none; }
  #page { padding: 10vh 12px 12px; }
  .panel { padding: 32px 22px; }
  .build-grid, .steps { grid-template-columns: 1fr; }
}

/* ---------- reduced motion: fades stay, movement goes ---------- */
@media (prefers-reduced-motion: reduce) {
  html.film-on .chapter [data-line] { transform: none; transition-property: opacity; }
  html.film-on .film-next { animation: none; }
  .btn-film:hover { transform: none; }
}

/* ---------- animations (assets/illustrations.js) ----------
   Everything animated reads --play: paused by default, at staggered points, so a still frame
   (reduced motion, off screen, hidden chapter) still tells the story. Cards on the page play
   while on screen (.is-playing); a chapter's animation plays while that chapter is showing. */
@media (prefers-reduced-motion: no-preference) { /* reduced motion keeps every animation on its still frame */
  .is-playing, html.film-on .film:not(.is-released) .chapter.is-in .scene { --play: running; }
}

/* agents: tasks move inbox -> agents -> you approve -> sent */
.ag {
  --px: 12px; --py: 12px; --g: 6px; --col: calc((100% - 2 * var(--px) - 3 * var(--g)) / 4);
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); padding: var(--py) var(--px);
}
.ag-col { border-radius: 4px; padding: 8px 6px; background: color-mix(in oklab, var(--brand-paper) 70%, transparent); }
.ag-h, .os-k { display: block; font: 500 9px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-ink-dim); }
.ag-who { display: block; margin-top: 6px; font: 500 9px/1.2 var(--font-mono); letter-spacing: 0.06em; color: var(--brand-current); }
.ag-card {
  position: absolute; left: calc(var(--px) + 4px); width: calc(var(--col) - 8px); padding: 6px 7px; border-radius: 4px;
  background: #fff; box-shadow: 0 4px 12px -6px rgba(5, 24, 33, 0.35);
  font-size: 10px; line-height: 1.25; color: var(--brand-ink-2);
  animation: ag-move 9s var(--ease) infinite both;
  animation-delay: calc(var(--d) * -1);
  animation-play-state: var(--play, paused);
}
.ag-card:nth-of-type(1) { top: 34%; }
.ag-card:nth-of-type(2) { top: 54%; }
.ag-card:nth-of-type(3) { top: 74%; }
.ag-card::after { content: " \2713"; color: var(--brand-current); font-weight: 700; opacity: 0; animation: inherit; animation-name: ag-check; }
@keyframes ag-move {
  0%, 12% { left: calc(var(--px) + 4px); }
  25%, 40% { left: calc(var(--px) + var(--col) + var(--g) + 4px); }
  52%, 66% { left: calc(var(--px) + 2 * (var(--col) + var(--g)) + 4px); }
  78%, 100% { left: calc(var(--px) + 3 * (var(--col) + var(--g)) + 4px); }
}
@keyframes ag-check { 0%, 60% { opacity: 0; } 66%, 100% { opacity: 1; } }

/* AI operating system: a request lights up the skills, tools and knowledge it uses */
.os { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.os-req { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: var(--brand-deep-sea); color: var(--brand-snow); font-size: 11px; }
.os-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.os-k { width: 100%; }
.os-t {
  --t-bg: #fff; --t-fg: var(--brand-ink-2);
  padding: 5px 9px; border-radius: 4px; background: var(--t-bg); color: var(--t-fg); font-size: 11px;
  box-shadow: inset 0 0 0 1px var(--brand-edge-soft);
  animation: os-lit 7s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.6s - 2s);
  animation-play-state: var(--play, paused);
}
@keyframes os-lit { 0%, 100% { background: var(--t-bg); color: var(--t-fg); } 8%, 30% { background: var(--brand-ice); color: #fff; } 40% { background: var(--t-bg); color: var(--t-fg); } }

/* second brain: a question finds the notes it needs */
.br { position: absolute; inset: 0; width: 100%; height: 100%; }
.br line { stroke: var(--brand-mist); stroke-width: 1; }
.br-n circle { fill: var(--brand-current); }
.br text { font: 10px var(--font-body); fill: var(--brand-ink-2); }
.br-q rect { fill: #fff; stroke: var(--brand-edge); }
.br-a rect { fill: var(--brand-deep-sea); }
.br-a text { fill: var(--brand-snow); }
.br-q, .br-a, .br-hit circle { animation: 8s var(--ease) infinite; animation-delay: -5s; animation-play-state: var(--play, paused); }
.br-q { animation-name: br-q; }
.br-a { animation-name: br-a; }
.br-hit circle { animation-name: br-hit; transform-box: fill-box; transform-origin: center; }
@keyframes br-q { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes br-a { 0%, 35% { opacity: 0; } 45%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes br-hit { 0%, 18% { fill: var(--brand-current); transform: scale(1); } 25%, 80% { fill: var(--brand-ice); transform: scale(1.6); } 90%, 100% { fill: var(--brand-current); transform: scale(1); } }

/* ---------- the same animations on the photo: light on dark glass, bigger type ---------- */
.scene .ag { --px: 34px; --py: 30px; --g: 10px; }
.scene .ag-col { background: color-mix(in oklab, var(--brand-snow) 8%, transparent); border-radius: 8px; padding: 10px 8px; }
.scene .ag-h, .scene .os-k { font-size: 10px; color: color-mix(in oklab, var(--brand-snow) 86%, transparent); }
.scene .ag-who { font-size: 10px; color: var(--brand-glacier); }
.scene .ag-card { font-size: 12px; padding: 8px 9px; border-radius: 6px; background: color-mix(in oklab, var(--brand-snow) 94%, transparent); box-shadow: 0 8px 20px -10px rgba(5, 24, 33, 0.6); }
.scene .os { padding: 30px 34px; gap: 12px; align-items: center; text-align: center; }
.scene .os-req { align-self: center; }
.scene .os-row { justify-content: center; }
.scene .os-req { background: var(--brand-snow); color: var(--brand-deep-sea); font-size: 13px; font-weight: 500; }
.scene .os-t { --t-bg: color-mix(in oklab, var(--brand-snow) 12%, transparent); --t-fg: var(--brand-snow); font-size: 14px; padding: 8px 14px; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 22%, transparent); }

/* chapter 2: AI tools on one side, the real work on the other, never joined up */
.gap { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 8px; padding: 30px 40px; }
.gap-col { display: flex; flex-direction: column; gap: 8px; }
.gap-h { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, var(--brand-snow) 88%, transparent); margin-bottom: 2px; }
.gap-c {
  padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: color-mix(in oklab, var(--brand-snow) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 24%, transparent);
  animation: gap-bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); animation-play-state: var(--play, paused);
}
.gap-col.is-work .gap-c { background: color-mix(in oklab, var(--brand-snow) 90%, transparent); color: var(--brand-deep-sea); box-shadow: none; animation: none; }
@keyframes gap-bob { 0%, 100% { transform: translateY(0); opacity: 0.78; } 50% { transform: translateY(-4px); opacity: 1; } }
.gap-mid { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.gap-line { position: absolute; left: 0; right: 0; top: 50%; }
.gap-line::before, .gap-line::after {
  content: ""; position: absolute; top: -1px; width: 38%; border-top: 2px dashed var(--brand-glacier);
  animation: gap-draw 4s var(--ease) infinite; animation-delay: -2.6s; animation-play-state: var(--play, paused);
}
.gap-line::before { left: 0; transform-origin: left; }
.gap-line::after { right: 0; transform-origin: right; }
@keyframes gap-draw { 0% { transform: scaleX(0); opacity: 0; } 15% { opacity: 1; } 55%, 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.gap-x {
  margin-top: 48px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-glacier);
  animation: gap-x 4s infinite; animation-delay: -2.6s; animation-play-state: var(--play, paused);
}
@keyframes gap-x { 0%, 45% { opacity: 0.45; } 60%, 85% { opacity: 1; } 100% { opacity: 0.45; } }

/* chapter 6: the numbers behind "Hi, I'm Robert" */
.st { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 12px; padding: 26px 34px; }
.st-t {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center;
  padding: 8px; border-radius: 12px; font-size: 12px; line-height: 1.3; color: color-mix(in oklab, var(--brand-snow) 82%, transparent);
  background: color-mix(in oklab, var(--brand-snow) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 18%, transparent);
  animation: st-glow 6s var(--ease) infinite; animation-delay: calc(var(--i) * 2s - 1s); animation-play-state: var(--play, paused);
}
.st-t b { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 2.6vw, 34px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: var(--brand-snow); }
@keyframes st-glow {
  0%, 40%, 100% { background: color-mix(in oklab, var(--brand-snow) 8%, transparent); }
  8%, 30% { background: color-mix(in oklab, var(--brand-snow) 22%, transparent); }
}

/* line icons inside the chapter animations */
.scene .wf-n > svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--brand-glacier); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene .sm { display: none; }

/* chapter 1: the AI terms swirl in out of focus and settle, sharp, onto one clean ring of light around your business.
   The light is a looping Grok video keyed onto the photo (assets/illustrations.js): only the light lands on the mountains.
   Sizes hang off the pane's height, capped by its width on phones, so the ring always fits. */
.vx { position: absolute; inset: 0; }
.vx-cv {
  position: absolute; left: 50%; top: 50%; width: min(231cqh, 112cqw); aspect-ratio: 16 / 9; translate: -50% -50%;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.vx.has-video .vx-cv { opacity: 1; }
.vx-core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap;
  font: 200 clamp(20px, 7cqh, 32px)/1 var(--font-display); letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 0 24px rgba(90, 163, 194, 0.55), 0 1px 10px rgba(5, 24, 33, 0.9);
}
.vx-core em { font-family: var(--font-italic); font-style: italic; font-weight: 300; color: var(--brand-glacier); }
.vx-w { /* placed every frame by assets/illustrations.js; hidden until then */
  position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform, filter, opacity;
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: var(--brand-snow);
  text-shadow: 0 0 14px rgba(164, 202, 216, 0.75), 0 1px 8px rgba(5, 24, 33, 0.9);
}

/* chapter 3: you hand off a job; a project manager delegates to specialists, who use tools, skills, knowledge and sub-agents; it comes back to you (10 s loop) */
.wf { position: absolute; inset: 0; }
.wf-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-lines path { fill: none; stroke: color-mix(in oklab, var(--brand-snow) 30%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wf-lines .wf-back { stroke-dasharray: 4 5; stroke: color-mix(in oklab, var(--brand-glacier) 70%, transparent); }
.wf-lines .wf-hot { stroke: var(--brand-glacier); stroke-opacity: 0.25; animation: wf-hot 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
@keyframes wf-hot { 0%, 30%, 58%, 100% { stroke-opacity: 0.25; } 36%, 52% { stroke-opacity: 1; } }
.wf-n {
  position: absolute; z-index: 1; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 500; color: var(--brand-snow);
  background: color-mix(in oklab, var(--brand-shadow) 62%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 32%, transparent);
}
.wf-you { background: var(--brand-snow); color: var(--brand-deep-sea); font-weight: 600; }
.wf-you > svg { stroke: var(--brand-current); }
.wf-pm { border-radius: 14px; padding: 8px 14px; }
.wf-pm > span { display: flex; flex-direction: column; line-height: 1.25; }
.wf-model { display: block; height: 1.3em; overflow: hidden; font: 500 10px/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--brand-glacier); }
.wf-model span { display: block; animation: wf-model 12s var(--ease) infinite; animation-play-state: var(--play, paused); }
@keyframes wf-model {
  0%, 14% { transform: translateY(0); } 16.6%, 31% { transform: translateY(-100%); } 33.3%, 47% { transform: translateY(-200%); }
  50%, 64% { transform: translateY(-300%); } 66.6%, 81% { transform: translateY(-400%); } 83.3%, 97% { transform: translateY(-500%); } 100% { transform: translateY(-600%); }
}
.wf-sp { animation: wf-sp 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
@keyframes wf-sp { 0%, 28%, 58%, 100% { background: color-mix(in oklab, var(--brand-shadow) 62%, transparent); } 31%, 55% { background: color-mix(in oklab, var(--brand-ice) 70%, transparent); } }
.wf-r { font-size: 11.5px; padding: 6px 11px; color: color-mix(in oklab, var(--brand-snow) 85%, transparent); animation: wf-r 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
.wf-r2 { animation-delay: 0.25s; } .wf-r3 { animation-delay: 0.5s; } .wf-r4 { animation-delay: 0.75s; }
@keyframes wf-r {
  0%, 32%, 58%, 100% { background: color-mix(in oklab, var(--brand-shadow) 62%, transparent); color: color-mix(in oklab, var(--brand-snow) 85%, transparent); }
  38%, 52% { background: var(--brand-glacier); color: var(--brand-deep-sea); }
}
.wf-sub { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--brand-glacier); box-shadow: 0 0 10px rgba(164, 202, 216, 0.8); transform: scale(0); animation: wf-sub 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
.wf-sub + .wf-sub { animation-delay: 0.3s; } .wf-sub + .wf-sub + .wf-sub { animation-delay: 0.6s; }
@keyframes wf-sub { 0%, 40%, 60%, 100% { transform: scale(0); } 44%, 55% { transform: scale(1); } }
.wf-flag { z-index: 2; padding: 5px 9px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: none; opacity: 0; animation: 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
.wf-job { background: var(--brand-glacier); color: var(--brand-deep-sea); animation-name: wf-job; }
.wf-ok { background: var(--brand-snow); color: var(--brand-deep-sea); animation-name: wf-ok; }
@keyframes wf-job { 0%, 1% { opacity: 0; transform: translate(-50%, -20%); } 3%, 12% { opacity: 1; transform: translate(-50%, -50%); } 16%, 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes wf-ok { 0%, 82% { opacity: 0; transform: translate(-50%, -20%); } 85%, 97% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
.wf-p { position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(164, 202, 216, 0.9); opacity: 0; animation: 10s linear infinite; animation-play-state: var(--play, paused); }
.wf-p0 { animation-name: wf-p0; } .wf-p1 { animation-name: wf-p1; } .wf-p2 { animation-name: wf-p2; } .wf-p3 { animation-name: wf-p3; } .wf-pr { animation-name: wf-pr; }
@keyframes wf-p0 { 0%, 8% { left: 10%; top: 50%; opacity: 0; } 9% { opacity: 1; } 18% { left: 31%; top: 50%; opacity: 1; } 19%, 100% { left: 31%; top: 50%; opacity: 0; } }
@keyframes wf-p1 { 0%, 18% { left: 31%; top: 50%; opacity: 0; } 19% { opacity: 1; } 29% { left: 54%; top: 24%; opacity: 1; } 30%, 55% { left: 54%; top: 24%; opacity: 0; } 56% { opacity: 1; } 67% { left: 31%; top: 50%; opacity: 1; } 68%, 100% { left: 31%; top: 50%; opacity: 0; } }
@keyframes wf-p2 { 0%, 18% { left: 31%; top: 50%; opacity: 0; } 19% { opacity: 1; } 29% { left: 54%; top: 50%; opacity: 1; } 30%, 55% { left: 54%; top: 50%; opacity: 0; } 56% { opacity: 1; } 67% { left: 31%; top: 50%; opacity: 1; } 68%, 100% { left: 31%; top: 50%; opacity: 0; } }
@keyframes wf-p3 { 0%, 18% { left: 31%; top: 50%; opacity: 0; } 19% { opacity: 1; } 29% { left: 54%; top: 76%; opacity: 1; } 30%, 55% { left: 54%; top: 76%; opacity: 0; } 56% { opacity: 1; } 67% { left: 31%; top: 50%; opacity: 1; } 68%, 100% { left: 31%; top: 50%; opacity: 0; } }
@keyframes wf-pr { /* back to you along the dashed arc */
  0%, 68% { left: 31%; top: 56%; opacity: 0; } 69% { opacity: 1; }
  71.5% { left: 25.75%; top: 70.6%; } 75% { left: 20.5%; top: 75.5%; } 78.5% { left: 15.25%; top: 70.6%; }
  82% { left: 10%; top: 56%; opacity: 1; } 83%, 100% { left: 10%; top: 56%; opacity: 0; }
}

/* chapter 4: one click on the dashboard runs the workflow on the intelligence layer underneath (10 s loop) */
.db { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 26px 34px 24px; }
.db-win { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: color-mix(in oklab, var(--brand-snow) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 26%, transparent); }
.db-bar { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid color-mix(in oklab, var(--brand-snow) 14%, transparent); font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--brand-snow) 75%, transparent); }
.db-bar i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--brand-snow) 30%, transparent); }
.db-bar span { flex: 1; margin-left: 8px; }
.db-bar b { font-weight: 500; color: #9fe3b0; }
.db-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 16px; padding: 12px 14px; }
.db-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.db-btn { display: inline-grid; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--brand-snow); color: var(--brand-deep-sea); animation: db-btn 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
.db-btn > span { grid-area: 1 / 1; text-align: center; opacity: 0; animation: 10s infinite; animation-play-state: var(--play, paused); }
.db-btn .db-b0 { animation-name: db-b0; } .db-btn .db-b1 { animation-name: db-b1; } .db-btn .db-b2 { animation-name: db-b2; } /* beat the shorthand above */
@keyframes db-btn {
  0%, 10% { transform: scale(1); background: var(--brand-snow); color: var(--brand-deep-sea); }
  11.5% { transform: scale(0.92); } 13% { transform: scale(1); background: var(--brand-ice); color: #fff; }
  84% { background: var(--brand-ice); color: #fff; } 86%, 100% { background: var(--brand-snow); color: var(--brand-deep-sea); }
}
@keyframes db-b0 { 0%, 12% { opacity: 1; } 13%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes db-b1 { 0%, 12% { opacity: 0; } 13%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes db-b2 { 0%, 84% { opacity: 0; } 85%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
.db-k { margin-top: 8px; font: 500 9px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--brand-snow) 85%, transparent); }
.db-num { display: block; height: 1.15em; overflow: hidden; font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1.15; color: #fff; }
.db-num span { display: block; animation: db-num 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
@keyframes db-num { 0%, 34% { transform: translateY(0); } 40% { transform: translateY(-100%); } 46% { transform: translateY(-200%); } 52%, 96% { transform: translateY(-300%); } 100% { transform: translateY(0); } }
.db-bars { display: flex; align-items: flex-end; gap: 5px; height: 36px; }
.db-bars i { width: 10px; height: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(var(--brand-glacier), var(--brand-ice)); transform-origin: bottom; transform: scaleY(calc(var(--h) * 0.15)); animation: db-bar 10s var(--ease) infinite; animation-delay: calc(var(--i) * 60ms); animation-play-state: var(--play, paused); }
@keyframes db-bar { 0%, 34% { transform: scaleY(calc(var(--h) * 0.15)); } 50%, 96% { transform: scaleY(var(--h)); } 100% { transform: scaleY(calc(var(--h) * 0.15)); } }
.db-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 9px; font-size: 13px; }
.db-s { display: flex; align-items: center; gap: 9px; color: color-mix(in oklab, var(--brand-snow) 78%, transparent); animation: 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
.db-s i { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--brand-snow) 40%, transparent); }
.db-s i::before, .db-s i::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; opacity: 0; animation-play-state: var(--play, paused); }
.db-s i::before { border: 1.5px solid transparent; border-top-color: var(--brand-glacier); } /* spinner */
.db-s i::after { content: "\2713"; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; background: var(--brand-ice); } /* done */
@keyframes db-spin { to { transform: rotate(360deg); } }
.db-s1 { animation-name: db-t1; } .db-s1 i::before { animation: db-spin 0.8s linear infinite, db-r1 10s infinite; animation-play-state: var(--play, paused); } .db-s1 i::after { animation: db-d1 10s infinite; animation-play-state: var(--play, paused); }
.db-s2 { animation-name: db-t2; } .db-s2 i::before { animation: db-spin 0.8s linear infinite, db-r2 10s infinite; animation-play-state: var(--play, paused); } .db-s2 i::after { animation: db-d2 10s infinite; animation-play-state: var(--play, paused); }
.db-s3 { animation-name: db-t3; } .db-s3 i::before { animation: db-spin 0.8s linear infinite, db-r3 10s infinite; animation-play-state: var(--play, paused); } .db-s3 i::after { animation: db-d3 10s infinite; animation-play-state: var(--play, paused); }
.db-s4 { animation-name: db-t4; } .db-s4 i::before { animation: db-spin 0.8s linear infinite, db-r4 10s infinite; animation-play-state: var(--play, paused); } .db-s4 i::after { animation: db-d4 10s infinite; animation-play-state: var(--play, paused); }
/* running windows: 1 = 13-33 %, 2 = 33-53 %, 3 = 53-70 %, 4 = 70-84 % */
@keyframes db-r1 { 0%, 13%, 33%, 100% { opacity: 0; } 14%, 32% { opacity: 1; } }
@keyframes db-r2 { 0%, 33%, 53%, 100% { opacity: 0; } 34%, 52% { opacity: 1; } }
@keyframes db-r3 { 0%, 53%, 70%, 100% { opacity: 0; } 54%, 69% { opacity: 1; } }
@keyframes db-r4 { 0%, 70%, 84%, 100% { opacity: 0; } 71%, 83% { opacity: 1; } }
@keyframes db-d1 { 0%, 33% { opacity: 0; } 34%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes db-d2 { 0%, 53% { opacity: 0; } 54%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes db-d3 { 0%, 70% { opacity: 0; } 71%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes db-d4 { 0%, 84% { opacity: 0; } 85%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes db-t1 { 0%, 13%, 100% { color: color-mix(in oklab, var(--brand-snow) 78%, transparent); } 14%, 97% { color: var(--brand-snow); } }
@keyframes db-t2 { 0%, 33%, 100% { color: color-mix(in oklab, var(--brand-snow) 78%, transparent); } 34%, 97% { color: var(--brand-snow); } }
@keyframes db-t3 { 0%, 53%, 100% { color: color-mix(in oklab, var(--brand-snow) 78%, transparent); } 54%, 97% { color: var(--brand-snow); } }
@keyframes db-t4 { 0%, 70%, 100% { color: color-mix(in oklab, var(--brand-snow) 78%, transparent); } 71%, 97% { color: var(--brand-snow); } }
.db-cursor { position: absolute; z-index: 3; width: 18px; height: 18px; fill: #fff; stroke: var(--brand-deep-sea); stroke-width: 1.2; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); opacity: 0; animation: db-cur 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
@keyframes db-cur {
  0% { left: 55%; top: 95%; opacity: 0; } 3% { opacity: 1; }
  10% { left: 13%; top: 32%; transform: scale(1); } 11.5% { transform: scale(0.8); }
  13% { left: 13%; top: 32%; transform: scale(1); opacity: 1; } 20%, 100% { left: 30%; top: 75%; opacity: 0; }
}
.db-layer { /* the intelligence layer: always humming */
  position: relative; flex: none; height: 26px; border-radius: 999px; display: grid; place-items: center;
  font: 600 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-deep-sea);
  background: linear-gradient(90deg, rgba(164, 202, 216, 0.45), rgba(244, 249, 251, 0.95), rgba(164, 202, 216, 0.45)) 0 0 / 200% 100%;
  box-shadow: 0 0 22px rgba(164, 202, 216, 0.55);
  animation: db-layer 4s linear infinite; animation-play-state: var(--play, paused);
}
.db-layer::before { /* wired up into the dashboard */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 100%; height: 10px;
  background: repeating-linear-gradient(90deg, rgba(164, 202, 216, 0.75) 0 1.5px, transparent 1.5px 12.5%);
}
@keyframes db-layer { to { background-position: -200% 0; } }
.db-srcs { flex: none; display: flex; justify-content: space-around; gap: 8px; }
.db-src { position: relative; display: flex; white-space: nowrap; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; color: color-mix(in oklab, var(--brand-snow) 85%, transparent); background: color-mix(in oklab, var(--brand-shadow) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 28%, transparent); animation: 10s var(--ease) infinite; animation-play-state: var(--play, paused); }
.db-src::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 10px; background: color-mix(in oklab, var(--brand-snow) 40%, transparent); }
.db-src i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-glacier); }
.db-src1 { animation-name: db-src1; } .db-src2 { animation-name: db-src2; } .db-src3 { animation-name: db-src3; } .db-src4 { animation-name: db-src4; }
@keyframes db-src1 { 0%, 12%, 34%, 100% { background: color-mix(in oklab, var(--brand-shadow) 55%, transparent); color: color-mix(in oklab, var(--brand-snow) 85%, transparent); } 14%, 32% { background: var(--brand-glacier); color: var(--brand-deep-sea); } }
@keyframes db-src2 { 0%, 32%, 54%, 100% { background: color-mix(in oklab, var(--brand-shadow) 55%, transparent); color: color-mix(in oklab, var(--brand-snow) 85%, transparent); } 34%, 52% { background: var(--brand-glacier); color: var(--brand-deep-sea); } }
@keyframes db-src3 { 0%, 52%, 71%, 100% { background: color-mix(in oklab, var(--brand-shadow) 55%, transparent); color: color-mix(in oklab, var(--brand-snow) 85%, transparent); } 54%, 69% { background: var(--brand-glacier); color: var(--brand-deep-sea); } }
@keyframes db-src4 { 0%, 69%, 85%, 100% { background: color-mix(in oklab, var(--brand-shadow) 55%, transparent); color: color-mix(in oklab, var(--brand-snow) 85%, transparent); } 71%, 83% { background: var(--brand-glacier); color: var(--brand-deep-sea); } }

/* chapter 5: training peels the system back one layer at a time (12 s loop) */
.on { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6%; padding: 24px 40px; }
.on-core { --D: min(78cqh, 42cqw); position: relative; flex: none; width: var(--D); height: var(--D); perspective: 700px; }
.on-l {
  --k: 0; position: absolute; left: 50%; top: 50%; width: calc(var(--D) * (1 - var(--k) * 0.19)); aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, -50%); transform-origin: 0% 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--brand-glacier) calc(18% + var(--k) * 12%), transparent), color-mix(in oklab, var(--brand-current) 30%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-snow) 40%, transparent), 0 6px 18px -8px rgba(3, 15, 22, 0.6);
  animation: 12s var(--ease) infinite; animation-play-state: var(--play, paused);
}
.on-l1 { --k: 1; } .on-l2 { --k: 2; } .on-l3 { --k: 3; }
.on-l4 { --k: 4; background: radial-gradient(circle at 40% 35%, #fff, var(--brand-glacier)); }
.on-l b { position: absolute; left: 50%; top: 0; height: calc(var(--D) * 0.095); display: grid; place-items: center; transform: translateX(-50%); font: 600 10px/1 var(--font-mono); color: color-mix(in oklab, var(--brand-snow) 80%, transparent); }
.on-l4 b { top: 50%; height: auto; transform: translate(-50%, -50%); font-size: 13px; color: var(--brand-deep-sea); }
.on-l0 { animation-name: on-p0; } .on-l1 { animation-name: on-p1; } .on-l2 { animation-name: on-p2; } .on-l3 { animation-name: on-p3; }
@keyframes on-p0 { 0%, 14% { transform: translate(-50%, -50%); opacity: 1; } 17% { opacity: 0.35; } 20%, 90% { transform: translate(-50%, -50%) rotateY(100deg); opacity: 0; } 97%, 100% { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes on-p1 { 0%, 32% { transform: translate(-50%, -50%); opacity: 1; } 35% { opacity: 0.35; } 38%, 90% { transform: translate(-50%, -50%) rotateY(100deg); opacity: 0; } 97%, 100% { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes on-p2 { 0%, 50% { transform: translate(-50%, -50%); opacity: 1; } 53% { opacity: 0.35; } 56%, 90% { transform: translate(-50%, -50%) rotateY(100deg); opacity: 0; } 97%, 100% { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes on-p3 { 0%, 68% { transform: translate(-50%, -50%); opacity: 1; } 71% { opacity: 0.35; } 74%, 90% { transform: translate(-50%, -50%) rotateY(100deg); opacity: 0; } 97%, 100% { transform: translate(-50%, -50%); opacity: 1; } }
.on-cap { position: relative; flex: 1; max-width: 320px; height: 120px; }
.on-now { display: block; font: 500 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-glacier); }
.on-c { position: absolute; left: 0; right: 0; top: 22px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.4; color: color-mix(in oklab, var(--brand-snow) 82%, transparent); opacity: 0; animation: 12s var(--ease) infinite; animation-play-state: var(--play, paused); }
.on-c small { font: 500 9px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--brand-snow) 82%, transparent); }
.on-c b { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.on-c0 { animation-name: on-c0; } .on-c1 { animation-name: on-c1; } .on-c2 { animation-name: on-c2; } .on-c3 { animation-name: on-c3; } .on-c4 { animation-name: on-c4; }
@keyframes on-c0 { 0%, 15% { opacity: 1; transform: none; } 18%, 94% { opacity: 0; transform: translateY(6px); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes on-c1 { 0%, 16% { opacity: 0; transform: translateY(6px); } 19%, 33% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes on-c2 { 0%, 34% { opacity: 0; transform: translateY(6px); } 37%, 51% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes on-c3 { 0%, 52% { opacity: 0; transform: translateY(6px); } 55%, 69% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes on-c4 { 0%, 70% { opacity: 0; transform: translateY(6px); } 73%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: translateY(6px); } }

/* local first panel on the page */
.local-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.local-grid p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--brand-ink-2); }

/* phone: same animations, tighter */
@media (max-width: 767px) {
  .scene .ag { --px: 16px; --py: 18px; --g: 5px; }
  .scene .ag-card { font-size: 10px; padding: 6px; }
  .scene .ag-h, .scene .ag-who, .scene .os-k { font-size: 8.5px; }
  .scene .os { padding: 18px 16px; gap: 8px; }
  .scene .os-req, .scene .os-t { font-size: 11px; }
  .scene .os-t { padding: 5px 8px; }
  .gap { padding: 18px 16px; gap: 4px; grid-template-columns: 1fr 0.6fr 1fr; }
  .gap-c { font-size: 11px; padding: 6px 8px; }
  .gap-x { font-size: 8.5px; margin-top: 40px; }
  .st { gap: 6px; padding: 16px 16px; }
  .st-t { font-size: 10px; }
  .st-t b { font-size: 16px; }
  .scene .lg { display: none; } .scene .sm { display: inline; }
  .scene .wf-n > svg { width: 10px; height: 10px; }
  .vx-w { font-size: 12.5px; }
  .wf-n { font-size: 9.5px; padding: 4px 7px; gap: 4px; }
  .wf-pm { padding: 5px 8px; border-radius: 10px; } .wf-model { display: none; } /* the caption lists the models; the ticker widened the pill into "You" */
  .wf-r { font-size: 9px; padding: 4px 7px; } .wf-flag { font-size: 8px; padding: 3px 6px; }
  .wf-sub { display: none; }
  .db { padding: 16px 16px 14px; gap: 8px; }
  .db-bar { font-size: 8px; padding: 5px 8px; } .db-bar i { width: 5px; height: 5px; }
  .db-body { gap: 8px; padding: 8px 10px; grid-template-columns: 0.85fr 1.15fr; }
  .db-btn { font-size: 10.5px; padding: 5px 10px; } .db-k { font-size: 7.5px; margin-top: 4px; }
  .db-num { font-size: 16px; } .db-bars { height: 20px; gap: 3px; } .db-bars i { width: 6px; }
  .db-steps { font-size: 10px; gap: 5px; } .db-s { gap: 6px; } .db-s i { width: 11px; height: 11px; } .db-s i::after { font-size: 7px; }
  .db-layer { height: 20px; font-size: 8px; } .db-src { font-size: 9.5px; padding: 3px 7px; gap: 4px; } .db-srcs { gap: 4px; }
  .on { flex-direction: column; gap: 8px; padding: 16px; }
  .on-core { --D: min(56cqh, 60cqw); }
  .on-cap { width: 100%; max-width: none; height: 64px; text-align: center; }
  .on-c { top: 14px; font-size: 11px; gap: 2px; } .on-c b { font-size: 17px; }
  .local-grid { grid-template-columns: 1fr; gap: 16px; }
}