/* ============================================
   Noor — Utilities (typography + reduced-motion)
   ============================================ */

/* --- Typographic classes (fluid scale) --- */

.text-display {
  font-family: var(--font-display-current);
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-family: var(--font-display-current);
  font-size: var(--text-h1);
  line-height: 1.15;
}

.text-h2 {
  font-family: var(--font-display-current);
  font-size: var(--text-h2);
  line-height: 1.2;
}

.text-h3 {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.3;
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
}

.text-small {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: 1.5;
}

.section-label {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* Legacy aliases (backward compat) */
.display-hero { font-family: var(--font-display-current); font-size: var(--text-display); line-height: 1; }
.display-work { font-family: var(--font-display-current); font-size: var(--text-h1); line-height: 1.15; }

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}