/* ============================================
   ON THE DAY — Typography
   Space Grotesk headlines, Inter Variable body
   ============================================ */

/* ── Heading Scale ── */
h1 { font-size: clamp(var(--text-4xl), 5vw, var(--text-7xl)); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); font-weight: var(--font-semibold); }

.lead {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
}

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--otd-green-400) 0%,
    var(--aurora-cyan) 50%,
    var(--otd-green-300) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text--aurora {
  background: linear-gradient(
    135deg,
    var(--otd-green-400),
    var(--aurora-emerald),
    var(--aurora-cyan),
    var(--otd-green-300)
  );
  background-size: 300% 300%;
  animation: gradient-shift 8s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Split Text Containers ── */
.split-word {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-slow) var(--ease-out-expo);
  will-change: clip-path;
}

.split-word.revealed {
  clip-path: inset(0 0 0% 0);
}

/* ── Display Text (huge decorative numbers/text) ── */
.text-display {
  font-family: var(--font-heading);
  font-size: var(--text-8xl);
  font-weight: var(--font-black);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--slate-200);
  user-select: none;
}

.text-display--dark {
  color: rgba(255, 255, 255, 0.03);
}

/* ── Monospace / Tabular Numbers ── */
.text-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.text-tabular {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ── Weight Shift (driven by scroll via JS) ── */
.weight-shift {
  transition: font-weight var(--duration-normal) var(--ease-smooth);
  font-variation-settings: 'wght' var(--text-weight, 400);
}

/* ── Scroll Velocity Skew ── */
.velocity-skew {
  transition: transform 150ms linear;
  transform: skewY(calc(var(--scroll-velocity, 0) * 0.3deg));
}

/* ── Dark mode text ── */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section p,
.dark-section .lead {
  color: var(--dark-text);
}

.dark-section .lead,
.dark-section p {
  color: var(--dark-text-secondary);
}