/* =========================================================
   TYPOGRAPHY + [data-reveal] SYSTEM
   ========================================================= */

/* ── Base type ──────────────────────────────────────────── */

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.t-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-2);
}

.t-muted {
  color: var(--color-text-2);
}

/* ── [data-reveal] clip-path system ─────────────────────── */
/*
  Elements with [data-reveal] start clipped from the bottom.
  scroll-anim.js triggers the reveal via GSAP.
  JS adds .is-revealed once animation fires.
*/

[data-reveal] {
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

[data-reveal].is-revealed {
  clip-path: inset(0 0 0% 0);
}

/* ── Splitting.js support ────────────────────────────────── */
/*
  hero.js uses Splitting to split text into .char spans.
  Each .char starts invisible; JS staggers them in.
  Blur is scoped to .hero__name only — subtitle chars don't blur.
*/

.splitting .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

/* Blur effect only on the name */
.hero__name .char,
.case-hero-intro__title .char {
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

/* ── Word-level stagger ──────────────────────────────────── */

.splitting-words .word {
  display: inline-block;
  overflow: hidden;
}

.splitting-words .word > .char {
  display: inline-block;
}