/* ==========================================================================
   Virtuant AI — foundations
   Design tokens, reset and typography. Loaded on every page.
   ========================================================================== */

:root {
  /* Surfaces — derived from the navy plate the logo sits on */
  --ink-950: #01030b;
  --ink-900: #04070f;
  --ink-850: #060b1a;
  --ink-800: #080e20;
  --ink-700: #0c1430;

  /* Brand spectrum — cyan → blue → violet → magenta */
  --cyan: #23e0ff;
  --blue: #3b74ff;
  --violet: #7a4bf0;
  --magenta: #e243d8;

  --spectrum: linear-gradient(100deg, var(--cyan), var(--blue) 34%, var(--violet) 68%, var(--magenta));

  /* Type */
  --paper: #f2f6ff;
  --paper-dim: #9fabcc;
  --paper-faint: #64719a;

  /* Lines & fills */
  --line: rgba(146, 172, 255, .12);
  --line-strong: rgba(146, 172, 255, .26);
  --fill: rgba(146, 172, 255, .045);
  --fill-strong: rgba(146, 172, 255, .085);

  /* Families */
  --f-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --f-accent: "Instrument Serif", Georgia, serif;

  /* Fluid type scale */
  --t-mega: clamp(2.7rem, 7vw, 6.6rem);
  --t-xxl: clamp(2.4rem, 6vw, 5rem);
  --t-xl: clamp(2rem, 4vw, 3.25rem);
  --t-lg: clamp(1.5rem, 2.4vw, 2rem);
  --t-md: clamp(1.05rem, 1.35vw, 1.25rem);
  --t-body: clamp(1rem, 1.1vw, 1.0625rem);
  --t-sm: 0.9375rem;
  --t-xs: 0.75rem;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --shell: 1320px;
  --shell-narrow: 940px;
  --scene: clamp(6rem, 13vh, 11rem);

  /* Shape — deliberately varied, not one radius everywhere */
  --r-xs: 3px;
  --r-sm: 8px;
  --r-md: 14px;

  /* Motion */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.66, 0, .34, 1);
  --d-fast: .22s;
  --d-mid: .5s;

  /* Pointer position, written by core.js */
  --px: 50%;
  --py: 40%;

  color-scheme: dark;
}

/* --------------------------------------------------------------- reset -- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

/* The icon set is stroke-based (Lucide), inlined as a <symbol> sprite. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

svg:not(.sprite) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection {
  background: rgba(35, 224, 255, .26);
  color: #fff;
}

/* ---------------------------------------------------------- typography -- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.t-mega { font-size: var(--t-mega); }
.t-xxl { font-size: var(--t-xxl); }
.t-xl { font-size: var(--t-xl); }
.t-lg { font-size: var(--t-lg); letter-spacing: -0.025em; }

/* The one editorial flourish in the system: a serif italic accent word. */
.accent {
  font-family: var(--f-accent);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  padding-right: .06em;
}

.grad-text {
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 56ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--spectrum);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------- layout -- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-narrow { max-width: var(--shell-narrow); }

.scene { padding-block: var(--scene); position: relative; }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  transform: translateY(-150%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus-visible { transform: none; }

/* ------------------------------------------------------ reveal on scroll -- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity .7s var(--e-out) var(--reveal-delay, 0s),
    transform .9s var(--e-out) var(--reveal-delay, 0s),
    clip-path .9s var(--e-out) var(--reveal-delay, 0s);
}

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"] { transform: translate3d(28px, 0, 0); }
[data-reveal="scale"] { transform: scale(.965); }
[data-reveal="wipe"] {
  transform: none;
  clip-path: inset(0 0 100% 0);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Headline lines authored as .line > span so each can roll up independently */
.line { display: block; overflow: hidden; }
.line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1s var(--e-out) var(--line-delay, 0s);
}
.is-in .line > span, .line.is-in > span { transform: none; }

/* ----------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .line > span { transform: none; }
}