/* ==========================================================================
   Base Typography, Utilities & Scroll Reveal
   ========================================================================== */

body {
  background-color: var(--white);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

/* Заголовки */
h1, .hero-title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

h2, .section-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: clamp(28px, 4vw, 48px);
}

h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

p + p {
  margin-top: 16px;
}

/* Цветовые утилиты секций */
.bg-off-white {
  background-color: var(--off-white);
}

.bg-accent-light {
  background-color: var(--accent-light);
}

.text-center {
  text-align: center;
}

/* Анимация появления при скролле */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out),
              transform 600ms var(--ease-out);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}