/* Agent hero components: loader, header (desktop and phone), phone menu, hero copy, buttons, scene layer, bottom
   shade and exit overlay. Geometry reproduces the epiminds.com hero computed styles at 1440, 992/993, 768, 480/481,
   390 and 320 (systems/epiminds/tokens/observed.json). Breakpoints: 992px (tablet) and 480px (phone). */

:where(.ah-root, .ah-root *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.ah-root) { line-height: var(--ah-leading); scrollbar-width: none; }
:where(.ah-root)::-webkit-scrollbar { display: none; }
:where(.ah-root body) { margin: 0; background: var(--ah-color-surface-light); }
:where(.ah-root a) { color: inherit; text-decoration: none; }
:where(.ah-root img) { display: block; }

/* Scene layer: fixed full-viewport canvas behind the content. */
.ah-scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; display: block; }
.ah-scene > canvas { display: block; width: 100%; height: 100%; user-select: none; }
.ah-page { position: relative; z-index: 0; }

/* Loader: full-screen black with a thin progress ring and a percentage. */
.ah-loader { position: fixed; inset: 0; z-index: 2; background: var(--ah-color-loader-page); transition: opacity var(--ah-duration-loader-fade); }
.ah-loader__screen { position: fixed; inset: 0; height: 100dvh; width: 100dvw; display: flex; justify-content: center; align-items: center; background: var(--ah-color-stage); }
.ah-loader__ring { position: relative; display: flex; justify-content: center; align-items: center; width: var(--ah-loader-size); height: var(--ah-loader-size); }
.ah-loader__ring svg { position: absolute; inset: 0; overflow: visible; }
.ah-loader__track { stroke: var(--ah-color-loader-track); }
.ah-loader__progress { stroke: var(--ah-color-loader-progress); }
.ah-loader__text { position: absolute; display: block; font: 700 var(--ah-text-loader) / 1 var(--ah-font-loader); color: var(--ah-color-ink-inverse); text-align: center; }
.ah-loader[hidden] { display: none; }
.ah-preload .ah-page, .ah-preload .ah-header, .ah-preload .ah-mheader { opacity: 0; }

/* Header, 481px and wider: blurred translucent bar, logo left, links and an outlined CTA right. */
.ah-header { position: fixed; top: 0; left: 0; width: 100%; z-index: var(--ah-z-header); display: flex; flex-direction: column; align-items: center; background: var(--ah-color-header-scrim); backdrop-filter: blur(var(--ah-header-blur)); -webkit-backdrop-filter: blur(var(--ah-header-blur)); }
.ah-header__row { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; min-height: var(--ah-header-height); max-width: var(--ah-header-max-width); padding: 0 var(--ah-header-padding-x); }
.ah-logo { display: flex; gap: 2px; flex: 0 1 auto; }
.ah-logo img, .ah-logo svg { width: var(--ah-logo-width); height: auto; object-fit: contain; }
.ah-nav { display: flex; flex-direction: row; align-items: center; justify-content: end; gap: var(--ah-nav-gap); width: 100%; height: 16px; padding-right: var(--ah-nav-end-padding); }
.ah-nav a, .ah-menu__links a { font: 400 var(--ah-text-body) / 1 var(--ah-font-sans); color: var(--ah-color-ink-inverse); white-space: nowrap; display: inline-block; vertical-align: top; cursor: pointer; }
/* Labels may wrap: at 481px the reference's header and hero CTAs shrink until "Request Access" breaks onto two lines. */
.ah-button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--ah-button-gap); border-radius: var(--ah-radius); font: 500 var(--ah-text-body) / 1 var(--ah-font-sans); cursor: pointer; position: relative; }
.ah-button--outline { padding: var(--ah-button-padding-y) 0; border: var(--ah-hairline) solid var(--ah-color-hairline-on-dark); color: var(--ah-color-ink-inverse); }
.ah-header .ah-button--outline { width: var(--ah-header-cta-width); flex: 0 1 auto; }
.ah-button--solid { padding: var(--ah-button-padding-y) var(--ah-button-padding-x); background: var(--ah-color-surface-light); color: var(--ah-color-ink); height: var(--ah-button-height); }
/* Label is width:100% and the arrow 14px wide, as in the reference; their flex shrink is what sets the arrow at 12.92px. */
.ah-button__label { display: block; width: 100%; }
.ah-button--outline .ah-button__label { text-align: center; }
.ah-button__arrow { width: 14px; height: 14px; }

/* Floating variant (Agent-design-1, requested 2026-10-01): no scrim or blur bar, so the persona is never cut by a band;
   logo, links and CTA float over the scene. The reference uses the blurred bar above. */
.ah-header--float, .ah-mheader--float { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Phone header (480px and below): logo and a round white menu button; the menu is a white sheet over the header. */
.ah-mheader { display: none; position: fixed; top: 0; left: 0; width: 100%; z-index: var(--ah-z-header); padding: 0 var(--ah-header-padding-x-mobile); background: var(--ah-color-header-scrim); backdrop-filter: blur(var(--ah-header-blur)); -webkit-backdrop-filter: blur(var(--ah-header-blur)); }
.ah-mheader__row { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: var(--ah-header-height); }
.ah-menu-button { position: absolute; z-index: 15; right: var(--ah-header-padding-x-mobile); top: 20px; width: var(--ah-menu-button-size); height: var(--ah-menu-button-size); border: 0; border-radius: var(--ah-radius-round); background: var(--ah-color-surface-light); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; cursor: pointer; }
.ah-menu-button span { display: block; width: 16px; height: 1px; background: var(--ah-color-ink); }
.ah-menu { position: absolute; top: 1px; left: 0; width: 100%; z-index: 999; background: var(--ah-color-surface-light); opacity: 0; display: none; cursor: auto; }
.ah-menu__top { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: var(--ah-header-height); padding: 0 var(--ah-header-padding-x-mobile); }
.ah-menu__top .ah-logo img, .ah-menu__top .ah-logo svg { filter: invert(100%); }
.ah-menu-close { width: var(--ah-menu-button-size); height: var(--ah-menu-button-size); border: 0; border-radius: var(--ah-radius-round); background: var(--ah-color-ink); display: flex; justify-content: center; align-items: center; cursor: pointer; }
.ah-menu-close span { display: block; width: 16px; height: 1px; background: var(--ah-color-surface-light); }
.ah-menu__body { position: relative; display: flex; flex-direction: column; align-items: start; gap: 24px; padding: 32px var(--ah-header-padding-x-mobile); }
.ah-menu__links { display: flex; flex-direction: column; align-items: start; gap: var(--ah-nav-gap); }
.ah-menu__links a { color: var(--ah-color-ink); }
.ah-menu .ah-button--outline { padding: var(--ah-button-padding-y) var(--ah-button-padding-x); border-color: var(--ah-color-hairline-on-light); color: var(--ah-color-ink); }

/* Hero: 160dvh tall with a sticky viewport; the copy sits bottom-left over the scene. */
.ah-hero { position: relative; z-index: var(--ah-z-hero); height: var(--ah-hero-height); pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: start; }
.ah-hero__sticky { position: sticky; top: 0; width: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: start; }
.ah-hero__copy { position: absolute; left: var(--ah-copy-left); bottom: var(--ah-copy-bottom); display: flex; flex-direction: column; align-items: start; }
.ah-hero__copy a { pointer-events: auto; }
.ah-hero__label-row { display: flex; flex-direction: row; align-items: center; justify-content: start; gap: 10px; width: 100%; margin-bottom: var(--ah-label-gap); overflow: hidden; }
.ah-hero__label { position: relative; display: block; width: 100%; font: 500 var(--ah-text-label) / 1 var(--ah-font-label); letter-spacing: var(--ah-tracking-label); text-transform: uppercase; color: var(--ah-color-ink-inverse); }
/* Reference blocks carry min-height: 75px; at 992px and below the 50px title row therefore centres in 75px. */
.ah-hero__title-row { display: flex; flex-direction: row; align-items: end; width: 100%; min-height: var(--ah-header-height); }
/* Same structure as the reference: a serif-italic heading whose text is a Satoshi span (the mixed fonts make the line
   box 76px at 72px), followed by the name as its own flex item. The heading carries the full name for assistive tech. */
.ah-hero__title { position: relative; display: block; font: italic 400 var(--ah-text-title) / 1 var(--ah-font-serif); letter-spacing: var(--ah-tracking-title); color: var(--ah-color-ink-inverse); white-space: nowrap; }
.ah-hero__lead { font-family: var(--ah-font-sans); font-style: normal; }
.ah-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The reference sets the name as an outlined Instrument Serif Italic image 68px tall (44px, 32px). Live text at 1.0147x
   the box height matches its ink width; the padding, margin and shift reproduce its box and ink position
   (scripts/epiminds-name-fit.mjs). The outlined image's ink is about 4% taller than the font's. */
.ah-hero__name { --ah-name-box: 68px; display: block; flex: none; height: var(--ah-name-box); margin-left: var(--ah-name-gap); padding-left: calc(var(--ah-name-box) * 0.0832); position: relative; top: 4px; font: italic 400 calc(var(--ah-name-box) * 1.0147) / var(--ah-name-box) var(--ah-font-serif); color: var(--ah-color-ink-inverse); white-space: nowrap; }
.ah-hero__name > span { display: block; position: relative; left: calc(var(--ah-name-box) * 0.0344); top: calc(var(--ah-name-box) * -0.103); }
/* The outlined name is filled top to bottom from #868585 to white (gradient stop at 80.86% of a 325-unit span that
   starts 68 units above the 234-unit image); mapped onto the text's ink box. */
.ah-hero__name > span { background: linear-gradient(180deg, var(--ah-name-top, #868585) -18.8%, var(--ah-name-bottom, #ffffff) 93.6%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ah-hero__cta { position: relative; top: -10px; left: 10px; }
.ah-hero__shade { position: absolute; left: 0; width: 100%; height: 500px; z-index: -1; pointer-events: none; }
/* bg.png / bg3.png are 128px vertical alpha ramps (0 to 128 and back), rebuilt as gradients from their sampled rows. */
.ah-hero__shade--in { bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.059) 25%, rgba(0,0,0,0.204) 50%, rgba(0,0,0,0.357) 75%, rgba(0,0,0,0.502) 100%); }
.ah-hero__shade--out { bottom: -500px; background: linear-gradient(to bottom, rgba(0,0,0,0.498) 0%, rgba(0,0,0,0.349) 25%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.055) 75%, rgba(0,0,0,0) 100%); }
.ah-hero__marker { position: absolute; top: 0; right: 0; width: 10px; height: var(--ah-hero-marker); pointer-events: none; }
/* Static variant (Agent-design-1, Nyx): a single screen with no camera dolly, copy fade or exit; the page does not scroll. */
.ah-hero--static { height: 100dvh; overflow: hidden; }
:where(.ah-root:has(.ah-hero--static)), :where(.ah-root:has(.ah-hero--static) body) { overflow: hidden; height: 100%; }

/* Exit: a fixed light overlay that fades in once the next section reaches the viewport (500ms easeInOut). */
.ah-exit { position: fixed; top: 0; left: 0; width: 100dvw; height: 100dvh; z-index: 0; pointer-events: none; background: var(--ah-exit-color, var(--ah-color-surface-light)); opacity: 0; transition: opacity var(--ah-duration-exit) var(--ah-ease-in-out); }
.ah-exit.is-on { opacity: 1; }
.ah-after { position: relative; z-index: 1; }

@media (max-width: 992px) {
  .ah-header .ah-button--outline { width: var(--ah-header-cta-width-tablet); }
  .ah-hero__label-row { margin-bottom: 12px; width: auto; }
  .ah-hero__title-row { align-items: center; justify-content: center; }
  .ah-hero__title { font-size: var(--ah-text-title-tablet); }
  .ah-hero__name { --ah-name-box: 44px; }
  .ah-hero__cta { top: auto; left: 20px; height: var(--ah-button-height-tablet); }
}
@media (max-width: 480px) {
  .ah-header { display: none; }
  .ah-mheader { display: block; }
  .ah-menu.is-open, .ah-menu.is-animating { display: block; }
  .ah-hero__copy { left: 24px; bottom: 12vh; }
  .ah-hero__label { font-size: var(--ah-text-label-mobile); }
  .ah-hero__title-row { flex-direction: column; position: relative; align-items: start; min-height: 0; }
  .ah-hero__title { font-size: var(--ah-text-title-mobile); }
  .ah-hero__name { --ah-name-box: 32px; position: absolute; top: 0; left: 152px; margin-top: 4px; margin-left: 6px; }
  .ah-hero__cta { left: auto; margin-top: 12px; padding-top: 16px; padding-bottom: 16px; height: auto; }
}

/* Demo section after the hero (not part of the reference hero scope): plain light content that the exit overlay
   reveals. Replace it with your page. */
.ah-after__inner { max-width: 1100px; margin: 0 auto; padding: 22dvh var(--ah-copy-left) 18dvh; color: var(--ah-color-ink); }
.ah-after__kicker { font: 500 var(--ah-text-label) / 1 var(--ah-font-label); letter-spacing: var(--ah-tracking-label); text-transform: uppercase; margin-bottom: 20px; }
.ah-after__title { font: 400 clamp(32px, 4.6vw, 64px) / 1.04 var(--ah-font-sans); letter-spacing: var(--ah-tracking-title); max-width: 18ch; }
.ah-after__title em { font-family: var(--ah-font-serif); font-style: italic; }
.ah-after__body { margin-top: 28px; max-width: 58ch; font: 400 18px / 1.5 var(--ah-font-sans); color: #3c3c3c; }
.ah-after__body a { text-decoration: underline; text-underline-offset: 3px; }
.ah-after--plain { padding: 0 var(--ah-copy-left) 20dvh; max-width: 1100px; margin: 0 auto; }