/* BAU AI motion tokens and site-wide micro-interactions (motion spec section 2 to 4).
   Animate transform, opacity and clip-path only. Hover is gated to fine pointers. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-story: 700ms;
  --rise-sm: 8px; --rise-md: 16px; --rise-lg: 28px;
  --stagger: 40ms; --stagger-lg: 80ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-story: 1ms; --rise-sm: 0px; --rise-md: 0px; --rise-lg: 0px; --stagger: 0ms; --stagger-lg: 0ms; }
}

/* never let a stray element push the page sideways on phones */
html, body { overflow-x: clip; }

/* reveal primitive, only after JS marks elements that start below the fold */
[data-reveal] { opacity: 0; transform: translateY(var(--rise-md)); }
[data-reveal][data-inview] { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

/* buttons: press feedback, arrow nudge */
.sn-cta, .btn, .cz-btn, .sx-btn, .nl-submit, .ct-submit, a.bg-ink, button.bg-ink, .cl-ghostbtn, .kx-more {
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sn-cta:active, .btn:active, .cz-btn:active, .sx-btn:active, .nl-submit:active, .ct-submit:active, a.bg-ink:active, button.bg-ink:active { transform: scale(0.97); transition-duration: var(--dur-instant); }
a svg[data-icon="lucide-arrow-right"], a .ar, a .arr, .lk svg, .ix-go span, .rx-go span { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a:hover svg[data-icon="lucide-arrow-right"], a:hover .ar, a:hover .arr, .lk:hover svg { transform: translateX(3px); }
  .sf-ai { transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); filter: grayscale(1); }
  .sf-ai:hover { transform: translateY(-2px); filter: none; }
}

/* header: solid with a hairline once the page scrolls */
.site-header .sn { transition: box-shadow var(--dur-base) var(--ease-out); }
html.is-scrolled .site-header .sn { box-shadow: 0 1px 0 #E9E6DF; }

/* founding cohort line: Join arrow nudges twice, then rests */
.cb-go span { display: inline-block; animation: cbNudge 6s var(--ease-out) 1.5s 2; }
@keyframes cbNudge { 0%, 88%, 100% { transform: none; } 94% { transform: translateX(3px); } }

/* page transitions between pages (cross-document view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease-out) both vt-fade-out; }
::view-transition-new(root) { animation: 280ms var(--ease-out) both vt-rise-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(8px); } }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }

/* focus is instant */
:focus-visible { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .cb-go span, .cb-dot { animation: none !important; }
  [data-reveal] { transform: none !important; }
}

/* ---------- Round 1: navigation motion ---------- */
/* mega menu: enters from just above, columns follow; switching menus cross-fades without re-entry */
@media (min-width: 961px) {
  .sn-panel { transform-origin: top center; transform: translateY(-4px) scale(0.98); transition: opacity 150ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 150ms; }
  .sn-item.is-open > .sn-panel { transform: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
  .sn-panel .sn-col, .sn-panel .sn-proof, .sn-panel .sn-strip { opacity: 0; transform: translateY(var(--rise-sm)); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  .sn-item.is-open > .sn-panel .sn-col, .sn-item.is-open > .sn-panel .sn-proof, .sn-item.is-open > .sn-panel .sn-strip { opacity: 1; transform: none; }
  .sn-item.is-open > .sn-panel .sn-col:nth-child(2) { transition-delay: 30ms; }
  .sn-item.is-open > .sn-panel .sn-col:nth-child(3), .sn-item.is-open > .sn-panel .sn-proof { transition-delay: 60ms; }
  .sn-item.is-open > .sn-panel .sn-strip { transition-delay: 90ms; }
  nav.sn.is-switch .sn-panel, nav.sn.is-switch .sn-panel * { transform: none !important; transition-delay: 0s !important; transition-duration: 120ms !important; }
  nav.sn.is-kb .sn-panel, nav.sn.is-kb .sn-panel * { transition: none !important; }
  /* the p. 47 chip in "See Clara at work" underlines once when the menu opens */
  .sn-proof-cite { position: relative; }
  .sn-proof-cite::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; }
  .sn-item.is-open .sn-proof-cite::after { transform: scaleX(1); transition: transform 240ms var(--ease-out) 220ms; }
  /* hover pill that slides under the top-level items */
  .sn-menu { position: relative; }
  .sn-pill { position: absolute; left: 0; top: 50%; height: 34px; width: 100px; margin-top: -17px; border-radius: 8px; background: #F4F3F1; z-index: 0; pointer-events: none; opacity: 0; transform: translateX(var(--px, 0)) scaleX(var(--pw, 1)); transform-origin: left center; transition: transform 200ms var(--ease-in-out), opacity 150ms var(--ease-out); }
  .sn-pill.on { opacity: 1; }
  .sn-pill.jump { transition: opacity 150ms var(--ease-out); }
  .sn-menu > .sn-item { position: relative; z-index: 1; }
  .sn-menu .sn-trigger:hover, .sn-menu .sn-top:hover { background: transparent !important; }
}

/* mobile drawer: a sheet from the right with a dimmed backdrop; items follow; drag right to close */
@media (max-width: 960px) {
  .sn-drawer { left: auto !important; right: 0; width: min(420px, 88vw); box-shadow: -1px 0 0 #E9E6DF; opacity: 1 !important; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-drawer), visibility 0s linear var(--dur-slow) !important; will-change: transform; }
  .sn-drawer.is-open { transform: translateX(0); transition: transform var(--dur-slow) var(--ease-drawer), visibility 0s !important; }
  .sn-drawer.is-drag { transition: none !important; }
  .sn-drawer > * { opacity: 0; transform: translateX(12px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
  .sn-drawer.is-open > * { opacity: 1; transform: none; }
  .sn-drawer.is-open > *:nth-child(2) { transition-delay: 30ms; } .sn-drawer.is-open > *:nth-child(3) { transition-delay: 60ms; }
  .sn-drawer.is-open > *:nth-child(4) { transition-delay: 90ms; } .sn-drawer.is-open > *:nth-child(5) { transition-delay: 120ms; }
  .sn-drawer.is-open > *:nth-child(6) { transition-delay: 150ms; } .sn-drawer.is-open > *:nth-child(n+7) { transition-delay: 180ms; }
  .sn-backdrop { position: fixed; inset: var(--sn-top, 64px) 0 0 0; z-index: 58; background: rgba(10,10,11,.4); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
  .sn-backdrop.on { opacity: var(--bo, 1); visibility: visible; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s; }
  .sn-drawer.is-drag ~ .sn-backdrop, .sn-backdrop.is-drag { transition: none; }
}

/* shared agent portrait between the home cards and the agent pages */
::view-transition-group(agent-clara), ::view-transition-group(agent-dora), ::view-transition-group(agent-nova), ::view-transition-group(agent-theo) { animation-duration: 420ms; animation-timing-function: var(--ease-in-out); }
::view-transition-old(agent-clara), ::view-transition-old(agent-dora), ::view-transition-old(agent-nova), ::view-transition-old(agent-theo),
::view-transition-new(agent-clara), ::view-transition-new(agent-dora), ::view-transition-new(agent-nova), ::view-transition-new(agent-theo) { height: 100%; object-fit: cover; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .sn-panel, .sn-panel *, .sn-drawer, .sn-drawer > *, .sn-backdrop, .sn-pill { transition: none !important; } }

/* iPhone: fields under 16px make Safari zoom the page on focus */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea { font-size: 16px !important; }
}

/* keyboard: every focusable thing shows a ring; a skip link is the first tab stop */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #5000A8 !important; outline-offset: 2px; }
.skip-link { position: fixed; left: 12px; top: 10px; z-index: 2147483000; padding: 10px 14px; border-radius: 8px; background: #0A0A0B; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* touch: footer links, the logo and standalone text links get a 32px+ tap area without changing the layout much */
@media (pointer: coarse) {
  .sf ul a, .sf-base-links a, .sf-cell p a { display: inline-block; padding: 7px 0; }
  .sn-logo { display: inline-flex; align-items: center; min-height: 40px; }
  .kb-more, .hover-line, .ag4-more, .ix-go, .rx-go, a.inline { padding-block: 6px; }
}

/* small status badges: never below 11px */
.pr-badge, .pai-tag, .tag-live, .tag-roadmap { font-size: 11px !important; }