/* scrollcraft base: the mechanism the engine expects, plus the token floor.
   Theme by overriding the six colour tokens and two faces on :root.
   Do not restyle .sc-stage or [data-sc-*] in page CSS. */

:root {
  --sc-canvas: #ffffff;
  --sc-surface: #f4f4f4;
  --sc-ink: #1a1a1a;
  --sc-ink-soft: #4a4a4a;
  --sc-accent: #1a1a1a;
  --sc-accent-ink: #ffffff;
  --sc-font-display: system-ui, sans-serif;
  --sc-font-text: system-ui, sans-serif;

  /* 4px base scale */
  --sc-1: .25rem; --sc-2: .5rem; --sc-3: .75rem; --sc-4: 1rem; --sc-5: 1.5rem;
  --sc-6: 2rem; --sc-7: 3rem; --sc-8: 4rem; --sc-9: 6rem; --sc-10: 8rem; --sc-11: 12rem;
  --sc-gutter: clamp(1.25rem, 4vw, 4rem);
  --sc-section: clamp(4rem, 10vw, 9rem);
  --sc-measure: 62ch;

  --sc-t-sm: clamp(.875rem, .84rem + .15vw, .95rem);
  --sc-t-md: clamp(1rem, .96rem + .2vw, 1.125rem);
  --sc-t-lg: clamp(1.2rem, 1.1rem + .45vw, 1.5rem);
  --sc-t-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --sc-t-2xl: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  --sc-t-3xl: clamp(2.8rem, 1.9rem + 3.8vw, 5rem);
  --sc-t-4xl: clamp(3.4rem, 2rem + 5.6vw, 7rem);
  --sc-track-tight: -0.025em;
  --sc-track-normal: 0;

  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sc-e1: 0 1px 2px rgb(26 26 26 / .12), 0 2px 6px rgb(26 26 26 / .08);
  --sc-e2: 0 4px 10px rgb(26 26 26 / .14), 0 12px 28px rgb(26 26 26 / .12);
  --sc-e3: 0 10px 24px rgb(26 26 26 / .18), 0 28px 60px rgb(26 26 26 / .16);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* browser surfaces */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
html { caret-color: var(--sc-accent); scrollbar-color: var(--sc-ink) var(--sc-canvas); }
a { text-underline-offset: .18em; text-decoration-thickness: .08em; }
:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; border-radius: 4px; }
.sc-nums, [data-sc-count] { font-variant-numeric: tabular-nums; }

/* type helpers */
.sc-display { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: var(--sc-track-tight); line-height: 1; }
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); }
.sc-body { max-width: var(--sc-measure); }
.sc-wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); position: relative; }

/* ---- mechanism ---------------------------------------------------------- */
[data-sc-act] { position: relative; }
.sc-act--pinned > .sc-stage,
.sc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* kinetic split masks: room for descenders so tails are not sheared */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.sc-split--line { display: block; }
.sc-split__i { display: inline-block; will-change: transform; }

/* flow reveals: hidden only once the engine is running, so no-JS keeps every word */
.sc-ready [data-sc-in]:not([data-sc-stagger]),
.sc-ready [data-sc-in][data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
.sc-ready [data-sc-in].sc-in:not([data-sc-stagger]),
.sc-ready [data-sc-in][data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* progress hairline */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90;
  background: var(--sc-ink); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* grain */
.sc-grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .05;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* pan under reduced motion: the rail becomes a native scroll region */
@media (prefers-reduced-motion: reduce) {
  [data-sc-act="pan"] .sc-stage { overflow-x: auto; scroll-snap-type: x proximity; }
  [data-sc-act="pan"] [data-sc-pan] > * { scroll-snap-align: start; }
  .sc-ready [data-sc-in]:not([data-sc-stagger]),
  .sc-ready [data-sc-in][data-sc-stagger] > * { transform: none; transition: opacity 300ms linear; }
}