/* ==========================================================================
   White Crow® — reset, typography, global chrome
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns scrolling; native smooth would fight it */
}

body {
  margin: 0;
  background: var(--wc-base);
  color: var(--wc-ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Lenis drives transforms; let it own the scroll container. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--wc-accent); color: var(--wc-accent-ink); }

/* --- focus ---------------------------------------------------------------- */
/* Must survive the custom cursor — keyboard users never see that cursor. */
:focus-visible {
  outline: 2px solid var(--wc-accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--wc-ink);
  color: var(--wc-void);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.skip-link:focus { transform: translateY(0); }

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

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

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

.rule {
  height: 1px;
  background: var(--wc-line);
  border: 0;
  margin: 0;
}

/* --- type ----------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section-index {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--wc-faint);
  letter-spacing: 0.12em;
}

.lead {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  color: var(--wc-mute);
  max-width: var(--measure);
}

.accent { color: var(--wc-accent); }

.display em {
  font-style: normal;
  color: var(--wc-accent);
}

/* Words in a split headline. data-blend recedes every word into the page;
   data-highlight names the one or two that stay bright. */
.display .w-blend { color: var(--wc-blend); }
.display .w-lit   { color: var(--wc-ink); }

/* --- buttons -------------------------------------------------------------- */

.btn {
  --btn-fill: var(--wc-ink);
  --btn-ink: var(--wc-void);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 1.05em 2.1em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--btn-ink);
  background: var(--btn-fill);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
/* Fill wipes up from the bottom on hover. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wc-accent);
  transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }

.btn--ghost {
  --btn-fill: transparent;
  --btn-ink: var(--wc-ink);
  box-shadow: inset 0 0 0 1px var(--wc-line);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--wc-accent-ink); }

/* --- link with an underline that wipes in ---------------------------------- */

.link-wipe {
  position: relative;
  display: inline-block;
  padding-bottom: 0.15em;
}
.link-wipe::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.link-wipe:hover::after, .link-wipe:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- reveal primitives ----------------------------------------------------
   Lines and words are wrapped by SplitText; the mask is the parent, the child
   carries the transform. .is-in is added by ScrollTrigger.
   -------------------------------------------------------------------------- */

/* Display line-height is tight, so the mask gets extra room below for
   descenders (the y in "you"), pulled back with a negative margin so line
   spacing is unchanged. The reveal slides the inner by 130% to stay hidden. */
.reveal-mask { overflow: hidden; display: block; padding-bottom: 0.18em; margin-bottom: -0.18em; }

[data-reveal] {
  opacity: 0;
  transform: translateY(calc(2.2rem * var(--motion)));
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }

/* --- global chrome: grain -------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* --- global chrome: scroll progress --------------------------------------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 95;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--wc-accent);
  pointer-events: none;
}

/* --- global chrome: nav ---------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--gutter);
  transform: translateY(-100%);
  transition: transform var(--dur-mid) var(--ease-out-expo),
              background var(--dur-mid) linear;
}
.nav.is-visible { transform: translateY(0); }
.nav.is-solid {
  background: rgba(7, 7, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--border);
}

.nav__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__mark sup {
  font-family: var(--font-mono);
  font-size: 0.34em;
  vertical-align: super;
  color: var(--wc-mute);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2.2vw, var(--sp-7));
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav__links .nav__num { color: var(--wc-faint); margin-right: 0.5em; }

@media (max-width: 860px) {
  .nav__links li:not(.nav__cta) { display: none; }
}

.nav__cta a {
  display: inline-block;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--wc-line);
  transition: background var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo);
}
.nav__cta a:hover { background: var(--wc-ink); color: var(--wc-void); }

/* --- preloader ------------------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--wc-void);
}
.preloader[hidden] { display: none; }

.preloader__mark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--display-sm);
  line-height: 1;
  text-align: center;
}
/* The mark is revealed by a wipe: the mask clips, the inner slides up. */
.preloader__wipe { overflow: hidden; display: block; }
.preloader__wipe > span {
  display: block;
  transform: translateY(105%);
}
.preloader__count {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--wc-faint);
  font-variant-numeric: tabular-nums;
}
.preloader__bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--wc-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* Before the preloader finishes, the page underneath must not scroll. */
body.is-loading { overflow: hidden; }

/* --- utility --------------------------------------------------------------- */

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

/* If JS never runs, nothing stays invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }