/* ==========================================================================
   Base — reset, typography, layout primitives, utilities
   ========================================================================== */

/* ---- Fonts (Fontshare CDN; swap to self-hosted woff2 in assets/fonts) ---- */
@import url("https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap");

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

* {
  margin: 0;
}

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

/* Lenis drives scrolling; native smooth-scroll would fight it. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--slate-500);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

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

/* ---- Typography ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  font-weight: 600;
}

.display-lg {
  font-size: var(--fs-display-lg);
  line-height: 0.98;
}

.display-md {
  font-size: var(--fs-display-md);
}

.heading-md {
  font-size: var(--fs-heading-md);
}

.heading-sm {
  font-size: var(--fs-heading-sm);
  font-family: var(--font-display);
  font-weight: 600;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
}

.measure {
  max-width: var(--measure);
}

/* Eyebrow — small caps label above every section title */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue-500);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Gradient text — used only on hero and section titles over ink */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: clip;
}

/* Band colours — the dark/light rhythm */
.band-ink {
  background: var(--ink-900);
  color: var(--on-dark);
}
.band-ink-800 {
  background: var(--ink-800);
  color: var(--on-dark);
}
.band-paper {
  background: var(--paper-50);
  color: var(--slate-500);
}
.band-paper-100 {
  background: var(--paper-100);
  color: var(--slate-500);
}

.band-ink h1,
.band-ink h2,
.band-ink h3,
.band-ink-800 h1,
.band-ink-800 h2,
.band-ink-800 h3 {
  color: var(--paper-50);
}

.band-paper h1,
.band-paper h2,
.band-paper h3,
.band-paper-100 h1,
.band-paper-100 h2,
.band-paper-100 h3 {
  color: var(--slate-700);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 780px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* ---- Ambience: grain + glow orbs ---------------------------------------- */
/* Grain is the single largest contributor to the filmic feel. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: var(--grad-glow);
  filter: blur(28px);
  pointer-events: none;
  will-change: transform;
}

/* ---- Diagonal light-sweep band transition -------------------------------- */
/* Sits at the top of a band and cuts a soft diagonal into the band above. */
.sweep {
  position: absolute;
  inset-inline: -5%;
  top: -1px;
  height: clamp(60px, 7vw, 130px);
  pointer-events: none;
  background: inherit;
  clip-path: polygon(0 0, 100% 55%, 100% 100%, 0 100%);
}

.sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(var(--rgb-cyan), 0.5) 50%, transparent 100%);
  clip-path: polygon(0 0, 100% 55%, 100% calc(55% + 2px), 0 2px);
  opacity: 0.7;
}

/* ---- Accessibility ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--paper-50);
  color: var(--ink-900);
  font-weight: 700;
  transition: top var(--d-fast) var(--e-out);
}

.skip-link:focus-visible {
  top: var(--sp-4);
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Reveal primitives ---------------------------------------------------
   Rest state IS the final state. JS adds .is-armed to hide elements before
   animating them in, so a JS failure or no-JS visit leaves the page readable.
   -------------------------------------------------------------------------- */
[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
}

[data-parallax] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal].is-armed {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .orb {
    animation: none !important;
  }
}